Custom Charts Examples

There are five chart types you can choose from. Enclose a plain html table with the schart shortcode to bild the chart. The table may look like this:

<table class="test-table">
 <tbody>
 <tr>
 <td></td>
 <td>January</td>
 <td>February</td>
 <td>March</td>
 <td>April</td>
 <td>May</td>
 </tr>
 <tr>
 <td>Income</td>
 <td class="right">55</td>
 <td class="right">65</td>
 <td class="right">72</td>
 <td class="right">81</td>
 <td class="right">69</td>
 </tr>
 <tr>
 <td>Gross</td>
 <td>22</td>
 <td>4</td>
 <td>16</td>
 <td>23</td>
 <td>16</td>
 </tr>
 <tr>
 <td>Tax</td>
 <td>23.7</td>
 <td>21.4</td>
 <td>27.7</td>
 <td>29.7</td>
 <td>31.2</td>
 </tr> 
 </tbody>
</table>
January February March April May
Income 55 65 72 81 69
Gross 22 4 16 23 16
Tax 23.7 21.4 27.7 29.7 31.2

facebook share    

Next example has the option show_table=”0″ so that the table is hidden.
facebook share    

This table is copied from wikipedia. Shortcode attribs are slightly different because there are formatted numbers.
[* schart type=”line” show_table=”1″ thousands=”,” decimal=”.” *]

World historical and predicted populations (in millions)
Region 1500 1600 1700 1750 1800 1850 1900 1950 1999 2008 2010 2012 2050 2150
World 458 580 682 791 978 1,262 1,650 2,521 5,978 6,707 6,896 7,052 9,725 9,746
Africa 86 114 106 106 107 111 133 221 767 973 1,022 1,052 2,478 2,308
Asia 243 339 436 502 635 809 947 1,402 3,634 4,054 4,164 4,250 5,267 5,561
Europe 84 111 125 163 203 276 408 547 729 732 738 740 734 517
Latin America 39 10 10 16 24 38 74 167 511 577 590 603 784 912
North America 3 3 2 2 7 26 82 172 307 337 345 351 433 398
Oceania 3 3 3 2 2 2 6 13 30 34 37 38 57 51

facebook share    

Pie and doughnut charts can display only one data row. SCalc takes the first on per default.

January February March April May
Income 55 65 72 81 69
Gross 22 4 16 23 16
Tax 23.7 21.4 27.7 29.7 31.2

facebook share    

Last but not least the radar chart;

January February March April May
Income 55 65 72 81 69
Gross 22 4 16 23 16
Tax 23.7 21.4 27.7 29.7 31.2

facebook share    

SCalc Calculator Shortcodes

Basically there are three possibilities:

[* scalc type=”hourlyRate” *]

[* scalc type=”investment” *]

[* scalc type=”annuity” *]

All basic settings and colors are made by the SCalc settings in the Settings panel. You will have two more options:

type: as shown above
height: pixel or percent numeric (i.e. “100%” or “300” for 300 px) (optional)
width: same as height

Be careful with width and height: Since charts are responsive, adjustment of width and / or height may lead to unwanted results.

SCalc Installation and Settings

SCALC AND SK-LIBRARY INSTALLATION

The download archive contains to plugins: SCalc and sk-library.
You must install both within the wordpress plugin panel. Activate first sk-library and then SCalc.

If you already have installed sk-library in version 1.3 you can omit this installation.

SCalc contains an update checker so that you will be informed about plugin or library updates.

SCalc Settings

You will find a new menu in the Settings panel: SCalc. It consists of two main sections:

Colors

You can choose colors for 6 datasets that will be used in calculators or custom charts. After changing a color you will see the result in the live chart preview.

Basic Settings

At first you can add here your facebook app id. Only with this id the share buttons will appear and can work. SCalc uses the facebook javascript library to share content. Second entry is the email subject for mails that are sent when visitor clicks the email button below the charts.

Next item is the container class. You can add here a class which will be added to the most outer chart container. This will give you more control for styling.

All other settings should be self explanatory.