Binding data to a Chart programmatically

Posted by: fredcicles on 10 September 2017, 11:48 am EST

  • Posted 10 September 2017, 11:48 am EST

    I am trying to bind data to a chart programmatically. I have found 2 different approaches but am unable to get either one to work.

    In the first approach, I am using the following code.

    DeviceHistory = [
    { x: '12:00', y: 1 },
    { x: '12:05', y: 2 },
    { x: '12:10', y: 3 },
    { x: '12:15', y: 3 },
    { x: '12:20', y: 2 },
    { x: '12:25', y: 4 }
    ];

    // Total Concurrent Devices
    $("#chartDevices").wijlinechart({
    dataSource: DeviceHistory,
    seriesList: [{
    label: "Devices",
    legendEntry: false,
    data: {
    x: {bind: "x"},
    y: {bind: "y"}
    },
    markers: { visible: true, type: "circle" }
    }]
    });

    $.getJSON("/Common/DeviceUsage/",
    function (data) {
    DeviceHistory = data;
    });

    My data is coming from an MVC controller in the form of the following object.

    public class WijmoChartData
    {
    public List x { get; set; }
    public List y { get; set; }
    }

    I can see that there is data being returned from the ajax call and set to the DeviceHistory object. But the chart never gets updated with the new data.

    In the second approach, I use the same MVC controller to return the data but make this call.

    $.getJSON("/Common/DeviceUsage/",
    function (data) {
    $("#chartDevices").wijlinechart("option", "seriesList", data);
    });

    This second approach gives me an error at least but I have not been able to figure out what to do about it:
    SCRIPT438: Object doesn't support property or method 'splice'
    jquery.wijmo-complete.all.2.0.9.min.js, line 128 character 23894
  • Replied 10 September 2017, 11:48 am EST

    Hello,

    As far as my understanding goes, you are binding the "data" returned to your $.getJSON() method as the DataSource of the series list of chart.
    I would like to inform you that you have first push this data into an array and then assign this array as the DataSource for your LineChart series list.
    You may refer to the following blog link for implementing the same:
    http://our.componentone.com/2012/08/03/drill-down-in-wijmo-barchart-using-jquery-ajax-method/

    Please see the code snippet for heading "Implementing Drill Down" in the ajax() call. Data is pushed in the array and then DataSource property of Chart is being set.

    Regards
    Nidhi
  • Replied 10 September 2017, 11:48 am EST

    Nidhi, thanks for your response.

    Is there a difference between the arrays in the following screenshots. These are the values of the data that are stored in that DeviceHistory variable.

    Note how one shows [[object],[object],...] while the other shows [...]



  • Replied 10 September 2017, 11:48 am EST

    Hello,

    I am not sure what is the difference here, Can you please tell me what kind of collection is "PSAV.Dashboard.DeviceHistory" in which you are assigning the "arr" object.

    If possible please provide me your code or a sample so that I can check and can assist you further.

    Regards
    Nidhi
  • Replied 10 September 2017, 11:48 am EST

    I think that my understanding of how the chart control's BIND parameter worked was incorrect. I found that if I "rebinded" after I updated the array holding the data, then it displays the updated data.

    I was thinking of the term bind as it might apply in knockout.js where if the data gets updated then the chart is updated to reflect. Apparently that is not the case.


    ...
    PSAV.Dashboard.DeviceHistory = arr;
    $(“#chartDevices”).wijlinechart({
    dataSource: PSAV.Dashboard.DeviceHistory,
    seriesList: [{ data: { x: {bind: "x"}, y: {bind: "y"} } }]
    });
  • Need extra support?

    Upgrade your support plan and get personal unlimited phone support with our customer engagement team

    Learn More

    Forum Channels