Google Line Chart is freaking out, drawing in random angles

Question

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?

Google introduced a few changes yesterday, which weren't backward compatible, breaking charts across the web. The issues I've seen were caused by changes to data types. But as @DaveNewton said, it would be impossible to help without seeing your code. — Tal Ater
@DaveNewton, I imagined that it probably was some Google-side change that broke the code, but I also know how people on StackOverflow think. If I started with the code, I know most would look past the fact that it was working and nothing on my end changed. As zzzrByte mentioned, Google pushed changes to the api yesterday. That explains the source of the problem. I was hoping someone would be able to point me to a page that described what Google changed (I haven't been able to find it). — Kenny Wyland

Kenny Wyland Kenny Wyland · Accepted Answer · 2012-01-21T18:08:39

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.

Google Line Chart is freaking out, drawing in random angles

2 Answers