Google Line Chart is freaking out, drawing in random angles


I'm using Google Chart (http://code.google.com/apis/chart/) to produce some graphs for my company. They have been working just fine for almost a year, but yesterday my line graph started freaking out. Normally the data values are plotted from left to right at heights matching the data... but suddenly it's drawing willy nilly all over the graph.

wacky line chart

I've verified my data is correct, but invalid data shouldn't even be able to create something like this. The lines appear to be drawing in random directions. I've tested it in Chrome and Safari (the graphs are drawn locally in the browser using javascript).

var data = google.visualization.arrayToDataTable(json); var $chartDiv = $("#"+divId);

var chart = new google.visualization.LineChart(document.getElementById(divId));
chart.draw(data, {
    title: 'Last 8 Weeks',
    backgroundColor: { stroke: "#666", strokeWidth: 1 },
    chartArea: { left: 30, top: 30, width: "88%", height: "87%" },
    fontSize: 10,
    width: 900, 
    height: 300, 
    series: [
        { color: '#ff9900', lineWidth: 2 },
        { color: '#109618', lineWidth: 1 },
        { color: '#3366cc', lineWidth: 1 },
        { color: '#dc3912', lineWidth: 1 },
    ]
});

The data fetched via ajax:

[
    ["Total","Group1","Group2","Group3"],
    [112.799,93.8,8.099,10.9],
    [138.78,84,41.93,12.85],
    [134.466,91,33.026,10.44],
    [114.433,51.1,49.693,13.64],
    [119.126,56,50.106,13.02],
    [106.671,65.1,29.351,12.22],
    [130.591,77.7,41.741,11.15],
    [135.162,84.7,37.282,13.18],
    [118.117,87.5,16.597,14.02],
    [112.74,82.6,20.65,9.49],
    [159.929,126.7,24.899,8.33],
    [196.773,130.9,54.103,11.77],
    [156.795,112,32.935,11.86],
    [200.767,134.4,54.117,12.25],
    [174.032,119.7,41.762,12.57],
    [184.667,151.2,16.947,16.52],
    [126.307,95.9,16.737,13.67],
    [116.214,71.4,28.784,16.03],
    [138.88,100.8,16.66,21.42],
    [167.592,114.8,28.952,23.84],
    [140.338,82.6,25.158,32.58],
    [151.537,108.5,16.247,26.79],
    [158.655,97.3,33.355,28],
    [121.052,74.2,16.772,30.08],
    [183.059,91.7,61.019,30.34],
    [117.368,42,43.078,32.29],
    [168.724,114.8,16.464,37.46],
    [193.518,110.6,25.018,57.9],
    [122.399,63,12.579,46.82],
    [137.259,86.8,12.579,37.88],
    [197.998,135.1,20.188,42.71],
    [202.576,121.1,33.236,48.24],
    [177.322,110.6,28.882,37.84],
    [157.455,100.1,18.865,38.49],
    [246.644,180.6,33.194,32.85],
    [162.448,106.4,25.158,30.89],
    [132.871,102.9,16.961,13.01],
    [134.752,107.8,16.772,10.18],
    [123.275,76.3,32.865,14.11],
    [176.741,135.8,29.351,11.59],
    [168.279,137.9,20.279,10.1],
    [155.784,112,33.544,10.24],
    [203.047,154,37.317,11.73],
    [241.308,195.3,33.208,12.8],
    [177.536,137.9,24.346,15.29],
    [195.654,139.3,41.174,15.18],
    [192.839,126.7,53.949,12.19],
    [193.385,133.7,45.815,13.87],
    [219.621,170.1,35.231,14.29],
    [187.725,142.1,33.005,12.62],
    [274.926,210,53.256,11.67],
    [253.139,201.6,36.799,14.74],
    [272.723,192.5,68.243,11.98],
    [193.594,123.2,58.184,12.21],
    [320.746,234.5,75.096,11.15],
    [206.451,149.8,45.241,11.41]
]

Any idea what happened to my charts?


Answers:


I figured out how to fix it:

I had to add another column as the 1st data value which was the Domain (x) value instead of all being Range (y) values.

[0,112.799,93.8,8.099,10.9],
[1,138.78,84,41.93,12.85],
[2,134.466,91,33.026,10.44],

So I added a first column which, for me, is just a counter from 0 to n.

I also changed the javascript to add another column definition for the Domain column.