Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dynamically Generated Infographics?

    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

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    That's all done with Flash (it looks like to me).

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlseim View Post
    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

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    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.


    .

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlseim View Post
    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

  • #6
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    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.

  • Users who have thanked mlseim for this post:

    bobd0le (10-14-2011)

  • #7
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlseim View Post
    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

  • #8
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,471
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    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.


    .
    Last edited by mlseim; 10-14-2011 at 07:25 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •