Chart Capturing feature

On ChartGizmo I have wrote small description:

Capture creates JavaScript allowing to collect the data from Html of your page. To use this feature the source data table should be marked with “CSource” table class and the table columns should be marked with the “CLabels” and “CValues” classes. The table should precede the JavaScript.”

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 Capture type. We can get code like this:

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

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

The main part of this source code is fifth line. It’s contain ‘CSource‘ - name of css class for source table (You can change this name).

6. Create HTML table with data. Mark the table tag using class=”CSource” and td tag of first row by class=”CLabels” and class=”CValues”. It’s possible to have many class=”CValues”

<table class=”CSource” border=”1″ width=”510″>
<caption>Browser competition (2007,2008,2009) </caption>
<tbody>
<tr>
<td class=”CLabels”>IE</td>
<td class=”CValues”>56</td>
<td class=”CValues”>45,7</td>
<td class=”CValues”>44,2</td>
</tr>
<tr>
<td>FireFox</td>
<td>36.3</td>
<td>44,4</td>
<td>45,5</td>
</tr>
<tr>
<td>Safary</td>
<td>1.8</td>
<td>2,7</td>
<td>3</td>
</tr>
<tr>
<td>Chrom</td>
<td>0</td>
<td>0</td>
<td>3,9</td>
</tr>
<tr>
<td>Opera</td>
<td>1,6</td>
<td>2,4</td>
<td>2,3</td>
</tr>
</tbody></table>
</pre>
<table class=”CSource” border=”1″ width=”510″>
<tbody>
<tr>
<td class=”CLabels”>IE</td>
<td class=”CValues”>56</td>
<td class=”CValues”>45,7</td>
<td class=”CValues”>44,2</td>
</tr>
<tr>
<td>FireFox</td>
<td>36.3</td>
<td>44,4</td>
<td>45,5</td>
</tr>
<tr>
<td>Safary</td>
<td>1.8</td>
<td>2,7</td>
<td>3</td>
</tr>
<tr>
<td>Chrom</td>
<td>0</td>
<td>0</td>
<td>3,9</td>
</tr>
<tr>
<td>Opera</td>
<td>1,6</td>
<td>2,4</td>
<td>2,3</td>
</tr>
</tbody></table>

7. Past the chart script after table with data.
Result chart is:

If your page generates dynamic by php, asp or jsp you can generate table 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.