CODEWITHSUNDEEP
javascriptjqueryjsonchartsgoogle-visualization
harshavmb
harshavmb

Reputation: 3872

comparing with timeseries data of previous week google visualization api

I want to compare current data with previous week data. Unfortunately, I couldn't get the right parameters to be passed to google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]) function.

Below is the code :

     $.getJSON('https://api.myjson.com/bins/16r3qn').done(function (jsonData) {
                    var data1 = new google.visualization.DataTable();
            var data2 = new google.visualization.DataTable();
            data1.addColumn('timeofday','X');
            data1.addColumn('number','current');
            data2.addColumn('timeofday','X');
            data2.addColumn('number','previous');
            var hour; var min; var sec;var day;
            var monthNames = ["January", "February", "March", "April", "May", "June",
                              "July", "August", "September", "October", "November", "December"
                            ];

            var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
             $.each(json.current.timeSeries, function(i,item){
                 curtime =  json.current.timeSeries[i].beginTimeSeconds;
                 curcount = json.current.timeSeries[i].inspectedCount;
                 date = new Date(curtime*1000);
                 hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
                 day = date.getDay()+' '+monthNames[date.getMonth()];
                 data1.addRows([[[hour,min,sec],curcount]]);
            });

            $.each(json.previous.timeSeries, function(i,item){
                 pretime = json.previous.timeSeries[i].beginTimeSeconds;
                 precount = json.previous.timeSeries[i].inspectedCount;
                 date = new Date(pretime*1000);
                 hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
                 day = date.getDay()+' '+monthNames[date.getMonth()];
                 data2.addRows([[[hour,min,sec],precount]]);
            });

            var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);


// ...etc. Rest of your code comes here, or is called from here.
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(joinedData, {width: 1400, height: 360});

}

Graph to-be :

Correct image

Current graph :

Current incorrect image

Help is much appreciated.

Thanks in advance.

Upvotes: 1

Views: 442

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

using 'timeofday' allows the values to align to the same x-axis range

in order to keep alignment and show the current week's dates on the x-axis,

build custom ticks using object notation,
each label will have a property for the value (v:) and the formatted value (f:)

in this case, the value will need to be --> 'timeofday'
and the formatted value --> 'string'

sample tick... 

{
  v: new Date(curtime*1000),  // whatever you're using for 'timeofday'
  f: '04/03/2017'             // whatever you want to display on the x-axis
}

you could build in the current $.each snippet, no need to add any for previous... 

var xTicks = [];
var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy hh:mm:ss'
});

$.each(jsonData.current.timeSeries, function(i,item){
    curtime =  jsonData.current.timeSeries[i].beginTimeSeconds;
    curcount = jsonData.current.timeSeries[i].inspectedCount;

    var xValue = {
        v: new Date(curtime*1000),
        f: formatDate.formatValue(new Date(curtime*1000))
    }
    xTicks.push(xValue);
    data1.addRows([[xValue,curcount]]);
});

using the object notation for the x value as well,
will allow the date to appear on the tooltip

add to options... 

hAxis: {
  ticks: xTicks
}

note: depending on the pattern used --> pattern: 'MM/dd/yyyy hh:mm:ss'
you may end up with duplicate ticks,
may need to test before adding to the ticks array

EDIT -- see following snippet... 

 $.getJSON('https://api.myjson.com/bins/16r3qn').done(function (jsonData) {
        var data1 = new google.visualization.DataTable();
        var data2 = new google.visualization.DataTable();
        data1.addColumn('timeofday','X');
        data1.addColumn('number','current');
        data2.addColumn('timeofday','X');
        data2.addColumn('number','previous');
        var hour; var min; var sec;var day;
        var monthNames = ["January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"
        ];

        // init ticks
        var xTicks = [];

        var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
         $.each(json.current.timeSeries, function(i,item){
             curtime =  json.current.timeSeries[i].beginTimeSeconds;
             curcount = json.current.timeSeries[i].inspectedCount;
             date = new Date(curtime*1000);
             hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
             day = date.getDay()+' '+monthNames[date.getMonth()];

             // add tick
             xTicks.push({
               v: [hour,min,sec],
               f: day
             });

             data1.addRows([[[hour,min,sec],curcount]]);
        });

        $.each(json.previous.timeSeries, function(i,item){
             pretime = json.previous.timeSeries[i].beginTimeSeconds;
             precount = json.previous.timeSeries[i].inspectedCount;
             date = new Date(pretime*1000);
             hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
             day = date.getDay()+' '+monthNames[date.getMonth()];
             data2.addRows([[[hour,min,sec],precount]]);
        });

        var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);


  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(joinedData, {
    width: 1400,
    height: 360,

    // add ticks to chart
    hAxis: {
      ticks: xTicks
    }
  });

}

code added above... 

        // init ticks
        var xTicks = [];

             // add tick
             xTicks.push({
               v: [hour,min,sec],
               f: day
             });

  chart.draw(joinedData, {
    width: 1400,
    height: 360,

    // add ticks to chart
    hAxis: {
      ticks: xTicks
    }
  });

EDIT 2

for comparing current week to previous,
recommend using the following option...

focusTarget: 'category'

this will combine the tooltips for each interval, so that you can see both values

you could also add a column for the variance using a calculated column in a data view
then hide the series from the chart,
but still allow it to appear in the tooltip

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  $.getJSON('https://api.myjson.com/bins/eh5zf').done(function (json) {
    var data1 = new google.visualization.DataTable();
    var data2 = new google.visualization.DataTable();
    data1.addColumn('timeofday','X');
    data1.addColumn('number','current');
    data2.addColumn('timeofday','X');
    data2.addColumn('number','previous');
    var hour; var min; var sec;var day;
    var monthNames = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];

    // init ticks
    var xTicks = [];

    var curtime = 0; var curcount = 0; var precount = 0;var pretime = 0;
     $.each(json.current.timeSeries, function(i,item){
         curtime =  json.current.timeSeries[i].beginTimeSeconds;
         curcount = json.current.timeSeries[i].inspectedCount;
         date = new Date(curtime*1000);
         hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
         day = date.getDay()+' '+monthNames[date.getMonth()];

         // add tick
         xTicks.push({
           v: [hour,min,sec]
         });

         data1.addRows([[[hour,min,sec],curcount]]);
    });

    $.each(json.previous.timeSeries, function(i,item){
         pretime = json.previous.timeSeries[i].beginTimeSeconds;
         precount = json.previous.timeSeries[i].inspectedCount;
         date = new Date(pretime*1000);
         hour = date.getHours(); min = date.getMinutes(); sec = date.getSeconds();
         day = date.getDay()+' '+monthNames[date.getMonth()];
         data2.addRows([[[hour,min,sec],precount]]);
    });

    var joinedData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);
    var dataView = new google.visualization.DataView(joinedData);
    dataView.setColumns([0, 1, 2, {
      calc: function (dt, row) {
        return dt.getValue(row, 1) - dt.getValue(row, 2)
      },
      type: 'number',
      label: 'variance'
    }]);


    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dataView, {
      width: 1400,
      height: 360,
      // add ticks to chart
      hAxis: {
        ticks: xTicks
      },
      focusTarget: 'category',
      series: {
        2: {
          color: 'transparent',
          enableInteractivity: false,
          visibleInLegend: false
        }
      },
      vAxis: {
        viewWindow: {
          min: 0
        }
      }
    });
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions