Dynamic Chart Feature

On ChartGizmo I have wrote small description:

Dynamic creates JavaScript to display the chart based on the
data, provided by the user, i.e. you can modify the existing data
manualy or create your own JavaScript to get or generate data and use
our script to visualize it.”

But what does it mean. Lets make small example.

1. Login or create account at chartgizmo.com (it’s free)

2. Make and configure a chart.  Like this.

design example
3. You can add any example data to the chart. (to view how it looks )

Source example

4. Press Save & Publish button.

5. Select Dynamic type. We can get code like this:

<script src=”http://chartgizmo.com/scripts/client.js?” type=”text/javascript” language=”javascript”></script><script type=”text/javascript” language=”javascript” class=”chartGizmo”>

chartGizmo.chartId = 4433;

chartGizmo.data = {”l”: ["29", "30-34", "35-39", "40-44", "45-49"], “v”: [["5", "42", "35", "13", "5"]]};

chartGizmo.showChart();

</script>

Now we should understand what is it. The answers is simple: it is JavaScript =)

The main part of this source code is third line. It’s contain JSON with all data for the Chart.

chartGizmo.data JS object has two fields: l - labels(vector), v - values(matrix)

We can generate any data and assign to chartGizmo.data.

<script src=”http://chartgizmo.com/scripts/client.js?” type=”text/javascript”></script><script class=”chartGizmo” type=”text/javascript”><!–
chartGizmo.chartId = 4433; chartGizmo.data = new Object(); chartGizmo.data.l=new Array(); chartGizmo.data.v=new Array(); chartGizmo.data.v.push(new Array()); chartGizmo.data.v.push(new Array()); for (var i=0; i<4; i++){     var random=Math.floor(Math.random()*100);     chartGizmo.data.l.push(”Label “+i);     chartGizmo.data.v[0].push(random*3);     chartGizmo.data.v[1].push(random); }  chartGizmo.showChart();
// –></script>

Result chart:

If your page generates dynamic by php, asp or jsp you can make the string with chartGizmo.data using data from your DB during page generation.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

Leave a Reply

You must be logged in to post a comment.