Mysql
 sql >> база данни >  >> RDS >> Mysql

Google Chart Api използва стойност за дата и час

Току-що опитах следния код:

<?php
 $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.

    array('label' => 'Date Time', 'type' => 'date'),
    array('label' => 'Sensor Value', 'type' => 'number'),
    array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),
);

$result = array(
    array('datetime' => '2015-04-25 00:00:00', 'sensorValue' => 5),
    array('datetime' => '2015-04-25 14:30:00', 'sensorValue' => 10),
    array('datetime' => '2015-04-26 02:10:10', 'sensorValue' => 15),
    array('datetime' => '2015-04-26 12:10:10', 'sensorValue' => 17),
    array('datetime' => '2015-04-27 03:45:23', 'sensorValue' => 25),
    array('datetime' => '2015-04-28 15:34:00', 'sensorValue' => 4),
);

    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the chart

      $temp[] = array('v' => 'Date('.date('Y',strtotime($r['datetime'])).',' . 
                                     (date('n',strtotime($r['datetime'])) - 1).','.
                                     date('d',strtotime($r['datetime'])).','.
                                     date('H',strtotime($r['datetime'])).','.
                                     date('i',strtotime($r['datetime'])).','.
                                     date('s',strtotime($r['datetime'])).')'); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['sensorValue']); 
      $temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
?>


  <html>
  <head>
    <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          tooltip: {isHtml: true}
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

така че промених:

  1. array('label' => 'Date Time', 'type' => 'number') към array('label' => 'Date Time', 'type' => 'date')
  2. формира датата с 'Date(date("Y"),date("n") - 1,date("d"),0,0,0)' както е описано тук

Ето резултата с html в подсказката:

АКТУАЛИЗИРАНЕ

Ако искате персонализирани подсказки, тук е документът за това. Вижте актуализирания код по-горе, трябва да направите три промени, за да персонализирате подсказките:

  1. добавете "виртуалната" колона към списъка с колони (с роля =подсказка):

    array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),

  2. добавете стойността за колоната в цикъла:

    $temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');

  3. и уведомете jsapi, че съдържанието е html:

    var options = {
      ...
      tooltip: {isHtml: true}
    };
    

АКТУАЛИЗИРАНЕ

За да персонализирате стойностите на хоризонталната ос, трябва да разгледате това първо. Просто добавете hAxis обект (и неговия format ) към обекта с опции на диаграмата:

    var options = {
      ...
      hAxis: {
        format: 'yyyy-M-d'
      }
    };

и ще видите нещо като:




  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. Множество възходящ ред не работи в Mysql

  2. Превключване на резултатите от базата данни jQuery

  3. MySQL грешка 1005?

  4. Използване на .aggregate() върху стойност, въведена с помощта на .extra(select={...}) в Django заявка?

  5. Може ли MySQL да използва индекси, когато между условията има ИЛИ?