This plugin has been closed and is no longer available for download.

NVD3 Visualisations

Description

NVD3 visualisations is a full set of visually interactive charts that you can control by simple options.

Online Demos

  • [Charts Picker on WordPress] (http://www.tere-tech.eu/balticfinns/?page_id=33756)
  • [Drupal 7 version] (https://www.drupal.org/sandbox/jouni_bn4f/2490412)

You can start to create any example chart into your blog and study it more before you decide if that suits for your visual presentation’s needs at hand.

This product lets you generate as many copies of different charts on the one page as you wish and scale their size just the way you like case by case.

All the example’s input data sets are stored in the same format on data folder so that you can easily copy them and start to use them as a template for your own data’s needs.

This package is an example how to bring in high level chart galleries into WordPress CMS and there is no active support available.

If you like it give us some stars on WP plugin so that others can find it more easily too
– thank you !
.

Key Features

  1. Special effects for infographic: embedding background’s picts, smooth gradients of colors for data, and shadows.
  2. Supports open data input from any public site & let you copy data in (auto)magically.
  3. Full set of all original NVD3’s gallery charts (12 types of charts in gallery).
  4. Super easy to illustrate your data sets by picking up template chart from any gallery’s examples.
  5. WYSIWYG look of chart on front-end + data editor to populate own data from files.
  6. Chart’s picker gives your users many views of the same data set easily.
  7. Support of JSON/XML or CSV/TSV data input formats.
  8. Smart suggestion of online syntax editor from cloud based on data’s type.
  9. Copy&paste data table from OpenOffice Calc to the automatically updated chart.
  10. Tag any pieces of page/post and build a new chart for numbers.
  11. Accurate layout of each chart based on any HTML container tag.
  12. Many charts on the same page/post of WordPress from same shortcode.
  13. Many fancy options available to change chart’s look & behavior.
  14. Dynamic & direct illustration of any own JavaScript function results.
  15. Visual preview of charts from the NVD3 lib’s original CSS style file to let you match blog’s theme easily.
  16. Chart calculator let users to modify chart fast by any basic math formulas.
  17. Localized presentation formats for currency, date, time, etc.
  18. Optional export of data / vector graphics of chart (SVG).
  19. Works best with Opera, Chrome, and Firefox browsers.
  20. WordPress multisite & SSL compatible plugin.
  21. Same open source code for WordPress & Drupal 7 societies: makes life easier for both group of developers.
    .

Data Input

  1. Fast & short data input from easy to remember options (values, labels, and series) of shortcode.
  2. Direct data input from some html tags of document (eq page/post).
  3. Data’s import from static JSON/XML/CSV/TSV file formats.
  4. Standard mySQL input from its table of database.
  5. Dynamic JSON inputs from your own JavaScript functions.
  6. Open data’s URL path.
    .

HAPPY CHARTING on WordPress !

Credits

This open source distribution contains visualization libraries from:

  • [Robin Hu, NVD3] (http://github.com/novus/nvd3 “Higher level library to create fast & easy D3 charts.”)
  • [Michael Bostock, D3] (http://github.com/mbostock/d3 “Famous open source visualization library core.”)

Big thanks for these talents by making NVD3 visualisations for WordPress technically possible too.

Screenshots

  • Chart Picker Helps to Decide which Visualization to Use.
  • 4 FAST STEPS of New Chart: 1)CLONE from Picker, 2)FEED IN Own Data, 3)EDIT Draft of Post/Page Normally, 4)PUBLISH It.
  • Same Data Set on 4 Different Ways by Using Chart's Picker.
  • Exporting for Chart & Its Data Turned on for Public Readers (eq exports Option).
  • Automatically Updated Charts + Fast Import from OpenOffice by table Option.
  • Old Charts Gallery Showing Out on The Same Page of WP's Blog.

Installation

Two WP standard ways to install the package.

  1. Go to wordpress ‘Dashboard’ front page.
  2. Select PlugIns / Add New for searching new plugin from WordPress library of plugins.
  3. Write ‘NVD3 Visualisations’ to the search box + Search PlugIns.
  4. Select ‘Install Now’ under the result of ‘NVD3 Visualisations’.
  5. Activate the PlugIn normally on WordPress after its download.
  6. Create a new page (Pages / Add New) for charts gallery by calling [Charts_Gallery] shortcode.
  7. Clear all sidebars of page (eq template “No Sidebars” setting) if your theme allows it.
  8. Open+bookmark this page for future and start to clone your charts & edit them (there is a link for that on gallery).
  9. Clone & enjoy your brand-new charts on WordPress !
  10. More tips: go to nvd3 plugin’s edit (Plugins / Installed plugins / NVD3 Visualisations / edit) and start to read from read_me_1st.txt file.

Or you may want to do it: ‘old traditional way’.

  1. Download nvd3 folder into your local computer from WordPress plugins website (https://wordpress.org/plugins/nvd3-visualisations/) normally.
  2. Unzip the package locally.
  3. Upload this folder next to the /wp-content/plugins/ directory into your WordPress server side.
  4. Activate the plugin through the ‘Plugins’ menu in WordPress.
  5. Create a new page (Pages / Add New) for charts gallery by calling [Charts_Gallery] shortcode.
  6. Clear all sidebars of page (eq template “No Sidebars” setting) if your theme allows it.
  7. View+bookmark this page for future and start to clone your charts & edit them (there is a link for that on gallery).
  8. Clone & enjoy your brand-new charts on WordPress !
  9. More tips: go to nvd3 plugin’s edit (Plugins / Installed plugins / NVD3 Visualisations / edit) and start to read from read_me_1st.txt file.

FAQ

I am not a tech guru & I hate to learn JavaScript API etc, is there any – just a simple way – to draw charts?

Shortcode [jsChart] is your easy solution then: first create charts gallery by [demosGallery] shortcode & then start cloning your own charts to the new page/post. Each cloning of new chart creates you full example call of [jsChart] shortcode with a lot of options for it that you can try to turn on and off. All this happens safely in preview mode of WordPress before you are happy & ready to publish it all.

How can I visualize my own data set?
  1. You just create your charts gallery by its shortcode [demosGallery] and pick up the right style of chart there for the task.
  2. Next, you choose if you want this new chart into page / post of WordPress.
  3. Before creating new chart by button you select from 8 different sources where your data is coming from.
  4. New chart button takes you to the 2nd step where you actually populate your own data in.
  5. You can copy & paste your own data set in & replace the data set that was coming from gallery’s template.
  6. Rest of publishing follows normal standard work flow of WordPress: just edit whole page/post, preview & publish it out.
I just want quickly way to show my small data set on page/post (+ change it later there) and not to edit any external files. Can I do this?

Sure, go to the charts gallery and select data input method Direct Input, press new chart button, and follow its further online help.

Also, you might like to take a look at shortcode_direct_data.txt on examples folder with this case, please.

How can I change the margins around the chart bigger?

You have 2 choices here: outside of chart container (normally div/span element & container) or inside its svg element. Take a look at example shortcode_margins_demo.txt to learn more about these options, please.

How can I change the look of elements of chart from default (eq its lines, bars, etc)?

You can set palette of custom colors for each chart (bars, etc) separately with the following ways:

  1. If you wish to set own custom palette, use colors option. Example – options=”{colors:’red,green,blue’}”
  2. If you wish to have fixed set of palettes, use colorbrewer option. Example – options=”{colorbrewer:{palette:’Blues’}}”
  3. If you wish to build colors smooth gradients. Example – options=”{ colors:{startbar:’red’, endbar:’lime’} }”
  4. Finally, there is an option style that feeds in all legal values to the chart’s svg in raw structure. A normal example – options=”{ style:{‘fill’:’orange’, ‘stroke’:’navy’} }”
Where are my data sets (of files) stored and what happens for them if I remove chart’s page/post or (gasp!) this whole plugin?

Look at your blog’s root and the folder called charts_nvd3. Data sets are stored there by random names and they stay there until you remove them by FTP client manually. If you create very many/big data sets it is a pretty good idea to clean this folder from time to time.

Is it possible to have multiple charts on the same WP post or page?

Good point & question here !

YES indeed, the software is design so that it transparently creates and draws many charts on the same page and gives you exact control where you like to show them.

Note: since ver.1.8.0 charts gallery is improved to new visual form. If you need/prefer the old (table) type of look, you just call it by [demosGallery_old] shortcode.

Also, peek into examples folder of plugin and start to test shortcodes demos there with your blog.

HELP!! There are SO namy options generated by gallery of chart picker: do I need to learn them all?

No, you just remove all the options that you do not like/need and shortcode sets them to sensible default values automatically on the background.

How do I know which options work together with the chart type that I use?

Look at inside chart_options.html file and its comparisons table, please.

Where is open source if I want to improve it?

Here:
* http://github.com/wp-plugins/nvd3-visualisations

Contributors & Developers

“NVD3 Visualisations” is open source software. The following people have contributed to this plugin.

Contributors

Translate “NVD3 Visualisations” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.4

Version 2.4 –
NEW: create smooth gradients coloring of charts by one click from settings. NEW: setting if data values of markers are visible or not with 2 chart types. Security FIX: non-logged reader can not publish + generate new charts for published charts gallery. FIX: much better overall settings control. FIX: faster redrawing of all charts on gallery.

2.3

Version 2.3 –
Steps closer to full WYSIWYG here. NEW: adding visual slider for labels of data below chart (eq often x-axis) + its setting to turn it on & off from gallery of charts. NEW: coloring of data elements, background image, and size on chart have a nice visual settings. They let you design & preview chart already on gallery level before publishing any draft. FIX: states of settings stays in memory better. Just expect visual support of more options next.

2.2

Version 2.2 –
NEW: easy open data input from any URLs by simple text box on charts gallery (just try it: URL address menu). NEW: automatic linear trend lines drawing for multibar & discretebar supported (experimental !!) by new option trendLine. NEW: your easier control of many options – basic on/off options (eq checkboxes) is part of standard options button from charts gallery. IMPORTANT FIXES: all input formats back in business + better supported. Update this one asap !

2.1

Version 2.1 –
Tested with WordPress version 4.4 on local & remote web sites. Much better publishing work flow of new chart by using ajax. Separating CMS specific parts of codes from universal more clearly. New option mode to control frameworks local / remote running behavior. Automatic selection of local mode for new charts when site is local.

2.0

Version 2.0 –
Merging all programs between WordPress & Drupal 7 together as the goal is to minimize each CMS dependent parts. Rewritten code is now following Drupal’s society better development standards & guidelines.

1.8.4

Version 1.8.4 –
Giving input file type mysql as on option opens standard access to the any valid table of mySQL database. Better examples how to use it and other javascript API calls (eq look at examples/js_api_* files). Table’s test file *.sql on examples/ too.

1.8.3

Version 1.8.3 –
Option links can have javascript calls as a link when you click a segment of chart (eq javascript:). Chart’s calculator works on chart’s popup windows properly too. Quick tutorial for links use when you clone direct input data from gallery of chart picker.

1.8.2

Version 1.8.2 –
Get even cooler interactive charts for your readers & support your infographic story: chart’s visual elements can have hyperlinks now to any web pages individually by setting an new option links (works just like colors & labels, btw). This works with direct data input & 1-dim basic charts at this point. Adding standard SVG’s transform option for labels of x- and y-axis: you may find it very useful to rotate(20 -20,0) when your labels just get too crowded and want to breath better.

1.8.1

Version 1.8.1 –
Relabelling or removal of all labels on X-axis is available now by calling easy xaxis option for most of the chart types. Support of standard html tag’s style attribute with xaxis and yaxis options that let you format appearance of each axis by all CSS + extended features of SVG – chart by chart. Resizing of window does not redraw charts anymore automatically since that was resetting own color’s settings away.

1.8.0

Version 1.8.0 –
NEW: graphics UX rocks U2, yes!!? Charts gallery gets its visual UI tabs for each bigger chart. Data editor has a converter from CSV/TSV -> JSON formats on front-end side. Examples of coloring charts by data values.

1.7.3

Version 1.7.3 –
Smooth gradient coloring for chart’s elements based on data value by use of option colors:{values:true, startbar:”lime”, endbar:”red”} that works similar fashion than with d3-simplechart plugin (eq gradient:”values” over there). Automatic and manual rescaling of Y-axis (eq values) with new domain option. Negative values charted correctly for direct cells input of document (eq an issue of non-numeric filter fixed).

1.7.2

Version 1.7.2 –
Short online helps generated for some gallery’s cloned chart’s input types to use them faster. Different locale for each chart by locale option (US/FI/RU supported) if you need it. Option calculatorlock if you want to froze the preset given formula and calculatorhide for hiding it visible from readers.

1.7.1

Version 1.7.1 –
Fast input examples direcly from charts gallery for these data sources: direct shortcode’s input, document’s cells, and imported tables (of OpenOffice Calc). More flexible & faster direct input format is available from shortcode.

1.7.0

Version 1.7.0 –
NEW: handy interactive calculator for the chart. By setting calculator option you give your readers freedom to scale visually the chart as they wish (eq formulas by + – * / operators). Two other options help this – calculatortitle and calculatorunit – which let you tell what questions calculator solves with each chart. Support of locale for country specific data formats. Some new designs of icons. Fixing minor bugs.

1.6.9

Version 1.6.9 –
Popup chart/window gets full screen viewing mode & its buttons. Better code to parse tables (2-dimensional: multibar, etc) into chart and export on popup window. New option autocoloring supports cloning the colors from table to chart & vice versa.

1.6.8

Version 1.6.8 –
Option table supports data exports and chartpicker on popup window. Restructuring of code for OOPS package continues.

1.6.7

Version 1.6.7 –
The best option table that lets you build from OpenOffice tables automatically updating charts real fast & have their colors copied to elements of chart too (look at screenshot nr 5). This works with all chart types which have TSV file on examples/ folder. Adding seriescolor option for class to let you name time series etc. Starting to restructure code more like real OOPS package.

1.6.6

Version 1.6.6 –
Multidimensional & -series data generates charts on the same way as below: set different bgcolor for each data set. This works with the multibar chart type at first. Including OpenOffice Calc examples file.

1.6.5

Version 1.6.5 –
Chart’s labels generated automatically from OpenOffice tables too with new option titlecolor. Better examples how to call & show up OpenOffice tables.

1.6.4

Version 1.6.4 –
Opening fast copy & paste way of creating charts from OpenOffice tables with minimum efforts. Allowing HTLM tags of document to containg character + special characters and still accepted as input data. Examples/ how to use class option with OpenOffice tables.

1.6.3

Version 1.6.3 –
Direct input method accepts HTML tags of Page/Post: data values are picked from the contents of same class & chart’s labels from ID attributes (if existing). Fixing multisite/SSL root directory issue + other small bugs. Examples/ how to use class option.

1.6.2

Version 1.6.2 –
More cool shadows for all you infographic fans out there (try discretebar chart). Fixing smooth gradients coloring to work for discretebar’s data set. Option exports of data supports also CSV and TSV file’s input formats if turned on (default is exports:false eq no exports allowed).

1.6.1

Version 1.6.1 –
Exporting buttons (Excel & SVG edit) on popup windows:exporting of data set by option exports in Excel’s CSV and in Illustrator’s SVG formats. Positioning of background image by x and y coordinates (eq backgroundimage can be JSON object too) based on SVG element W3C standards. Quite afew bugs removed.

1.6.0

Version 1.6.0 –
NEW: Uniform interactive comparing of the data set by chart’s picker buttons on all popup windows called by new option chartpicker. This supports CSV/TSV inputs (max 8 chart’s types) and direct data (max 6 chart’s types). Better titles for popup’s charts from options.

1.5.12

Version 1.5.12 –
More support of infographics: background-image supports also now a list of picts + their file names (eq random backgrounds) as its input. Format support for data values of Pie and Donut chart types added.

1.5.11

Version 1.5.11 –
Support of very simple direct input of data by values, labels, and series options (similar than in D3 simplecharts plugin) for all chart types. Renaming of some functions to remove conflicts with D3 simplecharts. Short examples how to call direct data for a few chart types.

1.5.10

Version 1.5.10 –
More spices & impressive effects for infographics. Let there be shadows and there is the option for that. How about background-image or background-color ? No problem, there they are. Examples of coloring improved to document it all better & gallery looks more attractive, too.

1.5.9

Version 1.5.9 –
Coloring option colors accepts & generates smooth gradients between given start & end colors (by Lab color model). Examples about how to set custom colors and format of axis.

1.5.8

Version 1.5.8 –
Expanding coloring for segments of charts: by colorbrewer option + palettes or own given set by colors option. Support of standard format of D3 on values axis of charts: format option. Removing x-axis time dependence from a few chart types. Better default margins for all demo charts.

1.5.7

Version 1.5.7 –
Support of standard margin options for the chart itself and its external container from input options. The 1st primitive way to change chart’s drawing svg styles: color of stroke, fill, opacity, etc. New example of margins use.

1.5.6

Version 1.5.6 –
Chart’s cloning into own popup window + its printing option from there. Resizeable popup charts. Standard border and backgroundcolor support.

1.5.5

Version 1.5.5 –
Three more chart types accept TSV/CSV input formats (eq cumulativeline, stackedarea, and lineplusbar) and clone from gallery’s TSV examples. Support of standard style’s float option for right/left placements of chart.

1.5.4

Version 1.5.4 –
Three new chart types accept TSV/CSV input formats (eq pie,donut, and discretebar) and clone from gallery. Better filtering of xml input on data editor.

1.5.3

Version 1.5.3 –
Data converter between json and xml on data editor. More human readable data sets, prettified. Fixed ugly bug of url redirection in creating new chart from gallery.

1.5.2

Version 1.5.2 –
Chart’s dimensions & options visible for easy edit on its created shortcodes. Just publish it: 1-2-3-4 steps on screenshot how to publish from charts gallery.

1.5.1

Version 1.5.1 –
Better security for data editor’s updates of chart data. Expanding gallery to create XML, CSV & TSV based template charts for new posts easily. Automatic showing right data’s syntax editor (json/xml). CSV&TSV data sets for multibar. Cooler look of data editor with its new styles.

1.5.0

Version 1.5.0 –
NEW: Direct data editor for all created own charts automically from gallery that removes itself when you publish. New example from CSV & TSV charts generation calls.

1.4.0

Version 1.4.0 –
NEW: Expanding input data formats for common CSV and TSV files by supporting them with 3 different chart types (multibar, viewfinder, and simpleline).

1.3.1

Version 1.3.1 –
Automatic cloning of data sets into blog’s root folder when creating new charts from gallery.

1.3.0

Version 1.3.0 –
NEW: Charts gallery becomes an automatic chart generating tool for a new post/page. Most gallery demos in XML + perfect functions to convert data between JSON and XML formats.

1.2.4

Version 1.2.4 –
Demo charts into 2×6 grid for better room to dislay all with some narrow themes.

1.2.3

Version 1.2.3 –
More pretty & helpful demo charts with titles. New examples how to use XML input files. Tested with the newest WordPress 3.9.

1.2.2

Version 1.2.2 –
Better support of XML data format & xml demo mode of whole gallery for testing it.

1.2.1

Version 1.2.1 –
NEW: Support of XML data format from input files & demo examples.

1.1.1

Version 1.1.1 –
Updating newest d3.js (v3.4.6) in use.

1.1.0

Version 1.1.0 –
NEW: direct shortcode API, simple to use + automatic generation of containers.

1.0.3

Version 1.0.3 –
Cleaning & reordering of code.

1.0.2

Version 1.0.2 –
Minor startup bugs + better readme texts.

1.0.0

Version 1.0.0 –
The 1st release of visualisation gallery.