d3 simpleCharts contains support of JavaScript API together with its function simpleChart().

This is a naked graph engine: the goal is here not to generate UI of interactive selectable charts with buttons like on PHP's shortcode side but just a basic plain SVG chart.

At the moment of writing (>= ver. 1.3.0) it supports all options of PHP side simpleChart shortcode.

You can call this two ways:

• By writing a few lines of HTML on your WordPress blog's page / post.
• By calling the function as a front-end of your own JavaScript calculations in order to show nice dynamic chart(s) in SVG format that can update themselves when the user visits there later.

It is a very good approach to build small fast chart(s) which can be included among the text / block elements on WP pages, for example.

By using JS function you can also solve WordPress shortcode layout's problem elegantly: chart's container can be generated on the fly in JS by calling this function and there is no need to manually write in any top level chart's container (eq <div>, <span>, etc). Obviously, this is speeding up the upload time of chart(s) much to user too: when using WP shortcode's it must to wait until browser's DOM is fully composed (+other shortcodes executed before) but this JavaScript function does not need to wait since it knows its own container name & place locally and can go ahead to draw the chart inside it instantly.

This JS function is straigtforward to use if you are a programmer and know basics how to define JSON data structure.

simpleChart(data,noplaceholder)

where:

• data - JSON object record for all input data & options of chart. To generate any chart you need to define at least labels and values fields. All others are optional.
• noplaceholder - boolean (0/1) switch that you can set on if you still wish to define your own HTML place holder of chart manually. This is handy in some complex JavaScript calling environments (AJAX, etc) in which composing of chart fails otherwise.

• <script>
• var data = new Object({ "labels":["Jaguar","Porsche"], "values":[100,170] });
• simpleChart(data);
• </script>

Minimum call from JS API can contain only data's labels and values like here. Be carefull not leave any extra empty lines since WordPress adds something illegal to execute automatically.

• var data = new Object({ "labels":["Ferrari","Jaguar","Porsche"], "values":[290,200,270] });
• data["title"] = "Top Speed Cars";
• data["startbar"] = "red";
• data["endbar"] = "navy";
• simpleChart(data);

Your cars colors are sliding from red to navy smoothly here. All the named d3 simpleCharts options can be called in similar style of expanding data (like: title, startbar, and endbar).

• var data = new Object({ "labels":["Ferrari","Porsche"], "values":[200,270], "colors":["red","white"] });
• simpleChart(data);

This draws you red Ferrari and white Porsche - only on the display, unfortunately. Here is another possible way to expand data input, also.

• var cars = new Object();
• cars.labels = new Array();
• cars.values = new Array();
• for (i=1; i<4; i++) { cars.labels.push("Car nro "+i); cars.values.push(i*10); }
• cars.xtitle = "Amounts of Cars on the Club";
• cars.chartid = "myholder777";
• document.write('<DIV ID="'+cars.chartid+'"></DIV>');
• cars.uniq = cars.chartid;
• simpleChart(cars,1);

Here you calculate amounts (of cars) in loop and title them in chart by using title option.

Also, boolean bit of "no place holder generated" is set that means you have to tell holder's ID to the simpleChart() function by setting those input fields manually (chartid & uniq) into the cars input array before its actual call.