Column graphs suddenly gone wonky
Steve St-Laurent
Here's an example of the code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date/Time');
data.addColumn('number', 'Systolic');
data.addColumn('number', 'Diastolic');
data.addColumn('number', 'Pulse');
data.addRows(10);
data.setValue(0, 0, 'July 3 10:28');
data.setValue(0, 1, 108);
data.setValue(0, 2, 83);
data.setValue(0, 3, 99);
data.setValue(1, 0, 'July 4 10:52');
data.setValue(1, 1, 101);
data.setValue(1, 2, 81);
data.setValue(1, 3, 85);
data.setValue(2, 0, 'July 4 19:57');
data.setValue(2, 1, 104);
data.setValue(2, 2, 79);
data.setValue(2, 3, 101);
data.setValue(3, 0, 'July 5 6:10');
data.setValue(3, 1, 115);
data.setValue(3, 2, 84);
data.setValue(3, 3, 87);
data.setValue(4, 0, 'July 5 20:23');
data.setValue(4, 1, 92);
data.setValue(4, 2, 74);
data.setValue(4, 3, 96);
data.setValue(5, 0, 'July 6 21:50');
data.setValue(5, 1, 110);
data.setValue(5, 2, 85);
data.setValue(5, 3, 79);
data.setValue(6, 0, 'July 7 6:36');
data.setValue(6, 1, 91);
data.setValue(6, 2, 78);
data.setValue(6, 3, 110);
data.setValue(7, 0, 'July 7 22:32');
data.setValue(7, 1, 104);
data.setValue(7, 2, 81);
data.setValue(7, 3, 89);
data.setValue(8, 0, 'July 9 5:35');
data.setValue(8, 1, 120);
data.setValue(8, 2, 87);
data.setValue(8, 3, 76);
data.setValue(9, 0, 'July 9 17:56');
data.setValue(9, 1, 102);
data.setValue(9, 2, 70);
data.setValue(9, 3, 76);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, {width: 800, height: 450, title: 'Blood Pressure', hAxis: {title: 'Date/Time', titleTextStyle: {color: 'blue'}} }); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
And here's how the chart now renders: http://holecomm.ca/googlechartproblem.jpg
Any insights?
-------------
Steve St-Laurent | <st...@holecomm.ca>
Vancouver, BC
Viz Kid
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
Steve St-Laurent
Thanks for that info, Viz Kid. At least I know I'm not losing my mind. So scary when something that has worked flawlessly suddenly stops working.
My primary test browser is Safari 5.0.5 on the Mac. At your suggestion checked it in Firefox where it renders OK. So it would seem that something in your latest release doesn't play well with Safari's JS implementation.
Anything I can do in my page calculation to work around this?
> We have submitted a new release yesterday and this can be the cause of the sudden change. However, we tried your example on a few different browsers and were unable to get the outcome you see in the attached image. Can you share some more information regarding which environment you are using that reproduces this bug? Can you also try more than one browser to see if this happens to you elsewhere?
-------------
Viz Kid
minValue property inside the vAxis object in the options (see here: http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options). I hope that this helps to some extent.Steve St-Laurent
Thanks again, Viz. Now I need to learn how to code this. I tried various combinations of:
"var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 450, title: 'Blood Pressure',
hAxis: {title: 'Date/Time', titleTextStyle: {color: 'blue'}}
vAxis: {minValue: {'0'}}
});
}
. . . to no avail. Do you sniff JHS newbie?
> This seems to be a problem with Safari and iOS browsers that we weren't aware of - we will see what we can do on our end.
> In the meanwhile, for this specific problem, you might be able to work around it by specifying to the chart that the minimum value on the vertical axis would be 0. This can be done by setting the minValue property inside the vAxis object in the options (see here: http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options). I hope that this helps to some extent.
-------------
Matthew Wells
or in your case
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 450, title: 'Blood
Pressure',
hAxis: {title: 'Date/Time', titleTextStyle:
vAxis: {minValue: 0}
});
On Jul 13, 1:35 pm, Steve St-Laurent <st...@holecomm.ca> wrote:
> Thanks again, Viz. Now I need to learn how to code this. I tried various combinations of:
>
> "var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
> chart.draw(data, {width: 800, height: 450, title: 'Blood Pressure',
> hAxis: {title: 'Date/Time', titleTextStyle: {color: 'blue'}}
> vAxis: {minValue: {'0'}}
> });
> }
>
> . . . to no avail. Do you sniff JHS newbie?
>
> > This seems to be a problem with Safari and iOS browsers that we weren't aware of - we will see what we can do on our end.
Steve St-Laurent
Perfect. Thanks, Matthew!
> try vAxis: {minValue: 0 }
> or in your case
>
> var chart = new
> google.visualization.ColumnChart(document.getElementById('chart_div'));
> chart.draw(data, {width: 800, height: 450, title: 'Blood
> Pressure',
> hAxis: {title: 'Date/Time', titleTextStyle:
> {color: 'blue'}},
> vAxis: {minValue: 0}
> });
> }
>
> On Jul 13, 1:35 pm, Steve St-Laurent <st...@holecomm.ca> wrote:
>> Thanks again, Viz. Now I need to learn how to code this. I tried various combinations of:
>>
>> "var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
>> chart.draw(data, {width: 800, height: 450, title: 'Blood Pressure',
>> hAxis: {title: 'Date/Time', titleTextStyle: {color: 'blue'}}
>> vAxis: {minValue: {'0'}}
>> });
>> }
>>
>> . . . to no avail. Do you sniff JHS newbie?
-------------
Steve St-Laurent | <st...@holecomm.ca>
Hole-in-the-Wall Communications | Vancouver BC | 604 251 0700
bodybus.ca | tools to manage your health
cam luc
I use hAxis: {minValue: 0 } instead.
Thanks.
