Цикл через JSON с Ajax и передать значение в Google Chart - PullRequest
Новая
       6

Цикл через JSON с Ajax и передать значение в Google Chart

0 голосов
/ 07 декабря 2018

У меня есть следующий код Javascript: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">




      google.charts.load('current', {'packages':['controls']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


       var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Targets',
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' },
            'ui': {
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false,
            }
        },
            'state': {
            selectedValues: ['1970']
        }
    });




var jsonvalues = $.getJSON("http://localhost:5000/data", function(results) {
        $.each(results, function(index) {
            alert(results[index].key[1]);
        });
    });
$
    var data = google.visualization.arrayToDataTable([
          ['Year','Targets', 'Total targets'],

        {% for info in jsonvalues %}
        ['{{info['key'][1]|safe}}','{{info['key'][0]|safe}}', parseInt('{{info['value']|safe}}')],
        {% endfor %}
        ]);
    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'curve_chart',
    'options': {
      'width': 800,
      'height': 600,
        },
        'view': {
            'columns': [0, 2]
        }
    });

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(countryPicker, [barChart]);
    dash.draw(data);
}



    </script>
  </head>
  <body>
    <div id="control2"></div>
    <div id="curve_chart" style="width: 1920px; height: 1000px"></div>
  </body>
</html>

Я пытаюсь добиться передачи данных getJSON, которые я получаю с помощью вызова Ajax из http://localhost:5000/data, в Google Chart.

Я много чего пробовал, но пока застрял и не знаю, как добиться того, чего хочу.Я просто вставил аспект предупреждения в качестве теста, чтобы увидеть, возвращает ли это данные.Предупреждение возвращает мне данные JSON, которые я запрашиваю, так что все в порядке.

Мои данные JSON выглядят следующим образом: 

[
    {
    key: [
    "Abortion Related",
    1977
    ],
    value: 4
    },
    {
    key: [
    "Abortion Related",
    1978
    ],
    value: 6
    }
]

1 Ответ

0 голосов
/ 08 декабря 2018

Возвращаясь к вопросу, который у меня был вчера, я решил его следующим рабочим кодом: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">




      google.charts.load('current', {'packages':['controls']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


       var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Targets',
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' },
            'ui': {
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false,
            }
        },
            'state': {
            selectedValues: ['1970']
        }
    });
 function updateDiv() {
          $(document).ready(function(){

    var data = new google.visualization.DataTable();

  data.addColumn('number', 'Year');
  data.addColumn('string', 'Targets');
  data.addColumn('number', 'Total Targets');

      values = new Array;

      $.getJSON("http://localhost:5000/data", function(results)
      {
          $.each(results, function(index)
          {
                  values.push([results[index].key[1],results[index].key[0],results[index].value]);
              });

          data.addRows(values);

    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'curve_chart',
    'options': {
      'width': 800,
      'height': 600,
        },
        'view': {
            'columns': [0, 2]
        }
    });

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(countryPicker, [barChart]);
    dash.draw(data);
    });

}); } setInterval(updateDiv, 5000)
}



    </script>
  </head>
  <body>
    <div id="control2"></div>
    <div id="curve_chart" style="width: 1920px; height: 1000px"></div>
  </body>
</html>

Сначала я перешел с arrayToDatatable на DataTable.После этого я объявил столбцы и тип данных с data.addColumn.Затем я переместил getJSON в данные `var.И это помогло мне.Более подробную информацию можно найти здесь: https://developers.google.com/chart/interactive/docs/reference

...