JSON data with JSCharts

Question

JSON data:

[
    {
        Id: 100,
        Type: "admin",
        Name: "LightSpeedJS Technologies",
        Description: "LightSpeedJS, LLC"
    },
    {
        Id: 200,
        Type: "superadmin",
        Name: "LightSpeedJS Technologies",
        Description: "LightSpeedJS"
    }
]

I am a beginner in JSCharts. I'm using $.getJSON to load json files and with them i want to create charts with JSCharts.

I have pulled the sample but all the samples either with Array or XML but in my requirement I have to use with Json data.

Here is what I try to pull together:

<script type="text/javascript">

$(document).ready(function () {

        var myData = new Array();

        $.getJSON("http://.....", function (org_data) {  
            $.each(org_data, function (key, val) {
                myData.push(val.Name);
                myData.push(parseInt(val.Id)); 
            }); 
        });

      var myChart = new JSChart('graph', 'bar');
      myChart.setDataArray(myData);
      myChart.setTitle('Host distribution per macroareas');
      myChart.draw();
 });

</script>

Error: in the Chrome console when I check I'm getting the following error:

Uncaught TypeError: Cannot read property '0' of undefined

Answer 1

It seems you are calling your chart functions, prior to response received from getJSON call. Hence, update your code to following

$(document).ready(function () {

    var myData = new Array();

    $.getJSON("http://.....", function (org_data) {  
        $.each(org_data, function (key, val) {
            myData.push(val.Name);
            myData.push(parseInt(val.Id)); 
        }); 
        /* Moved the chart data inside the getJSON call */
        var myChart = new JSChart('graph', 'bar');
        myChart.setDataArray(myData);
        myChart.setTitle('Host distribution per macroareas');
        myChart.draw(); 
    });
});