Using Google or Yahoo charts with Squiz

cokefour · 2011-10-20 09:20:43 UTC

Hi,
Does anyone know or have an example of using Google or Yahoo charts with Squiz data records?

Cheers,

Clement

Dan_Simmons · 2011-10-20 12:20:08 UTC

I've done some prototyping of this with Google Charts for an internal project. Unfortunately I can't share the page because it's not publicly accessible. The idea is fairly straightforward, but does involve some trickery to construct the URL.

I used a DB Data Source and three asset listings (all looking at the same Data Source):

To list the X points
To list the Y points and
To list the X point labels

I then had to nest these assets into a page to carefully construct the URL for the img src. Originally I spanned the construction of the URL across multiple DIVs, but these days you should be able to nest in the asset listings using the %globals_asset_contents:XXX% keyword (if you're on a recent version of Matrix) — which would look a lot cleaner.

I ended up with a URL on the frontend looking like this:

    
    http://chart.apis.google.com/chart?chs=600x300&cht=lxy&chco=3072F3&chds=1,14,0,100&chd=t:1,2,3,4,5,6,7,8,9,10,11,12,13,14|54.312972222222,162.832520576132,147.238722222222,76.737025089606,81.433785714286,47.271574074074,38.644265873016,34.617042042042,39.589057539683,34.545303617571,22.812537037037,44.469953703704,21.627246376811,2.131751207729&chxl=0:|29|30|31|32|33|34|35|36|37|38|39|40|41|42|1:|Week+of+the+year&chxp=1,2,3,4,5,6,7,8,9,10,11,12,13,14|1,1&chxt=x,x&chxr=|1,0,2&chdl=Response+time

When nested into the src attribute of an img tag, you get a nice looking graph in your page!

cokefour · 2011-10-20 14:54:00 UTC

[quote]
I've done some prototyping of this with Google Charts for an internal project. Unfortunately I can't share the page because it's not publicly accessible. The idea is fairly straightforward, but does involve some trickery to construct the URL.

I used a DB Data Source and three asset listings (all looking at the same Data Source):

To list the X points
To list the Y points and
To list the X point labels

I then had to nest these assets into a page to carefully construct the URL for the img src. Originally I spanned the construction of the URL across multiple DIVs, but these days you should be able to nest in the asset listings using the %globals_asset_contents:XXX% keyword (if you're on a recent version of Matrix) — which would look a lot cleaner.

I ended up with a URL on the frontend looking like this:

    
    http://chart.apis.google.com/chart?chs=600x300&cht=lxy&chco=3072F3&chds=1,14,0,100&chd=t:1,2,3,4,5,6,7,8,9,10,11,12,13,14|54.312972222222,162.832520576132,147.238722222222,76.737025089606,81.433785714286,47.271574074074,38.644265873016,34.617042042042,39.589057539683,34.545303617571,22.812537037037,44.469953703704,21.627246376811,2.131751207729&chxl=0:|29|30|31|32|33|34|35|36|37|38|39|40|41|42|1:|Week+of+the+year&chxp=1,2,3,4,5,6,7,8,9,10,11,12,13,14|1,1&chxt=x,x&chxr=|1,0,2&chdl=Response+time

When nested into the src attribute of an img tag, you get a nice looking graph in your page!
[/quote]
Thanks, I'll start with that. I wanted to use a url to the datasource as specced in google's notes but the datasource doesn't have one.
Clement

Dan_Simmons · 2011-10-20 15:03:13 UTC

[quote]
I wanted to use a url to the datasource as specced in google's notes

[/quote]

I don't quite understand. Do you have a link to the documentation that shows an example of this?

A Data Source doesn't have a URL because it doesn't print anything by default. If you want to print something, create an asset listing instead and then output the data in whatever way you want.