Infographic Charts and Graphics HTML Tags Library
This customized JS charting library created by PSDDude from 0 implements customized HTML tags which permit creating charts and graphs for infographics.
It is 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 use it you don’t want to know any JavaScript, as all of the charts are added as HTML tags. You can observe the very straight ahead infographic library documentation which additionally comprises examples.
The library permits creating:
– Piecharts and doughnuts
– Shape graphs – you possibly can remodel any picture(PNG) right into a graph
– Shape bar graphs – use any picture (PNG) to assemble a bar chart
– Line graphs
– Barchart graphs
Extensive simple to make use of documentation included.
Easy customization: coloration scheme, dimension, and many others.
BONUS:
FREE WordPress Charts and Graphs plugin for including infographics to your posts and pages.
Did you already know which you could manually insert HTML bar charts in your WordPress posts and pages?
Check out the infographic javascript library project page for deliberate options
Change log
v 1.0.6 Dec 30, 2018
- mounted 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 May 1, 2015
- bar chart new attribute “max-value” – units the utmost vary of the grid; default is 0 which signifies that the precise most worth of the information sequence determines the vary of the grid;
- bar chart new attribute “bar-labels” could be true or false – determines whether or not to attract labels for every bar; default is fake;
- for line charts you possibly can specify particular person level sizes by means of a brand new attribute on the “infographic-point” component named “point-size”; by default the “point-size” worth of the “infographic-line” is taken under consideration
- for bar charts it’s now attainable so as to add marker pictures for every bar by means of 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 shall be adjusted in response to the scale of the component the place inside which it’s positioned and it’s going to additionally resize with the window;
- for piechart and doughnut charts added the attribute “start-angle” to point the start line at which the slices shall be drawn; this attribute is in levels (from 0 to 360 however it may be any quantity even unfavourable);
- for piechart and doughnut chart if just one slice worth is used it is going to be handled as a share worth; you may also use it as a worth if the attribute “label-type” is ready 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 ready as “worth” and the “base-value” is ready 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 area between the outer circumference of the chart and the bounding field of the chart
- for piechart/doughnut added the “highlight-mode” attribute to point the right way to spotlight slices on mouse-over; the spotlight could 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 at the side of 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 share (“%”), 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 title of the measure unit used on every slice (eg. thousands and thousands, billions, pcs, and many others.)
- 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 possibly can export CSV information from GoogleAnalytics and use that file as a parameter for the graph and it’s going to show it accordingly)
- line graph and bar graph has been adjusted to additionally help displaying of unfavourable values
