Please advise GV API newbie with JSON decoding?

17 views
Skip to first unread message

BobMCT

unread,
Sep 22, 2017, 2:04:30 PM9/22/17
to Google Visualization API
I've only been dabbling with google Chart for about a week.  I originally hard coded all my values just to assure that the result was what was desired.
Now its time to make it work with server provided data.
The data is being delivered via an ajax call from which the data arrives as a JSON string (array created in php is sent with json_encode).
I receive that data into the js function as CAJ and then am trying to use JSON.parse to convert it to a multi-dimensional array to be fed to the chart function.
I've tried numerous methods found via reseach and all seem to fail.   According to my research this should be very easy.
In my js code below I have the regular array hard coded as a comment for reference.

Can someone/anyone please point out what syntax, function, operation that I am missing?  Several days on the same impasse is very frustrating.

Thanks in advance:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var CAJ = '{"2015":["1":130,"2":124,"3":156,"4":173,"5":180,"6":189,"7":174,"8":137,"9":133,"10":157,"11":141,"12":145],"2016":["1":180,"2":174,"3":230,"4":228,"5":223,"6":222,"7":223,"8":197,"9":156,"10":186,"11":157,"12":182],"2017":["1":207,"2":175,"3":291,"4":254,"5":245,"6":284,"7":191,"8":201,"9":141,"10":114,"11":69,"12":39]}';

        var CA = JSON.parse(CAJ);
       
        var data = new google.visualization.arrayToDataTable(CA);
       
/*
        var data = google.visualization.arrayToDataTable([
          ['Month', '2017', '2016','2015'],
          ['Jan',130,95,65],
          ['Feb',186,143,80],
          ['Mar',165,150,70],
          ['Apr',182,166,65],
          ['May',198,175,55],
          ['Jun',212,192,59],
          ['Jul',285,212,75],
          ['Aug',315,298,86],
          ['Sep',170,250,95],
          ['Oct',0,252,100],
          ['Nov',0,198,89],
          ['Dec',0,166,79]
        ]);
*/
       
        var options = {
          title: 'Procedures Performed by Month & Year\n\n',
          hAxis: {title: 'by Month',  titleTextStyle: {color: '#333'}},
          vAxis: {title: 'Count', minValue: 0}
        };
       
        // Instantiate and draw the chart.
        var chart = new google.visualization.LineChart(document.getElementById('ChartArea'));
        chart.draw(data, options);
       
    }

Reply all
Reply to author
Forward
0 new messages