[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