d3-simpleCharts is here: you can start to show the next generation W3C’s sharp charts and graphs (eq SVG formats via d3.js library) from your any WordPress blogs easily.
This WP plug-in contains just 4 simple example graph types that you can call and draw by one shortcode:
The available chart types now are here: ‘Columns’, ‘Bars’, ‘Line’, ‘Pie’, ‘Area’
Pretty simple and obvious there, yes?
You can define data input values on the standard and uniform way from wordpress shortcode’s arguments directly or from external input data files.
Shortcode’s input option (eq values=’1,2,3′) is the preferred way always as the primary source of data values & their labels.
Three external file type formats are currently supported for data input (eq datafile=’mydata.csv’):
- TSV (eq tab separated values)
Note: XML should be easy to add: a bare skeleton JS code is there existing already but parsing of document is missing at this very 1st version of plugin package.
simpleCharts lets you start with very simple basic calls when you start to use it as a novice and then let you progress gradually to the quite advanced levels of SVG’s real professional properties when you need them and are willing to budget enough time for deeper learning curve.
Software is also automatically choosing default settings for more complex features that you vote not to setup them yet.
Here is the most simple example of shortcode’s call that works very well:
[simpleChart maintitle=’My Pets’ labels='(Cats, Dogs, Birds)’ values='(2,1,5)’]
Pretty simple & obvious (to create default ‘Columns’ chart) is it, huh?
Now – to get a whole picture of all rich features available here – you can expand your knowledge and finally master something like this for each new post/page on WP:
[simpleChart chart=’Pie’ mtitle=’All Animals’ values='(1,2,4,8,16)’ labels='(Cats,Dogs,Birds,Frogs,Bears)’ xtitle=”Animal race” ytitle=”Pcs on wild farm” datafile=”animals.json” width=”800″ height=”600″ format=”+0.02%” title=”These animals are living free around.” minrange=”1.0″ url=”http://en.wikipedia.org/wiki/Wild_animals” xrotate=-20]
- Very advanced & powerfull shortcode’s call* above to draw just the way you want your professional embedded super fast vector graphics.
- Advanced in detail on Wiki
You can customize almost main aspects of new created chart easily by using CSS style file(s) and chart’s generated CSS classes together.
- Chart type switcher buttons to compare data different ways.
- New chart’s vertical position control based on CSS.
- New chart’s total look & feel control based on CSS.
- Automatic smooth gradient coloring of each bar (or area) of chart.
- Many embedded charts on the same page, no problem.
- Supporting W3C’s globally recognized open web standards: DOM, SVG, and CSS.
- Supports time series from data files.
- Open chart’s data set export: Excel, SVG editor/viewer, and into big data (JSON) format.
Data input and output
- Data importing from most common external file formats (CSV/TSV/JSON) on server.
- Exporting: Excel and JSON formats (eq big data).
- Optional smart parsing of 2×2 matrix data points files row by row.
Software Upgrades & Further Development
- Distributed collaborative development via GitHub too (= welcome to fork and improve core’s code for “d3-simpleCharts”, note BIG ‘C’ in name).
All software is written also in a style that should be easy to expand & understand for any normal web developer of WordPress, DOM, JS & PHP languages.
Also, there is left on purpose a plenty of ‘console.info(foo)’ debugging calls for those essential variables of JS that you can activate in order to see what is really going on when SVG drawing takes its place (= consoles of FireBug & Chrome).
d3 lib is abit tricky to grasp at first – take your time & fill your coffee machine 🙂
Full open source + reference guide
HAPPY simpleCharting on WordPress !
- Is it possible to have multiple charts on the same WP post or page?
Good point & question !
YES indeed, the software is written so that it hides all the (= ugly) complexity of accounting of many separate charts + styles on the same page of WP.
So, you may have many pretty charts on the same page with their own original CSS styles attached to each one, independently. Everything is perfectly under your control transparently.
- Is it possible to embed a single chart to some exact position of post / page?
YES, you can now use 2 different methods to do this:
- Before calling shortcode [simpleChart] manually write (in WP’s HTML mode) chart’s placeholder(s) (often, DIV or SPAN tags in HTML). Take a look ‘chartid’ option on manual.
- How can I develope my own fancy XYZ or ABC around this code and get it included, too?
We encourage open collaborative development for programmers (by GitHub) over here:
- So, there is no user manual at all for this WordPress plugin inside download, huh?
Online manual & reference is building up gradually on GitHub’s Wiki over here:
Very Good Further Links
Version 1.3.22 –
Version 1.3.20 –
Automatic gradient coloring of chart bars by following the values of data when you call new option ‘gradient’. Optimizing dynamic coloring only when it is available for the chart type.
Version 1.3.19 –
Sorting for bars of chart can happen based on data input’s labels. Sorting popup works correctly with many different charts on the same WordPress page/post.
Version 1.3.18 –
New option to limit max of rows (/colums) of data series to show out. Better layout of chart.
Version 1.3.17 –
New option to prevent data switcher button to appear. More clear titles of SVG charts when using 2×2 external input file.
Version 1.3.16 –
Introducing new handy switcher button to move between data’s column and row view(s) when feeding in an external input data file.
Version 1.3.15 –
Uniform support of labels rotating on all chart types. Removing use of rickshaw from distribution.
Version 1.3.14 –
Introducing Line chart on the similar fashion than all other types. Automatic numbering of labels if missing. Uniform format of axis values with all chart’s types.
Version 1.3.13 –
Columns accepts now negative data values normally and scales automatically their min and max. Pie filters negatives away and shows the slices of the left positive values.
Version 1.3.12 –
Chart’s caption text joins in and becomes an internal part of SVG element on columns, bars, area, and pie. You can see it now on chart’s popup windows and printouts automatically.
Version 1.3.11 –
Chart’s main title becomes a part of SVG (= exportable to other ext.apps) on columns, bars, area, and pie. Returning back to work fantastic smooth gradient colors with area chart type.
Version 1.3.10 –
Uniform look of all popup tooltips on bars, columns, and pie. Bars labels added visible on its charts.
Version 1.3.9 –
Line chart support for popup window. Scaling of pie chart on popup window. Better design of all buttons styles.
Version 1.3.8 –
Better outlook and own style control for pie’s title labels. Similar logic of automatic minrange with line chart as wth all other types.
Version 1.3.7 –
Fixing the bug of exporting correct SVG chart instance as a download. Clarifying overall design of all buttons.
Version 1.3.6 –
Opening in apps + saving to a file export data now available. For example, direct opening into SVG editor possible for a chart (if you set exportsvg option active). Added classes to control the style of export data box from CSS.
Version 1.3.5 –
All pop-up window charts follow the CSS style rules of its parent chart faithfully. Refining some axises default setup values. More fancy screenshots from real fast cars.
Version 1.3.4 –
Adding new option ‘xrotate’ for rotating x axis labels with Columns chart as you wish. Some options becomes more tolerant for typos. Fixing bugs & warnings (BIG thanks for Cheche!).
Version 1.3.3 –
Correcting the path of ‘d3-simpleCharts’ -> ‘d3-simplecharts’ and following WP’s original naming of plugin.
Version 1.3.2 –
Making options ‘labels’, ‘colors’, ‘values’ input more tolerant for some common user’s typos. Main title has option can be also called ‘maintitle’ and chart’s popup text ‘popuptitle’ from now on.
Version 1.3.1 –
Version 1.3.0 –
Version 1.2.28 –
Let there be colors… and there was: introducing an option ‘colors’ to set your favorite colors of chart’s segments. Wiki’s doc is updated for this exciting feature too on Github.
Version 1.2.27 –
Fixing in ‘Bars’ chart type the lowest value scaling issue. More Data button is hidden by default if there is no 2×2 data set.
Version 1.2.26 –
More Data button is labelled by picked row name from 2×2 external file’s 1st column. New option ‘moredatatitle’ to set More Data button custom title introduced.
Version 1.2.25 –
Issue of attaching More Data’s data sets to the right chart on multiple charts / page fixed.
Version 1.2.24 –
Let there be TIME SLIDER and … there was (by JQuery UI). New obvious option ‘notimeslider’ available, too. Fixing external file’s time series to appear chronologically right on its pop-up menu.
Version 1.2.23 –
Sort works for external input file data more logically. Scaling more reasonable size of Pie. Better support of Bars & their tooltips. Better default style file example.
Version 1.2.22 – New handy keywords ‘first’ and ‘last’ for reading 2×2 data set from external input file. New classes of CSS for X and Y axis titles and examples on default style file. More updates to GitHub’s docs.
Version 1.2.21 – Better scaling of mins & maxs on axis. ‘Caption’ adding below chart(s). Error messages & warnings for uncorrect data sets.
Version 1.2.20 – Layout control of multiple charts on WP page works now (eq ‘chartid’). Nice screenshot added. Github’s docs updated.
* Tooltips support (COOL & transparent !) and shortcode’s ‘notooltips’ new option.
* New optional ‘chartid’ allowing the placement of chart anywhere.
* Legal license text included, also.
Version 1.2.18 – Bug fixes: ‘Columns’ supports now maxrange option too + sanity checks of generating gradiant colors for a chart at all.
Version 1.2.17 – New chart’s CSS class ‘svgchart’ + its docs on Wiki. Default styling file: move of styling rules toward chart’s own classes from basic SVG elements + listed names of mostly generated classes by new chart(s). More roomy & clear layout of default styled charts overall.
Version 1.2.16 – Linear gradient colors comes to ‘Area’ charts same way as on ‘Columns’ + its screenshot. New ‘cssfile’ option to input any named style file per chart. New reference page of CSS classes on Wiki + general clarifications of docs on Github.
Version 1.2.15 – Fixing bug of resizing chart on its popup window.
Version 1.2.14 – Adding afew more impressive screenshots.
Version 1.2.13 – Popup window chart becomes resizeable: brand-new scale down + up buttons (after all that is what ‘SVG’ stands for). Adding one more pretty screenshot.
Version 1.2.12 – Better uniform access to default styles from CSS file.
Version 1.2.11 – More flexible typos tolerating shortcode calls & new sort options.
Version 1.2.10 – Added new sort option + its handy popup UI on chart (= no automatic sort of data anymore).
Version 1.2.9 – New maxrange option support. Also, simple external input files and their user doc on Wiki (advanced examples).
Version 1.2.8 – Added ‘Line’ chart type drawing + its icon (thanks to rickshaw visualization lib!).
Version 1.2.7 – Bug fix: row option default set for reading 2×2 matrix input data.
Version 1.2.6 – Adding basic icon buttons for the chart and a folder for their pics (eq style of open office).
Version 1.2.5 – Chart on new window link, adding support of css style file for svg, fixing bug of chart’s width at start (on Chrome).
Version 1.2.4 – Cleaning the code.
Version 1.2.3 – Centering chart’s title and introducing positioning of logo option.
Version 1.2.1 – Adding chart’s branding logo and a flag to add jQuery lib.
Version 1.2.0 – New options to remove chart’s buttons to appear.
Version 1.1.5 – Finally tagging right subversion public on wordpress svn system.
Version 1.1.3 – Adding some pointers to GitHub’s full documentation.
Version 1.1.1 – A few screenshots added.
Version 1.1.0 – Charts fixed and optional menu to other data sets added.
Version 1.0.0 – This is very first release of the d3-simpleCharts plugin.