This practice JS charting library created by PSDDude from 0 implements customized HTML tags which permit creating charts and graphs for infographics.
It’s a lightweight, pure JavaScript charting library (NO jQuery or different libraries required) which makes use of HTML5 applied sciences and works on all fashionable browsers together with IE, Chrome, Firefox, Opera, Safari.
To make use of it you don’t want to know any JavaScript, as all of the charts are added as HTML tags. You’ll be able to comply with the very straight ahead infographic library documentation which additionally incorporates examples.
The library permits creating:
– Piecharts and doughnuts
– Form graphs – you may rework any picture(PNG) right into a graph
– Form bar graphs – use any picture (PNG) to assemble a bar chart
– Line graphs
– Barchart graphs
Intensive simple to make use of documentation included.
Simple customization: coloration scheme, dimension, and so on.
BONUS:
FREE WordPress Charts and Graphs plugin for including infographics to your posts and pages.
Do you know that you would be able to manually insert HTML bar charts in your WordPress posts and pages?
Try the infographic javascript library project page for deliberate options
Change log
v 1.0.6 Dec 30, 2018
- fastened downside with legend show
v 1.0.5 Mar 3, 2018
- line chart can now show values for factors. use point-text-* attributes to configure how the purpose values are displayed
v 1.0.4 Could 1, 2015
- bar chart new attribute “max-value” – units the utmost vary of the grid; default is 0 which implies that the precise most worth of the information collection determines the vary of the grid;
- bar chart new attribute “bar-labels” might be true or false – determines whether or not to attract labels for every bar; default is fake;
- for line charts you may specify particular person level sizes via a brand new attribute on the “infographic-point” ingredient named “point-size”; by default the “point-size” worth of the “infographic-line” is taken under consideration
- for bar charts it’s now doable so as to add marker photographs for every bar via the attribute “marker” set on the “infographic-bar” tag
v 1.0.3 Jul 17, 2014
- charts are actually responsive; use % for width and the charts dimension will probably be adjusted in response to the scale of the ingredient the place inside which it’s positioned and it’ll additionally resize with the window;
- for piechart and doughnut charts added the attribute “start-angle” to point the start line at which the slices will probably be drawn; this attribute is in levels (from 0 to 360 however it may be any quantity even unfavorable);
- for piechart and doughnut chart if just one slice worth is used will probably be handled as a proportion worth; you may also use it as a worth if the attribute “label-type” is about as “worth” – set the newly added attribute “base-value” as a calculation base for displaying the chart (eg. if the slice worth is 50, the “label-type” is about as “worth” and the “base-value” is about to 200, the chart will show a slice 50 / 200 = 25%)
v 1.0.2 Apr 9, 2014
- for line graph added the “x-axis-labels” attribute to point if the graph ought to show labels on the X-axis
- bar graphs can now be configured to show as stacked bar graphs by setting the “bar-type” attribute to “stacked”
- for piechart/doughnut added the “padding” attribute to point the house between the outer circumference of the chart and the bounding field of the chart
- for piechart/doughnut added the “highlight-mode” attribute to point methods to spotlight slices on mouse-over; the spotlight might be “default” for coloration spotlight solely, “pop” for highlighting by coming out the slice and “border” for highlighting by including an exterior border across the slice
- for piechart/doughnut added the “highlight-size” attribute which works along with the “highlight-mode” attribute to point the scale of the coming out impact for “pop” and the width of the border for “border” spotlight mode
v 1.0.1 Jan 13, 2014
Click here to view new features examples
- added the “label-type” attribute to piechart/doughtnut which permits representing both proportion (“%”), worth (“worth”) or hiding the slice label
- added the “label-decimals” attribute to piechart/doughnut for indicating the precision of the quantity displayed on every slice
- added the “label-unit” attribute to piechart/doughnut for indicating the identify of the measure unit used on every slice (eg. hundreds of thousands, billions, pcs, and so on.)
- added the “hole-size” attribute for doughnut charts to point the scale of the middle gap
- added help for displaying CSV information for the road graph (eg. you may export CSV information from GoogleAnalytics and use that file as a parameter for the graph and it’ll show it accordingly)
- line graph and bar graph has been adjusted to additionally help displaying of unfavorable values
