Convert unix time to date in a linechart

1,798 views
Skip to first unread message

Joey D'Anna

unread,
Jun 3, 2014, 1:35:00 PM6/3/14
to google-visua...@googlegroups.com
I'm using JSON data to feed a line chart, and the first column is all unix timestamps.
Is there an easy way to have the chart automatically show those as readable dates instead of just the number of seconds?

here is my code as of now:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title>KEGERATOR</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
    <!-- Load jQuery -->
    <script language="javascript" type="text/javascript"
    </script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
  $.ajaxSetup ({
      // Disable caching of AJAX responses */
    cache: false
        });
        google.load("visualization", "1", { packages: ["corechart"] });
        google.load('visualization', '1.0', {'packages':['controls']});

        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var jsonData = $.ajax({
                url: "chartselect.php?limit=<?php echo $limit;?>&s1=<?php echo $s1;?>&s2=<?php echo $s2;?>&s3=<?php echo $s3;?>&s4=<?php echo $s4;?>&s5=<?ph\
p echo $s5?>&s6=<?php echo $s6?><?php if ($res) echo '&res='.$res?>",
                dataType: "json",
                async: false
            }).responseText;

            var obj = jQuery.parseJSON(jsonData);
  var data = google.visualization.arrayToDataTable(obj);

            var chart = new google.visualization.ChartWrapper({
              chartType: 'LineChart',
                  containerId: 'chart_div',
                  options: {

                chartArea: {
                  left: '0%',
                      width: '100%',
                      top: '0%',
                      height: '100%'
                      },
                    theme: 'maximized'

                    }});

            var control = new google.visualization.ControlWrapper({
              controlType: 'ChartRangeFilter',
                  containerId: 'control_div',
                  options: {
                filterColumnIndex: 0, //set the column index to filter on here
                    ui: {
                  chartOptions: {

                    chartArea: {
                      left: '0%',
                          width: '100%',
                          top: '10%',
                          height: '100%'
                          },

                    }
                  }
                }
              });

            var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
            dashboard.bind([control], [chart]);
            dashboard.draw(data);

        }


Andrew Gallant

unread,
Jun 3, 2014, 10:38:36 PM6/3/14
to google-visua...@googlegroups.com
You can use a DataView to convert the timestamps to Date objects:

// assumes you have timestamps in column 0, and two data series (columns 1 and 2)
var view = new google.visualization.DataView(data);
view.setColumns([{
    type: 'date',
    label: data.getColumnLabel(0),
    calc: function (dt, row) {
        var timestamp = dt.getValue(row, 0) * 1000; // convert to milliseconds
        return new Date(timestamp);
    }
}, 1, 2]);

Then use the view to draw your Dashboard:

dashboard.draw(view);
Reply all
Reply to author
Forward
0 new messages