Google Visualization Line Chart with fixed interval

0
votes

I am drawing a Line Chart using the Google Chart to plot change in integer over period of time. here is the code I am using:

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');
data.addRow([new Date(1377011402000),5]);     
data.addRow([new Date(1376967661000),12]);
//for full data see http://ubuntuone.com/3NMEtWYkhQSCHx4RERVcgq
                 

    var options = {
      title: 'Company Performance',
          fontSize: '12px',
          curveType: 'function',
          pointSize: 5,
          hAxis: {title: 'Week Report',
                  titleTextStyle: {color: '#FF0000'}
                  },
          vAxis: {title: 'Leads',  
                  titleTextStyle: {color: '#FF0000'}}
    };

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

Now, this is how the graph is currently looks

And if you try to make sense of this, it doesn't. so there a way in Google Chart Visualization using which I could specify x axis intervals? for example I want x axis to be(800-900Hrs to 2300-00Hrs). so there is just one 1line plotted instead of current multiple lines?

Here is the page live: http://ubuntuone.com/3NMEtWYkhQSCHx4RERVcgq

2
javascriptchartsgoogle-visualization

2 Answers

2
votes

Your data is not in chronological order, which is why the line is so messy; the LineChart connects points which are adjacent in the DataTable, so you have to sort the data before drawing the chart. You can either sort it before inputting your data, or you can call the #sort method on your DataTable:

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');

/*
 * populate rows
 */

// sort data by Time
data.sort(0);
2
votes

In addition to sorting your data, it sounds like you want to use the timeofday type of value, documented minimally at: https://google-developers.appspot.com/chart/interactive/docs/reference?hl=en#DataTable_getValue

You should be able to use values like this:

data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Leads');
data.addRow([[0, 0, 0, 1377011402000],5]);     
data.addRow([[0, 0, 0, 1376967661000],12]);