What is the correct way to use google graphic cards with dates

Question

I see this link to use google chart api to combine multiple line charts

What is the recommended way to have dates on the bottom line, since it seems that each line in the chart has the same level of space, so if I have charts where their dates and values ​​are, I want the correct interval to be between (1 day difference must differ from data points at a distance of 1 month).

It looks like you entered dates in the first column so that each row is at the same horizontal distance from each other.

EDIT : I added the code below

---

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Target'); data.addColumn('number', 'Actual'); data.addRows(9); data.setValue(0, 0, new Date(2010, 1, 1)); data.setValue(0, 1, 215); data.setValue(0, 2, 215); data.setValue(1, 0, new Date(2010, 2, 1)); data.setValue(1, 2, 213); data.setValue(2, 0, new Date(2010, 2, 4)); data.setValue(2, 2, 213); data.setValue(3, 0, new Date(2010, 2, 8)); data.setValue(3, 2, 213); data.setValue(4, 0, new Date(2010, 3, 1)); data.setValue(4, 2, 220); data.setValue(5, 0, new Date(2010, 4, 1)); data.setValue(5, 2, 190); 

Answer 1

This example uses a string to store the year, so there will be no “smart” interval. However, Google DataTable supports Date and DateTime column types, so this should be enough for your needs.

http://code.google.com/apis/visualization/documentation/reference.html#DataTable

Basically, instead of calling

 ... data.addColumn('string', 'Year'); ... 

Would you do

 ... data.addColumn('date', 'TheDate'); // or datetime, depending on your needs 

---

Edit: in this case, you probably have to put the date values ​​yourself. It seems like the fixed spacing comes from the row index in a DataTable. For example, you can see that this code generates points with spaced points in the diagram:

 function drawVisualization() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Target'); data.addRows(9); data.setValue(0, 0, new Date(2010, 1, 1)); data.setValue(0, 1, 213); data.setValue(3, 0, new Date(2010, 2, 1)); data.setValue(3, 1, 213); data.setValue(4, 0, new Date(2010, 2, 4)); data.setValue(4, 1, 213); data.setValue(5, 0, new Date(2010, 2, 8)); data.setValue(5, 1, 213); new google.visualization.LineChart(document.getElementById('visualization')).draw(data, null); 

}