Home » Php » javascript – Google chart timeline with date in x axis

javascript – Google chart timeline with date in x axis

Posted by: admin July 12, 2020 Leave a comment


Working on a google line chart. The problem I have came into is that the chart on shows values of one day, have not implemented timeline with dates. I understand that the chart will be wide if your getting values from for example one week, is there any way to solve that ? I was thinking of something like this ?

enter image description here

How its looking right now:

enter image description here

Database: ( the date is saved as date in phpadmin)

enter image description here



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

$sth = mysql_query("SELECT * FROM googlechart");

$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(

 // Labels for your chart, these represent the column titles
    // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
    array('label' => 'Time',    'type' => 'number'),
    array('label' => 'PH',      'type' => 'number'),
    array('label' => 'temperature','type' => 'number'), 
    array('label' => 'Chlorine','type' => 'number'),


    $rows = array();

while($r = mysql_fetch_assoc($sth)) {
     $temp = array();
        $temp[] = array('v' => (string) $r['Time']); 
        $temp[] = array('v' => (string) $r['PH']);
        $temp[] = array('v' => (string) $r['temperature']);
        $temp[] = array('v' => (string) $r['Chlorine']);

        $temp[] = array('v' => (int) $r['Time']);   
        $rows[] = array('c' => $temp);


 $table['rows'] = $rows;
 $jsonTable = json_encode($table);
 echo $jsonTable;   



    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});

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

        var options = {
        /*width: 900, height: 900, */
          title: 'Visualization',
          /* curveType: 'function', */
           legend: { position: 'bottom' },
           pointSize: 10,
        vAxis: {title: "Values", titleTextStyle: {italic: false}},
        hAxis: {title: "Time", titleTextStyle: {italic: false}},

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

    <div id="chart_div" style="width: 900px; height: 500px;"></div>
How to&Answers:

You can get part of what you want using format property of hAxis, for example:

hAxis: {
    format: "HH:mm",

See line chart configuration options for hAxis.format.

Update: Example at jsbin