Передача JSONArray в график Google - PullRequest
Новая
       7

Передача JSONArray в график Google

1 голос
/ 29 сентября 2019

Я хочу создать динамическую линейную диаграмму Google, заполненную данными из JSONArray.У меня есть следующий код: 

    <div id="curve_chart" style="margin-bottom: -12px; margin-left: -28px;"></div>

    <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(drawChart0);

   function drawChart0() {
   var data = new google.visualization.DataTable(JSONArray);
   // assumes "day" is a date and "totalfeedings" is a number
   data.addColumn('string', 'Day');
   data.addColumn('number', 'TotalFeedings');

   for (var i = 0; i < JSONArray.length; i++) {
        data.addRow([JSONArray[i].Day, JSONArray[i].TotalFeedings]);
        }

        var options0 = {
            curveType: 'function',
            legend: 'none',
            lineWidth: 6,
            width: 440,
            height: 180,
            backgroundColor: 'transparent',
            axisTitlesPosition: 'in',
            color: '#286090',
            trendlines: {
                type: 'linear',
                color: 'green',
                lineWidth: 3,
                opacity: 0.3,
                showR2: true,
                visibleInLegend: true
                },
            vAxis: {
                gridlines: {
                count: 8
            }
        }
    };

    var chart0 = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart0.draw(data, options0);
    }
    </script>

JSONArray содержит следующие данные: 


        { 
    "data": [ 
        { "Day": "2019-09-13T00:00:00", "TotalFeedings": 3 }, 
        { "Day": "2019-09-14T00:00:00", "TotalFeedings": 10 }, 
        { "Day": "2019-09-15T00:00:00", "TotalFeedings": 14 }, 
        { "Day": "2019-09-16T00:00:00", "TotalFeedings": 19 }, 
        { "Day": "2019-09-17T00:00:00", "TotalFeedings": 14 }, 
        { "Day": "2019-09-18T00:00:00", "TotalFeedings": 24 }, 
        { "Day": "2019-09-19T00:00:00", "TotalFeedings": 15 }, 
        { "Day": "2019-09-20T00:00:00", "TotalFeedings": 18 }, 
        { "Day": "2019-09-21T00:00:00", "TotalFeedings": 14 }, 
        { "Day": "2019-09-22T00:00:00", "TotalFeedings": 10 }, 
        { "Day": "2019-09-23T00:00:00", "TotalFeedings": 13 }, 
        { "Day": "2019-09-24T00:00:00", "TotalFeedings": 9 }, 
        { "Day": "2019-09-25T00:00:00", "TotalFeedings": 11 }, 
        { "Day": "2019-09-26T00:00:00", "TotalFeedings": 8 }, 
        { "Day": "2019-09-27T00:00:00", "TotalFeedings": 7 }, 
        { "Day": "2019-09-28T00:00:00", "TotalFeedings": 2 } 
    ] 
}

Диаграмма не отображается.

Интересно, что я здесь не так делаю?

1 Ответ

0 голосов
/ 29 сентября 2019

  1. Создайте массив, подобный тому, что я сделал ниже

  2. Вам нужно сделать JSONArray.data[i].Day и JSONArray.data[i].TotalFeedings для доступа к данным JSON.

Пример здесь 

JSONArray = {
  "data": [
    {
      "Day": "2019-09-13T00:00:00",
      "TotalFeedings": 3
    },
    {
      "Day": "2019-09-14T00:00:00",
      "TotalFeedings": 10
    },
    {
      "Day": "2019-09-15T00:00:00",
      "TotalFeedings": 14
    }
    //rest of your data
  ]
}

// change from this
data.addRow([JSONArray[i].Day, JSONArray[i].TotalFeedings]);

// to this
data.addRow([JSONArray.data[i].Day, JSONArray.data[i].TotalFeedings]);
...