谷歌图表点点数值

时间:2014-04-03 12:50:17

标签: javascript php google-visualization

在谷歌图表上工作,我将会得到彼此之间没有那么大的价值,可能会有一些不同的决定。所以现在它很难将鼠标悬停在每个点上以查看价值。是否可以使用与图例相同颜色的点旁边显示的值?或者这是解决这个问题的另一个更好的方法吗以下是它现在的样子:

enter image description here

代码:

<?php

    $con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
    mysql_select_db("nih_bw", $con);

    $sth = mysql_query("
SELECT routines.date, routines.time, 
SUM( IF( measurements.title =  'T_Temperatur', CAST( REPLACE( routines.value,  ',',  '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Temperatur, 

SUM( IF( measurements.title =  'T_Badende_per_Time', CAST( REPLACE( routines.value,  ',',  '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Badende,

SUM( IF( measurements.title =  'T_Luft_Temperatur', CAST( REPLACE( routines.value,  ',',  '.' ) AS DECIMAL( 18, 2 ) ), null ) ) AS Luft

FROM routines
INNER JOIN measure_routine ON routines.id = measure_routine.routine_id
INNER JOIN measurements ON measure_routine.measure_id = measurements.id
GROUP BY routines.date, routines.time
ORDER BY routines.date, routines.time;  


    ;");
//Select measurements.title, routines.value, routines.date, routines.time from routines, measure_routine, measurements Where routines.id=measure_routine.routine_id AND measure_routine.measure_id=measurements.id AND measurements.title='T_Badende_per_Time' order by routines.date, routines.time


    $rows = array();
    //flag is not needed
    $flag = true;
    $table = array();

    $table['cols'] = array(

    array('label' => 'routines.date' & 'routines.time', 'type' => 'datetime'),
   array('label' => 'Temperatur', 'type' => 'number'),  
   array('label' => 'Badende', 'type' => 'number'),
   array('label' => 'Luft', 'type' => 'number'),    

    );

    $rows = array();

    while($r = mysql_fetch_assoc($sth)) {
        $temp = array();
    // assumes dates are in the format "yyyy-MM-dd"
    $dateString = $r['date'];
    $dateArray = explode('-', $dateString);
    $year = $dateArray[0];
    $month = $dateArray[1] - 1; // subtract 1 to convert to javascript's 0-indexed months
    $day = $dateArray[2];

    // assumes time is in the format "hh:mm:ss"
    $timeString = $r['time'];
    $timeArray = explode(':', $timeString);
    $hours = $timeArray[0];
    $minutes = $timeArray[1];
    $seconds = $timeArray[2];

    $temp = array();
    $temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)"); 
    $temp[] = array('v' => $r['Temperatur']);
    $temp[] = array('v' => $r['Badende']);
    $temp[] = array('v' => $r['Luft']);




    $rows[] = array('c' => $temp);

    }

    $table['rows'] = $rows;

    $jsonTable = json_encode($table, JSON_NUMERIC_CHECK);

     echo $jsonTable;   

?>


<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(<?=$jsonTable?>);



        var options = {
        /*width: 900, height: 900, */
          title: 'Visualization',
          curveType: 'function', 
           legend: { position: 'bottom' },
           pointSize: 5,
        vAxis: {title: "Values", titleTextStyle: {italic: false}},
        hAxis: {title: "Time", titleTextStyle: {italic: false}},
        explorer: { actions: ['dragToZoom', 'rightClickToReset'], 
                    axis: 'both' },





        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);


      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

0 个答案:

没有答案