Fanto Fanto - 4 months ago 68
jQuery Question

c# bind morris.js with datatable code not working

I have a code to bind morris.js bar chart to datatable but it's not working.. the graph doesn't display. It souhld be like this : I have a textbox to make research by keywords. The graph should show how many time the keyword appears in the datatable depending on the date so : abscissa = date and ordinate = number of times keyword appears.

what I want to display :

bar chart graph

So here is my code not working(im using ajax with webmethod) :

js code :

<script src="morris.js"></script>
<script src="raphael-min.js"></script>
<script>
$(document).ready(function () {
var word = "{'word':'" + $("#tbSearch").val() + "'}";
Morris.Bar
({
element: 'bar-chart',
data: $.parseJSON(Graph()) + word,
xkey: 'value',
ykeys: ['value'],
labels: ["nombre d'occurence"],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['yellow', 'pink'],
resize: true

});
});

function Graph() {
var data = "";


$.ajax({
type: 'POST',
url: 'WelcomDigitalHelpDesk.aspx/GetBarchartData',
dataType: 'json',
async: false,
contentType: "application/json; charset=utf-8",
data: {},
success: function (result) {

data = result.d;

},
error: function (xhr, status, error) {
alert(error);
}
});

return data;
}
</script>


c# code :

public class GraphData
{
public string label { get; set; }
public string value { get; set; }
}

public class GraphDataList
{
public List<GraphData> ListOfGraphData { get; set; }
}

[WebMethod]
public static string GetBarchartData(string word)
{

string sqlQuery = @"SELECT DateDescription, COUNT(DescriptionDemande) FROM cfao_DigiHelp_index.DigiHelpData WHERE DescriptionDemande like '" + word + "' GROUP BY DateDescription";

DataTable DTGraph = DataBaseCacheDigitalHepDeskConnection.SqlDataTable(sqlQuery, "DIGIHELP_DB");

List<GraphData> dataList = new List<GraphData>();

foreach (DataRow dtrow in DTGraph.Rows)
{
GraphData graphData = new GraphData();
graphData.label = Convert.ToString(dtrow["DateDescription"].ToString());
graphData.label = Convert.ToString(dtrow["DescriptionDemande"].ToString());

dataList.Add(graphData);
}

//oper = null which means its first load.
var jsonSerializer = new JavaScriptSerializer();
string data = jsonSerializer.Serialize(dataList);
return data;

}


Can someone tell me what I am doing wrong ?

Answer

I made it worked so here is the answer working for me :

code js :

function buildChartGraph(data) {
    $('#bar-chart').html('');

    Morris.Bar
        ({
            element: 'bar-chart',
            data: JSON.parse(data),
            xkey: 'label',
            ykeys: ['value'],
            labels: ['value'],
            fillOpacity: 0.6,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['blue'],
            pointStrokeColors: ['darkblue'],
            lineColors: ['skyblue', 'orange'],
            resize: true

        });
}

function GetOccurence() {
    var data = "";


    $.ajax({
        type: "POST",

        contentType: "application/json; charset=utf-8",

        url: "WelcomDigitalHelpDesk.aspx/GetBarchartData",

        data: "{'word':'" + $("#tbSearch").val() + "'}",

        dataType: "json",

        success: function (result) {

            buildChartGraph(result.d);

        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });
}

Code c# :

[WebMethod]
    public static string GetBarchartData(string word)
    {

    string sqlQuery = @"SELECT TOP 40 DateDescription, COUNT(DescriptionDemande) FROM TableName WHERE DescriptionDemande like '%" + word + "%' GROUP BY DateDescription";

    DataTable DTGraph = DataBaseCacheDigitalHepDeskConnection.SqlDataTable(sqlQuery, "DbName");

    List<GraphData> dataList = new List<GraphData>();

    foreach (DataRow dtrow in DTGraph.Rows)
    {
        GraphData graphData = new GraphData();

        graphData.value = Convert.ToString(dtrow[1].ToString());
        graphData.label = Convert.ToString(DateTime.Parse( dtrow[0].ToString()).ToShortDateString());

        dataList.Add(graphData);
    }


    var jsonSerializer = new JavaScriptSerializer();
    string data = jsonSerializer.Serialize(dataList);
    return data;

}



}

public class GraphData
{
    public string label { get; set; }
    public string value { get; set; }
}

public class GraphDataList
{
    public List<GraphData> ListOfGraphData { get; set; }
}