Short tutorial into Wp-D3 v2

This demo chart contains the stock and Bollinger Bands (red) of Ford stocks (blue) between 1-Feb-2013 and 31-Jan-2014.

The new version of Wp-D3 came with a whole user interface that provides a cleaner way of adding D3 code in your posts without mixing the code and the post's content.

This post contains the steps necessary to add the content and moving around the new Wp-D3 interface.

After the success of the previous tutorial page, I've decided to write a new one with the plugin's new features. Get ready!.

1. Adding the code to the Wp-D3 Chart Manager

Open the Wp-D3 Chart Manager by clicking the Wp-D3 icon in the toolbar

The content used for this chart is contained here. Notice two important lines:

  • Line 30:  d3.select() function with the chart Id. This matches the Id that appears at the tab of the editor where the code is saved. In this example is ".wpd3-954-0" because thats the Id that appears in the editor (of course this may vary depending on the way you attach your code to the DOM).
Wp-D3 tab with the ID highlighted

Wp-D3 tab with the ID highlighted

  • Line 36: d3.csv()  function with the link to the file containing the csv data (it must be local so you have to upload the file first through 'Add Media' and then paste the URL into the code.

2.  Adding extra resources

It is not uncommon to use .css files defining the charts style or to add extra libraries with specific functionality. This example requires:

  • a .css file defining the line colors, uploaded here.
  • an extra .js files, trendyways library, containing the Bollinger Bands function. uploaded here.

Both of them must be placed in your blog, either uploading them by hand or  through 'Add Media' . Then the URL must be copied 'as-is' into the 'Include'  dialog inside the Wp-D3 Chart Manager.

Include dialog containing .css and .js dependencies

Include dialog containing .css and .js dependencies

Dont forget to press 'Save' after adding the resources.

3. Adding the char to the post content

Click on  'Insert' to add a reference to the chart in the post. A new shortcode (brackets-delimited) containing the chart Id will be added to the post. The position of this reference sets where the chart will be rendered.

That's it!. Once you have followed this steps the chart should be rendered without errors.

As usual, for any question or issue feel free to comment it in the Wp-D3 Support Forum.

Enjoy!.