Archive for the ‘manual’ Category

Chart Capturing feature

Tuesday, February 17th, 2009

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.

Dynamic Chart Feature

Sunday, February 8th, 2009

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.

History Feature

Thursday, February 5th, 2009

Life is changing.

Very often I want to know how something has been changed. For example my weight, oil price, height of my child….

I know, something  was changed, but can’t remember details=)

Now is possible with ChartGizmo to store data and show on charts how something was changed.

This feature has been called “History”.

Lets trying to make a simple chart which can show dependencies between my weight and run time duration.

Firstly you should create History chart using New History button

History button

Configure chart and add titles of valuse.

Creating

Press Save & Add data button in chart editor or Add Data pick on chart list page

Menu add data

Insert your data. You can change date for inserting old data.

Adding data

You can regularly open your History and add new data.

Post you chart as simple ChartGizmo chart.

As result I have:

Perfomance chart

Wednesday, December 3rd, 2008

It’s very useful to have  picture with comparison of different hardware or software performance.

Lets trying to make a simple chart  witch can show god and bad sits of processor Intel core i7.

i7

Lets go to chartgizmo.com and create new chart (If you have no account, create it. Registration is simple and free).

Firstly we configure the view settings (type of chart, title, colours,.. ).

Choose  3D bar chart type.

Write title “Intel Core i7 Performance Analysis in games”

Write Y axis title “Frames per second (Higher is better)”

Set size 250×500.

Choose  Background & Plot colour. It is simple.

Choose Plot orientation:”Horizontally”, Legend:”Show”, Items Labels: “Show”.

design

After all of this we should past the data for the chart.

Using plus buttons add more rows and column.

Write  labels: “Crysis”, “Enemy Territory” and values  for each rows.

Value names and graph colour is  settings of columns. In our example column is information about processor, row is information about game.

You should make something  like this:

data

During editing press Save Chart button and click on the preview area. You will see your fullsize chart.

Save  chart.

Now we can publish the result.

Press  Save & get HTML and choose HTML type.

Copy-past link html tag code to your page.

And get result like this:

Good chart recomendation

Tuesday, July 22nd, 2008

Making good charts and graphs is not rocket science. Actually it’s quite easy, if you remember some basic stuff:

  • Charts and graphs make statistics visible. They show trends —what happened in the past and what might happen in the future.
  • The best charts are simple. When they are simple, they attract attention and deliver information quickly and clearly. They explain numbers. They help readers to understand data.
  • There are only four basic types of chart: fever, bar, pie and table. One of these types will be the appropriate graphic form for almost any numbers you want to display.
  • Fever charts are best used to track the progress (say the price, or the quantity) of an item over a period of time.
  • Bar charts show the relationships between a number of items at one time.
  • Pie charts divide an item into its component parts, or percentages.
  • Tables show the actual numbers, arranged into an orderly form that clarifies their relationships.

What not to do

There has always been a tendency to overdo charts, showing off, dazzling the reader or viewer with the latest devices and effects available. Computer software offers an array of three dimensional effects,

backgrounds, typestyles and icons that often clutter the result and make charts hard to decipher. So:

  • Don’t use the third dimension. Why do you want your chart to jump off the page or screen? I’d rather it stayed there and let me read it!
  • Don’t use a busy background to indicate what the subject of the chart is. A photo of nuts and bolts to show the reader that the chart is about industry? NO! Plain backgrounds allow the information to be seen, and read.
  • Don’t use lots of colors to dress up a chart in an effort to make it look bright. What is this, the tiedyed sixties? Too many colors distract the eye, and confuse the meaning.
  • Don’t use type that’s too small, or too big for the final size of the chart you are preparing. And ornate, decorative fonts have no place in charts.

Nigel Holmes

P.S. You can use this recommendation for creating charts in chartgizmo.com