line chart gridlines

2,308 views

Skip to first unread message

Anthony

unread,

Oct 13, 2011, 2:52:33 PM10/13/11

to Google Visualization API

There's been a lot of posts about line charts and grid lines. So far
I've not been able to get colors, backgrounds or grid lines to
work...in fact if I change anything as far as options are concerned,
the entire chart fails to appear on my page....

The generic code works fine but I would like to modify some of the
elements mentioned above.

Any help and examples appreciated. My code follows.
-----------------------------start code
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<%
Set oConn = Server.CreateObject("ADODB.Connection")
set rs = Server.CreateObject("ADODB.Recordset")

oConn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\domains
\dev.constructionworkzone.com\files\databases
\onlinecomodities.mdb;User ID=;Password=;"

rs.open "Select * From CurrentData Where [series_id] = 'WPU051' Order
by [year], [period];", oConn, 3, 2
if rs.recordcount > 0 then
rs.movefirst %>

<div id="chart_div"></div>
<div style="margin-left: 200px; margin-top: 300px">
<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', 'Year');
data.addColumn('number', 'Coal');
<%

aCntr = 0 'array index counter
%>
data.addRows(<%= rs.recordcount + 1 %>);

<% do while not rs.eof %>

data.setValue(<%= aCntr %>, 0, '<%= rs("year") & "/" &
mid(rs("period"),2,2) %>');
data.setValue(<%= aCntr %>, 1, <%= rs("value") %>);

<%
aCntr = aCntr + 1
rs.movenext
loop
%>
var options = {cht: 'ls'};

var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 970, height: 540, title: 'Commodities'});
}
</script>
</div>
<% end if %>
</body>
</html>
-----------------------------end code

I've tried putting configuration options in this line....
chart.draw(data, {width: 970, height: 540, title: 'Commodities'});
...without success.

How can I change the colors of the chart elements both back and fore
ground, how can I change the color of the line in the graph and how
can I make vertical grid lines appear on the chart?

You can see the chart at the following address..

http://dev.constructionworkzone.com/cmod/gchart2.asp

Thanks in advance..

Anthony Jaxon
Los Angeles, CA USA

asgallant

unread,

Oct 14, 2011, 10:00:41 AM10/14/11

to google-visua...@googlegroups.com

The 'backgroundColor' option controls the background settings (border, border width, and fill); 'colors' controls the colors of the elements (array of colors, assigned by series [DataTable column]); 'vAxis.gridlineColor' controls the color of the horizontal gridlines (use 'hAxis' instead for charts with vertical gridlines). There is no API support for adding vertical lines to Line Charts (or any other chart that normally has horizontal gridlines; vice versa for charts that normally have vertical gridlines). To use the options, do something like this:

chart.draw(data, {
width: 970,
height: 540,

  title: 'Commodities',
  backgroundColor: {
  stroke: '#FF0000',
  strokeWidth: 5,
  fill: '#00FF00'
  },
  colors: [
  '#0000FF'
  ],
  vAxis: {
  gridlineColor: '#FFFF00'
  }
});

Note that my arbitrarily selected colors produce a horrible color scheme, please don't use them >;o)

Reply all

Reply to author

Forward

0 new messages