Dynamically Generated Infographics?

[bobd0le]

Hi all,

I've just been thinking about infographics recently, and the need for visualization of data - more and more websites are coming to use them, and i'd like to use them too.


However, i dont really know where to start - what languages are they coded in?
I've got some basic web experience, so i know that the actual numbers would be pulled from the database usually using MySQL - but what are they using to actually dynamically draw the infographics?


E.g. if they've got a chart - how do they fill it up by a certain amount?

Or what if its another less standard object - e.g. on here - http://nigmanoname.com/prodex - Once it loads, if you click a hero, its got a chart in the top left thats generated for its skill level in different aspects of the game - is there a way to do that on a webpage dynamically?

Say you had - subjects for a pupil (so, english / maths / history / physics / chemistry / biology / computing) - could you have a chart like that generated dynamically from their "subject level" in a database?



Sorry if all of this is confusing / sorry if its in the wrong section, i really had no idea where to post this

But, thanks in advance!

Regards,
bobd0le

[mlseim]

That's all done with Flash (it looks like to me).

[bobd0le]

Originally Posted by mlseim

That's all done with Flash (it looks like to me).

Ja i know, but that doesnt look dynamically generated (the chart) - its just a picture - im wondering if there's a way to dynamically generate it

[mlseim]

I'm guessing they use an XML file.
Flash can read those and dynamically create anything.

An XML file is just a structured file that uses tags to organize data
in a known format. The format always remains the same, but the data changes.

A PHP script can rewrite the XML file with new or modified data at any time.
The Flash script just reads whatever is there.

If you don't know Flash, or you don't want your site done in Flash, you can
also use Google Charts: http://code.google.com/apis/chart/in...s/gallery.html

Google charts uses a lot of javascripting, but it can be integrated with PHP also.

Give us a list of data, and what type of chart you would like.
Example, a list of classes you have with a "level" value assigned to them.

I'll make an actual working example for you using Google Charts.


.

[bobd0le]

Originally Posted by mlseim

I'm guessing they use an XML file.
Flash can read those and dynamically create anything.

An XML file is just a structured file that uses tags to organize data
in a known format. The format always remains the same, but the data changes.

A PHP script can rewrite the XML file with new or modified data at any time.
The Flash script just reads whatever is there.

If you don't know Flash, or you don't want your site done in Flash, you can
also use Google Charts: http://code.google.com/apis/chart/in...s/gallery.html

Google charts uses a lot of javascripting, but it can be integrated with PHP also.

Give us a list of data, and what type of chart you would like.
Example, a list of classes you have with a "level" value assigned to them.

I'll make an actual working example for you using Google Charts.


.

Alrighty then -

Lets say that im the pupil, these are my classes and levels -

Maths - 7
History - 4
Geography - 6
Computing - 8
Biology - 5
Physics - 8
Chemistry - 6
Economics - 7
Languages - 3

[mlseim]

I just whipped this one up, using the Google Chart Wizard ...

http://www.catpin.com/chart.php

I thought that chart comparing class levels looked sort of cool.

[bobd0le]

Originally Posted by mlseim

I just whipped this one up, using the Google Chart Wizard ...

http://www.catpin.com/chart.php

I thought that chart comparing class levels looked sort of cool.

That is awesome!

But, how did you do it

[mlseim]

I used the wizard to create one chart.
Once you get the basic scripting for one chart, it can be used over
and over again, but switch-out the data.

Let's walk through an example:
Play along ...

Now let's use the Wizard
=======================================

1) Go to this URL:
http://code.google.com/apis/chart/im...rt_wizard.html

2) Let's pick a pie chart.

3) On the editor, open various options and make changes.

4) See your changes on the chart, and note the <embed in website> coding it gives you.
That's what you copy and paste into your website.

5) Note the orange section that lists the current values of the parameters.
When you embed into your site, you can use PHP to change those values.
Try changing some ... add more pieces to the pie.

If you go to my example:
http://www.catpin.com/chart.php

And view my HTML source using your browser, you'll see what I did.
I copied the same script, but changed the value and label for each one.


It gets way more involved without the wizard. There are javascripting,
API's and other methods for using Google charts.

Example of trying out charts without the Wizard ...
========================================
1) Go to this URL:
http://code.google.com/apis/chart/

2) Click "Get Started".

3) On the left side of page, scroll down to :
Examples and Tools
-- Playground

Click Playground.

4) Now you can pick a chart on the left, change some things on the right,
and see the chart at the bottom. The scripting on the right shows the code.


.