Advanced examples

mrBigJS edited this page Jun 20, 2013 · 23 revisions

By using the listed options of shortcode you have choice to tailor the outlook of new chart further.

Gradient coloring of data bars

Gradient colors (eq green->red or blue->red etc) can be effective way to underline the real story with your app's data. It is fast and easy to do when you include startbar and endbar arguments to the call, like below.

Gradient colors are supported in all generated chart types, except 'Line'.

mtitle='All Pets in Home'
xtitle="Races" ytitle="Pcs in Wild Farm"
labels="(Scorpions,Spiders,Frogs, Birds,Dogs,Cats)"
width="450" height="150"
title="Real dangerous home!"
moredata="Growth of species"
startbar="navy" endbar="gold"

This is printing out columns of which bars are smoothly changing from navy to gold color, for example.

It is (default) Columns because chart argument was left out. If you like to have it compared in pie chart you just add there chart='Pie' argument.

Note: it does not matter in which order do you like to list all those fancy simpleChart shortcode's options.

Opening chart directy for SVG editor or saving it

Starting from the version 1.3.6 simpleCharts supports exporting of its generated SVG charts from the WordPress page as it is showing out when you use its exportsvg option.

You can easily activate this export of chart(s) by setting the option exportsvg='1'when you call and draw new charts (by shortcode / JS API). After this a new button for downloading the chart's full svg presentation appears to the bottom of the chart normally.

When user press the button downloadable file is created (*.svg) that is automatically opened by your browser to the application in which you have associated SVG file type locally.

You might like to give a try for a free good SVG editor like Inkscape to open the charts for editing, for example.

By default, this option is set to be '0' since we assume that most of the users would like to keep the graphics as their own dedicated property of blogs.

Guidelines of using CSS styles

This open software gives you two ways to control the final appearance of generated charts: via option of WordPress shortcode (eq css={...} JSON argument) and by the standard CSS file (d3chart.css = default file) from its plugin folder.

The choice of use between two different ways is simple based on your target of visualization needs:

  • External CSS file gives you uniform appearence of all generated charts for the all WordPress Pages & Posts where you decide to embed new charts. You are welcome to edit an included example CSS style file just to make it fit your general mood and style of blogs. [You can name your tailored own style file] ( by using cssfile option, too. However, you could start to modify and test default style file's CSS effects at first and just forget cssfile usage.
  • [ShortCode's recognized CSS option] ( css becomes handy when you need to customize a single chart for the special purposes of page/post. For example, you might want to remove default frames of chart and make its background match the post's background color sometimes, etc.

Using external data files

External input data files are supported in simpleCharts shortcode by feeding its shortcode's option: datafile.

There are some basic examples of input files located at the folder 'data' of plugin from which you can find the structure of files for the supported data formats (eq csv, tsv, etc).

The most simple way to call and start to test them is here:

  • [simpleCharts datafile="wp-content/plugins/d3-simpleCharts/data/animals.tsv"]

Next, you would like to study 2 x 2 matrix data's input by calling this example:

  • [simpleCharts datafile="wp-content/plugins/d3-simpleCharts/data/animals_2x2.tsv" row="2"]

This call is reading in all the rows of 2 x 2 data input from data's folder and selecting into the chart the 2nd row of data points. This row is bold here below:

date Scorpions Spiders Frogs Birds Dogs Cats

2/2013 4 12 7 5 3 2

3/2013 5 17 4 5 3 2

4/2013 6 25 1 5 3 2

Chart's labels are always picked up from the 1st line of input file.

By calling 2 x 2 matrix you also automatically activate 'More data' data popup selector menu for the chart. It is labelling each row of data based on the values of first column of data. The separator is tab in *.tsv and comma in *.csv files.

Rather neutral menu's default title 'More data' [can be renamed] ( by using option moredata.

If you store into data file time series then it is usefull to call row='last' or row='first' option.