jQuery UI Widgets Forums Chart json data as key value pair

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 9 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • json data as key value pair #62353

    jitheshchandra
    Participant

    Hi i am a newbie for jqcharts i want to create a stacked line chart , i am having this data in the database

    Day   Label    Hits
    2014-11-04   abc   1
    2014-11-04   contoso-cscoISE-syslg   249
    2014-11-05   contoso-cscoISE-syslg   50
    2014-11-05   abc   20
    2014-11-06   contoso-cscoISE-syslg   100
    2014-11-06   abc   15
    2014-11-07   contoso-cscoISE-syslg   50
    2014-11-07   abc   20
    2014-11-08   contoso-cscoISE-syslg   50
    2014-11-08   abc   30
    2014-11-10   contoso-cscoISE-syslg   10
    2014-11-10   abc   54
    2014-11-11   contoso-cscoISE-syslg   12
    2014-11-11   abc   12

    and i am using a web method in my c# code to retieve the data which is of the following type

    ` public string eventDate { get; set; }
    public KeyValuePair<string,int> eventHits { get; set; }

    
    and i am converting the object to json before reading them in my view , but am unable to do so 
    
    this is my javascript code 
    can anyone tell me where i am going wrong 
    
    

    $(document).ready(function () {

    //var date = new Date(parseInt(jsonDate.substr(6)));

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘IncidentDate’ },
    { name: ‘ComputerHits’ }

    ],

    url: ‘SeriesChart/GetOrders’
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    autoBind: true,

    async: false,
    downloadComplete: function () { },
    loadComplete: function (source) {
    var data = new Array();

    for (var i = 0; i < source.length; i++) {

    var Computers = source[i].ComputerHits;
    Computers.name = Computers.Key;
    Computers.vlaue = Computers.Value;

    data.push(Computers);
    }

    source.ComputerHits = data;

    },
    //loadComplete: function () { },
    loadError: function () { }
    });
    var i = 0;
    // prepare jqxChart settings

    var settings = {
    title: “Incidents By Date”,
    showLegend: true,
    padding: { left: 50, top: 5, right: 50, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘IncidentDate’,
    formatFunction: function (jsonDate) {
    var ret = jsonDate.split(” “);
    var str1 = ret[0];
    var offset = new Date().getTimezoneOffset() * 60000;
    return $.jqx.dataFormat.formatdate(str1, ‘MM/dd/yyyy’);

    },
    showTickMarks: true,
    tickMarksInterval: Math.round(dataAdapter.records.length / 500),
    tickMarksColor: ‘#888888’,
    unitInterval: Math.round(dataAdapter.records.length / 50),
    showGridLines: true,
    gridLinesInterval: Math.round(dataAdapter.records.length / 5000),
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘stackedline’,
    valueAxis:
    {
    displayValueAxis: true,
    description: ‘Hits’,
    //descriptionClass: ‘css-class-name’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    minValue: 0,
    maxValue: 20
    },
    series: [

    // { dataField: ‘Hits’, displayText: ‘Hits’ },
    { dataField: ‘ComputerHits.Object(ComputerHits(Object.Value))’, displayText: ‘Computer’ }
    ],
    bands:
    [
    { minValue: 2000, maxValue: 2500, color: ‘#FF0000’, opacity: 0.15 },
    { minValue: 1000, maxValue: 1100, color: ‘#FF0000’, opacity: 0.20 }
    ]
    }
    ]
    };

    $(‘#jqxChart’).jqxChart(settings);

    });
    </script>
    </head>
    <body class=’default’>
    <div style=’height: 600px; width: 682px;’>
    <div id=’host’ style=”margin: 0 auto; width: 850px; height: 400px;”>
    <div id=’jqxChart’ style=”width: 850px; height: 400px; position: relative; left: 0px; top: 0px;”>
    </div>
    </div>
    </div>
    </body>
    </html>
    `
    the x axis should contain date and the y axis should be plotted against the number of hits and should have multiple series graphs based on label.

    Note : these labels are generated dynamically .

    json data as key value pair #62384

    Dimitar
    Participant

    Hello jitheshchandra,

    There are multiple issues with the code presented:

    1) The names of the source datafields have to correspond to the names of the database columns. Otherwise, mapping would be required. So, your source object should be like:

    var source = {
        datatype: "json",
        datafields: [{
                name: 'Day'
            }, {
                name: 'Hits'
            }
    
        ],
    
        url: 'SeriesChart/GetOrders'
    };

    2) I am not sure what you are trying to achieve in the dataAdapter loadComplete callback function. Adding a ComputerHits field to the source object would have no effect on the loaded data. In my opinion, if you load the data as I suggested in 1), you will be able to successfully plot your chart (with Days on the x-axis Hits on the y-axis).

    We suggest you take at our extensive collection of jqxChart demos, which demonstrates a large variety of bindings and functionalities. For example, the demo Negative Values shows how to bind a chart to a JSON source. You may also find the jqxChart API Documentation helpful.

    If you wish to modify the data before it is fully loaded, you can do it in the data adapter’s beforeLoadComplete callback. You can read more about it in the jqxDataAdapter Getting Started guide.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    json data as key value pair #62433

    jitheshchandra
    Participant

    thank you Dimitar, but the problem for me is i am able to get a single line graph , i want a series line graph , as the data in the database would be dynamic like one line for contoso-cscoISE-syslg another for abc . i am not sure how i do this .

    json data as key value pair #62436

    Dimitar
    Participant

    Hi jitheshchandra,

    Please refer to the demo Stacked Line Series to see how you can implement this functionality.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    json data as key value pair #62441

    jitheshchandra
    Participant

    Hi Dimitar,
    I did go through the demo , but here the lines under series referral ,SearchPaid, SearchNonpaid are predefined but my worry is here abc and contoso-cscoISE-syslg are generated dynamically , how do i do it if i am getting the data dynamically .

    json data as key value pair #62505

    Dimitar
    Participant

    Hi jitheshchandra,

    Please provide us with a sample of your JSON data. It may be that it is not suitable to load in jqxChart as it is and would require some modification.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.