[Chicago-talk] using Google visualization
Joel Limardo
joel.limardo at forwardphase.com
Mon Aug 2 11:58:14 PDT 2010
I 'cheated' and just fed the CSV data directly into the addRows() method. I
converted HTML and Javascript into a template (HTML::Template) and the CSV
file is read in from the filesystem. Here's the template (online example:
http://www.bixchange.com/cgi-bin/bixchange/bixchange.cgi?pom=test-gsapi;iid=0001
):
<html>
<head>
<script type="text/javascript" src="http://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', 'Sales');
data.addRows([
//['2004', 1000, 400],
<TMPL_LOOP NAME="data">
[<TMPL_VAR NAME="Year">,<TMPL_VAR NAME="Fako_Num">],
</TMPL_LOOP>
]);
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {
width: 400,
height: 300,
title: 'Company Performance',
vAxis: {logScale: 'true'},
hAxis: {title: 'Year', titleColor:'#FF0000'}
});
}
</script>
</head>
<body>
<h2>Let's see our data first:</h2>
<TABLE summary="fako data" WIDTH="300px" border="1">
<TMPL_LOOP NAME="data">
<tr>
<td>
<TMPL_VAR NAME="Year">
</td>
<td>
<TMPL_VAR NAME="Fako_Num">
</td>
</tr>
</TMPL_LOOP>
</TABLE>
<!-- the chart goes below -->
<div id="chart_div"></div>
</body>
</html>
I would imagine the JSON example is pretty much the exact same thing except
you just create a separate template to push out JSON and return this back to
a static HTML file pointing to its URL. This is pretty elementary stuff,
however...perhaps I'm missing the problem here...?
On Sat, Jul 31, 2010 at 6:18 PM, Jay Strauss <me at heyjay.com> wrote:
> Hi, I'm double posting (on luni), but since these lists only partially
> overlap, I thought someone here might know (hopefully)
>
> I'm struggling to use a line chart with Google visualization. Its very
> possible I don't have a clue as to what I'm doing. I've been reading docs
> and searching google but cant find why I can't get this to work.
>
> I can get a basic example to work where the data table is populated by
> javascript within the page.
>
> http://luni.heyjay.com:55555/works.html
>
> But I'd like the data to come from the server in the form of a CSV file
> (I'll work on delivering a JSON string for later). Here is the CSV file:
>
> http://luni.heyjay.com:55555/data.csv
>
> and here is the page that's trying to render the graph using the CSV file:
>
> http://luni.heyjay.com:55555/with_csv.html
>
> All of the above links should work, I figured rather than post a bunch of
> source code and make this email huge, you can just "view source" from the
> link
>
> Any help would be very much appreciated.
>
> Thanks
> Jay
> _______________________________________________
> Chicago-talk mailing list
> Chicago-talk at pm.org
> http://mail.pm.org/mailman/listinfo/chicago-talk
>
--
Sincerely,
Joel Limardo
Chief Software Engineer
ForwardPhase Technologies, LLC
401 N. Michigan Avenue
Suite 1200-10
Chicago, IL 60611
www.forwardphase.com
joel.limardo at forwardphase.com
LinkedIn: http://www.linkedin.com/in/joellimardo
Twitter: http://twitter.com/joellimardo
Fax: 815-346-9495
Ph : 877-321-5467
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.pm.org/pipermail/chicago-talk/attachments/20100802/1dc3a496/attachment.html>
More information about the Chicago-talk
mailing list