d3-simpleCharts is a plugin for the world's most famous WordPress CMS to show accurate and pretty charts inside your blogs.

We open this world of fancy charting to the WordPress by applying very well supported d3 - data driven documents library for all those possible fast vector based graphs on web.

Here is your open expanding documentation about how to call and draw new charts on every page / post of wordpress blog.

There is also JavaScript API if you need a very dynamic (+ much faster!) solution for drawing charts on browser (or you just need a bare chart with its basic HTML5).

We hope that you enjoy it and join in to develope this work further here on GitHub society !

• Some basic charting examples
• Advanced charting examples
• CSS Styles for All Charts

• maintitle or mtitle - major title of chart, default: ''
• popuptitle or title - custom popup title for the chart, default: ''
• caption - caption text below a chart, default: ''
• xtitle - labels of x-axis, default: ''
• ytitle - values of y-axis, default: ''
• url - link to an external web page linked to this chart's subject, default: ''

---

• values - data values of chart, default: ''
• labels - labels of eachh data value on chart, default: ''
• xrotate - rotating label texts on X-axis of Columns chart, default: 0 (degrees)

---

• moredata - custom name of button for a data series coming from external file, default: 'More Data'
• moredatatitle - custom popup title of more data button, default: 'Extend to other data sets'
• datafile - the path to external data file, default: ''
• row - the first row of data to show for 2x2 matrix values from external input file, default: 1
• maxseries - count of rows (/columns) to show from the end of data set and its external input file, default: 0

---

• format - how to format numerical values on axes, default: '+00.02'
• ticks - distance of ticks for major values inside chart, default: 10

---

• minrange - constant minimum from which to start numerical axis, default: 0
• maxrange - constant maximum value of numerical axis, default: ''
• chart - type of basic chart at 1st, default: 'Columns'

• chartid - optional ID name for your own container of chart (<div> or <span>) on WordPress page, default: ''

• sort - sorts data points on chart in ascending ('123'), descending ('321'), or labels ('label') order, default: '' (no sorts)
• notooltips - removes tooltips bubbles from charts that are visible by default, default: '0'

• logo - adds your own logo on chart, default: ''
• logopos - position of logo, default: 'bottom'

---

• height - how tall is output chart, default: 480
• width - how wide is output chart, default: 640
• margin - how much margins to leave around chart, default: '{"top": 20, "right": 20, "bottom": 30, "left": 70}'

---

• colors - set own fixed colors for chart's segments & bars, default: ''

---

• startbar - HTML starting color for smooth gradient of bar of chart, default: ''
• endbar - HTML ending color for smooth gradient of bar of chart, default: ''
• gradient - forcing smooth gradient coloring to take its place by using real value of data points (instead of labels), default: 'label'

---

• cssfile - external style file for a chart.
• mstyle - vertical layout position of major title, default: ''
• backstyle - background's style (in CSS) for whole chart, default: ''
• css - styles of chart elements (from CSS & d3).

• noswitcher - remove chart switcher, default: 0.
• noseries - remove more data pop-up list, default: 0.
• nodatamover - remove popup data mover button from appearing, default: 0.
• noexport - remove all export buttons, default: 0.
• exportsvg - allowing export button of SVG chart to open & save a chart to appear, default: 0.
• noembed - remove chart's embed link, default: 0.
• notimeslider - remove visual time slider from 2x2 data set, default: 0.

• jquery - forces jQuery lib to be included from cloud, default: '0'
• cdn - forces the load of d3 from global CDN network, default: '0'
• nominimisation - turns off minimisation of JavaScript, default: 0

---

• Call from shortcode: maintitle='My Chart' or mtitle='My Chart'
• Default value is empty string: ''
• Description: labels whole chart and gives it the main name.

• Call from shortcode: popuptitle='Click this chart & find more!' or title='Click this chart & find more!'
• Default value is empty string: ''
• Description: feeds in the popup text that shows up when cursor moves over the chart.

• Call from shortcode: caption='My chart of Pets Growing'
• Default value: ''
• Description: labels chart below with its longer caption text.

• Call from shortcode: values='(77,7,1)'
• Default value is empty string: ''
• Description: feeds in data values (float/integer) in a vector.

• Call from shortcode: labels='(Best,Better,Normal)'
• Default value is empty string: ''
• Description: feeds in data labels for each bar in a vector.

• Call from shortcode: xrotate=-33
• Default value: 0
• Description: rotates all text labels with Columns chart: negative value means counter-clock wise turning. This is usefull option when you have some long text labels together with a small chart's width.

• Call from shortcode: xtitle='My labels subtitle'
• Default value is: ''
• Description: writes down the title of data's labels next to X-axis.

• Call from shortcode: ytitle='My values subtitle'
• Default value is: ''
• Description: writes down the title of data's labels next to Y-axis.

• Call from shortcode: datafile='animals.json'
• Default value is empty string: '1'
• Description: defines external path to the data input file. If no path is given (eq no '/' in name) this file needs to be located inside the root folder of WordPress blog. Format of data input is recognized based on these filename's extensions: '.csv', '.tsv', or '.json'

• Call from shortcode: row='7' or row='last'
• Default value is string: ''
• Description: picks up the certain numbered row of data values for the chart. Input data file is supposed to include title labels (eq .tsv & .csv formats) at the first row of file. After this, real data value lines are counted starting from 2nd line. Keywords 'firs' and 'last' are recognized and usefull for you when you refer to time series and need to have the latest recorded values always as the 1st appearing chart. Tested format of data file can be these famous from Excel: '.csv' or '.tsv'

• Call from shortcode: maxseries=10
• Default value: 0
• Description: limits output of rows from the end of input file that shows out on the chart. This is usefull option if you have a cumulative time series on server and you want to limit the amount of data to the latest rows (/columns) only.

• Call from shortcode: ytitle='My values title'
• Default value is: '+00.02'
• Description: defines how to format numerical values when printed on the chart.

• Call from shortcode: ticks=5
• Default value is: 10
• Description: activates the drawing of tick lines inside chart types that can support it (ex. 'Columns').

• Call from shortcode: minrange=1.5
• Default value is: 0
• Description: sets the minimum value from which y-axis data points are started to plot visible on chart.

• Call from shortcode: maxrange='7.77
• Default value is: ''
• Description: sets the maximum value of y-axis to the plot visible on chart's plot. This clarifies your chart presentation especially when user moves from chart type to another by using swither's buttons: background of data points are then staying in fixed positions. (Note: 'Columns' type is not yet supported)

• constant minimum from which to start numerical axis, default: 0

• Call from shortcode: moredata='My series of big data'
• Default value is: 'More Data'
• Description: sets the custom title for data sets. This should be given if your data is coming from external file and it is 2x2 matrix in which each row is showing up as a separate selectable chart.

• Call from shortcode: moredatatitle='Look at the history of my pets by clicking here!'
• Default value is: 'Extend to other data sets'
• Description: when cursor moves over more data button this is the popup text that shows for the user.

• Call from shortcode: url='http://more_chart_info.com'
• Default value is: ''
• Description: attach URL link to the chart that could tell more about this chart & its story when user clicks it.

• Call from shortcode: chart='Pie'
• Default value is: 'Columns'
• Description: sets the type of printed chart. The chart types that recognized now are: 'Area', 'Bars', 'Columns', 'Line', and 'Pie'.

---

• Call from shortcode: sort='123' or sort='abc' or sort='label'
• Default value is: ''
• Description: sorts the data points dynamically on chart. Two choices are: '123' (or 'abc') and '321' (or 'cba') for ascending & descending orders of values - obviously. Additionally, you can force bars of chart to appear aplhabetically ordered by labels ('label'). All chart types are supporting sorts on the same way.

---

• Call from shortcode: logo='mybrand.png'
• Default value is: ''
• Description: Adds branding to the chart by including your company / service / product logo file inside chart. If the value is only file name it needs to be on your blog's root folder or you can ass well include whole url (eqlogo='http://myownblog.net/wp-content/uploads/2013/01/mybrand.png', a pretty typical path on WP).

• Call from shortcode: logopos='top'
• Default value is: 'bottom'
• Description: Set the location of branding logo. Without setting the logo is placed at the right-bottom corner of chart.

---

• Call from shortcode: height=700
• Default value is: 480
• Description: sets the height of chart visually on the page in pixels.

• Call from shortcode: width=1024
• Default value is: 640
• Description: sets the width of chart visually on the page in pixels.

---

• Call from shortcode: chartid="777"
• Default value is: 0
• Description: by giving your own chart's ID number you can have your own container of generated chart whereever you need. If you set this shortcode active when calling simpleChart you need to define manually the container element (usually <div> or <span>) on that WordPress post/page beforehand. The example for this option could be html on page: <div id="777"></div> and after this you can safely call [simpleCharts ... chartid="777"] to make your brand-new generated chart appear inside it.

An example

<HTML><BODY> <H1>SPORT CARS SPEEDS</H1> <DIV ID="777"></DIV> [simleChart chartid="777" labels='(Ferrari, Jaguar, Porsche)' values='(250,230,270)'] </BODY></HTML>

• Call from shortcode: margin='{"top": 40, "right": 30, "bottom": 50, "left": 90}'
• Default value is: '{"top": 20, "right": 20, "bottom": 30, "left": 70}'
• Description: set margins that is left between chart and its framing borders in JSON.

---

• Call from shortcode: colors='(red,lime,#0000ff)'
• Default value is: ''
• Description: setting to each chart's segment own HTML color in their own array from shortcode's option. Colors are accepted by HTML names (eq 'lime','gold','navy',etc) or their hex code formats ('#FFFFF00'). The amount of elements should match the amount of your values input data (/ data points from datafile's row). Otherwise, reasonable coloring effect is not guaranteed.

An example

[simpleChart labels='(Ferrari, Jaguar, Porsche)' values='(250,230,270)' colors='(red,lime,navy)']

This gives you (on chart, only :-) red Ferrari, lime Jaguar, and navy colored Porsche - obviously.

• Call from shortcode: startbar='beige'
• Default value is: ''
• Description: sets starting color for smooth gradient of each bar of chart. The gradient is interpolated automatically from startbar to endbar color by applying LaB color model. Colors are accepted by HTML names ('gold') or their hex code formats ('#FFFFF00').

• Call from shortcode: endbar='gold'
• Default value is: ''
• Description: sets ending color for smooth gradient of each bar of chart. The gradient is interpolated automatically from startbar to endbar color by applying LaB color model. Colors are accepted by HTML intuitive color names ('gold') or by their standard hex code formats ('#FFFFF00') freely.

• Call from shortcode: gradient='value'
• Default value is: ''
• Description: changing gradient coloring order of bars on chart to happen based on inside properties of input data. At the moment, reordering of colors can happen based on the value of each data point only. Chart types 'columns' and 'area' are colored by vertical gradients and 'bars' by horizontal. Gradient is built by using 2 colors - startbar and endbar options - from bottom to top. This is very usefull option when you need to show automatically by different colors that something is 'cold' vs 'hot' or 'cheap' vs 'expensive' on the chart.

---

• Call from shortcode: css='carstyles.css'
• Default value is: 'd3chart.css'
• Description: standard cascading style sheet (CSS) file for the created new chart. You can define for each chart a separate and different look and feel by changing here a given file name on each shortcode's call. An example default file (d3chart.css) defines an uniform look and feel for all new charts. Look at [the available chart's classes and elements] (https://github.com/mrBigJS/d3-simpleCharts/wiki/CSS-Styling-of-Chart) too.

IMPORTANT NOTE: you need to set cssfile='foo.css' (or a file that does not exists) in order to activate next style's options: mstyle, backstyle, and css. We focus to support separate external style files - only - in next versions of software.

• Call from shortcode: mstyle='text-align:left; color=red'
• Default value is: ''
• Description: sets the style and vertical layout position of major text title of the chart. All the style attributes that are accepted by HTML table's tag <TD> can be used here.

• Call from shortcode: backstyle='background-color:beige; border:6px ridge purple;'
• Default value is: ''
• Description: background's style (in CSS) for whole chart. All HTML's standard style elements can be used that are accepted for <TABLE> tag.

NOTE: this is too complex way - try to use default style file for your charts instead of this option.

• Call from shortcode: css='{ ".bar" : {"fill" : "navy", "stroke" : "blue"} }'
• Default value is: ''
• Description: sets all styles of new chart elements from their DOM objects and styling them in CSS. This input JSON vector is parsed at first by the rules that give direct access to every individually visible chart's SVG's element. For example, instead of using startbar + endbar for coloring bars css='{ ".bar" : {"fill" : "navy", "stroke" : "blue"}' example can be used since chart's bars are belonging to HTML class named ".bar" and all other to the Chrome's or Firebug's 'Inspect element' visible attributes of SVG charts are available, as well. Basically, this input JSON defines direct access to the SVG's standard grouping element <g> and all of the attributes of its childs DOM nodes. These attributes are dynamically created and named when d3-simpleCharts is called for each new chart. Hence, this input set is open to expand to all minor details of chart based on next versions of this package.
• Usefull existing named classes of SVG chart: ".axis", ".axis path", ".axis line"
• Referring to whole root chart's class: " "
• Longer working example of call (CSS styling axes + all texts of chart abit): css='{ ".axis path, .axis line" : {"stroke" : "orange", "fill" : "gray"} , " " : { "font" : "12px sans-serif"} }'
• NOTE: we do not support or encourage to use this option anymore.

---

• Call from shortcode: noswitcher='1'
• Default value is: '0'
• Description: Removes chart switcher's buttons for their types (area,bars,...) to appear.

• Call from shortcode: noseries='1'
• Default value is: '0'
• Description: Removes chart's 'more data' button to appear.

• Call from shortcode: nodatamover='1'
• Default value is: '0'
• Description: Removes a button that switches popup's data into chart's label's axis.

• Call from shortcode: noexport='1'
• Default value is: '0'
• Description: Removes all export buttons (Excel & BIG DATA) to appear.

• Call from shortcode: exportsvg='1'
• Default value is: '0'
• Description: Activates current chart's SVG output button for copy & paste area of data box. When user presses this button a download version of chart (*.svg) is generated that opens to SVG editor (Inkscape, etc) or viewer software automatically.

• Call from shortcode: noembed='1'
• Default value is: '0'
• Description: Removes embedding link from chart.

• Call from shortcode: notimeslider='1'
• Default value is: '0'
• Description: Removes time slider to appear for 2x2 data input file.

• Call from shortcode: embedtitle='Copy chart's HTML'
• Default value is: 'Embed'
• Description: Custom title for embed link.

---

• Call from shortcode: jquery='1'
• Default value is: '0'
• Description: Adds jQuery lib to the software. You need to call this from shortcode if you use buttons on chart and notice that they are not doing nothing (eq your blog is not using jQuery before).

• Call from shortcode: nominimisation=1
• Default value is: 0
• Description: forces the minimisation of JavaScript not active and loads in bigger source code directly. This is useful when you want to devope and edit core lib further.

• Call from shortcode: cdn='1'
• Default value is: '0'
• Description: requires to load 'd3.js' from CDN (Content Distribution Network) network, instead of local copy of your plugin's folder. When developing your software you might prefer to froze the external library to the state that is not changing too fast.

• Call from shortcode: notooltips='1'
• Default value is: '0'
• Description: tooltip bubbles are not appearing anymore for the charts were they are normally active.

---

This plugin supports all those common standards of W3C consortium to generate vector graphics:

• JavaScript
• SVG
• CSS
• HTML DOM