Создание диаграмм с использованием API Google Maps с частичными данными - PullRequest
Новая
       1

Создание диаграмм с использованием API Google Maps с частичными данными

3 голосов
/ 31 мая 2011

Я хочу создать линейный график. В настоящее время мой график выглядит следующим образом

enter image description here

Данные действительны, поэтому график должен начинаться в 9 часов утра и увеличиваться по направлению к оси х до 16 часов.

когда пользователь генерирует график в 12 часов. Мой ожидаемый результат (Примечание: данные доступны только до 12 часов.)

enter image description here

Я не смог найти способ сгенерировать выше частичный график. Есть идеи?

Ответы [ 2 ]

4 голосов
/ 23 июня 2011

Надеюсь, я правильно понял. Код в комментариях - это остаток данных (с 12:00 до 16:00). Без этих данных график покажет частичный график, как вам нужно. 

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string');
        data.addColumn('number');
        data.addRows(8);    
        data.setValue(0, 0, '9AM');
        data.setValue(2, 0, '11AM');
        data.setValue(4, 0, '1PM');
        data.setValue(6, 0, '3PM');
        data.setValue(7, 0, '4PM');

        data.setValue(0, 1, 5480); // 9AM
        data.setValue(1, 1, 5475); // 10AM
        data.setValue(2, 1, 5490); // 11AM
        data.setValue(3, 1, 5490); // 12PM
        /*
        data.setValue(4, 1, 5500); // 1PM
        data.setValue(5, 1, 5490); // 2PM
        data.setValue(6, 1, 5530); // 3PM
        data.setValue(7, 1, 5560); // 4PM
        */

        var chart = 
           new google.visualization.AreaChart(document.getElementById('chart_div'));
           chart.draw(data, {width: 500, height: 240,
                          vAxis: {minValue: 5460, maxValue: 5560},
                          colors: ['#76A4FB'],
                          legend: 'none'
                         });
           }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Надеюсь, это поможет.

0 голосов
/ 23 июня 2011

Вы можете использовать jqChart jQuery Plugin.Смотрите эти образцы:

http://www.jqchart.com/samples/ChartAxes/DateTimeAxis

http://www.jqchart.com/samples/RealTime/LiveData

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...