Google chart show title as label

StackOverflow https://stackoverflow.com/questions/22757653

Question

Working on a line chart in google chart. Having the issue that I cant show the title of the measurement as label. I am further going to get different measurements, right now I can only show one measurement at a time.

Here is the sql query and output in database:

enter image description here

This is the visualization, as you can see I want the routine.value to show the title: T_Badende_per_Time:

enter image description here

Code: 

<?php

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

    $sth = mysql_query("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' => 'routines.value', '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' => (string) $r['value']);


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

    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
     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: 'vertical'}


        };

        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>
Was it helpful?

Solution

If you want one line per measurement type, you need to pivot your data by measurements.title. MySQL does not support the PIVOT statement, so you have to fake it like this:

SELECT
    routines.data,
    routines.time,
    SUM(IF(measurements.title = 'T_Badende_per_Time', , 0)) CAST(REPLACE(measurements.value, ',', '.') AS DECIMAL(18, 2)) as T_Badende_per_Time,
    SUM(IF(measurements.title = 'measure_2', CAST(REPLACE(measurements.value, ',', '.') AS DECIMAL(18, 2)), 0)) as measure_2,
    SUM(IF(measurements.title = 'measure_3', CAST(REPLACE(measurements.value, ',', '.') AS DECIMAL(18, 2)), 0)) as measure_3
    etc...
FROM
    routines
    INNER JOIN measure_routine ON routines.id = measure_routine.routine_id
    INNER JOIN measurements ON measure_routine.measure_id = measurements.id
WHERE
    <conditions>
GROUP BY routines.date, routines.time
ORDER BY routines.date, routines.time

Then in PHP, create one column for each measurement type:

$table['cols'] = array(
    array('label' => 'routines.date' & 'routines.time', 'type' => 'datetime'),
    array('label' => 'T_Badende_per_Time', 'type' => 'number'),
    array('label' => 'measure_2', 'type' => 'number'),
    array('label' => 'measure_3', 'type' => 'number')
    // etc
);

$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' => (string) $r['T_Badende_per_Time']);
    $temp[] = array('v' => (string) $r['measure_2']);
    $temp[] = array('v' => (string) $r['measure_3']);
    // etc..

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

OTHER TIPS

Well, you need to set the vAxis.title. You already set it in your line 73 (vAxis: {title: "Values"}) but it needs to be set to a variable from PHP:

[...]
$vAxis = false;
while($r = mysql_fetch_assoc($sth)) {
    // this will overwrite itself, it looks to me that in your case it doesn't matter
    $vAxis = $r["title"];
    [...]

and then output it

vAxis: {title: "<?=$vAxis ?: "default title"; ?>"}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top