Infographic Charts & Graphics HTML Tags Library

Create beautiful charts and graphs for infographics with custom HTML tags

A light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.

To use it you do not need to know any JavaScript, as all the charts are added as HTML tags. You can follow the very straight forward documentation which also contains examples.

Project description

This custom JS charting library created by PSDDude from 0 implements custom HTML tags which allow creating charts and graphs for infographics.

It is a light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.

To use it you do not need to know any JavaScript, as all the charts are added as HTML tags. You can follow the very straight forward documentation which also contains examples.

The library allows creating: – Piecharts and doughnuts – Shape graphs – you can transform any image(PNG) into a graph – Shape bar graphs – use any image (PNG) to construct a bar chart – Line graphs – Barchart graphs

Extensive easy to use documentation included.

Easy customization: color scheme, size, etc.

Examples

Change log

In this section I will post the changes made to this project and also the planned changes with their expected release date.

v1.0.0

released 13 December 13

this is the initial version

v1.0.1

released 13 January 14

added the “label-type” attribute to piechart/doughtnut which allows representing either percentage (“percent”), value (“value”) or hiding the slice label
added the “label-decimals” attribute to piechart/doughnut for indicating the precision of the number displayed on each slice
added the “label-unit” attribute to piechart/doughnut for indicating the name of the measure unit used on each slice (eg. millions, billions, pcs, etc.)
added the “hole-size” attribute for doughnut charts to indicate the size of the center hole
added support for displaying CSV data for the line graph (eg. you can export CSV data from GoogleAnalytics and use that file as a parameter for the graph and it will display it accordingly)
line graph and bar graph has been adjusted to also support displaying of negative values

v1.0.2

released 9 April 14

for line graph added the “x-axis-labels” attribute to indicate if the graph should display labels on the X-axis
bar graphs can now be configured to display as stacked bar graphs by setting the “bar-type” attribute to “stacked”
for piechart/doughnut added the “padding” attribute to indicate the space between the outer circumference of the chart and the bounding box of the chart
for piechart/doughnut added the “highlight-mode” attribute to indicate how to highlight slices on mouse-over; the highlight can be “default” for color highlight only, “pop” for highlighting by popping out the slice and “border” for highlighting by adding an exterior border around the slice
for piechart/doughnut added the “highlight-size” attribute which works in conjunction with the “highlight-mode” attribute to indicate the size of the popping out effect for “pop” and the width of the border for “border” highlight mode
WordPress plugin for infographic shortcodes

v1.0.3

approved 18 July 14

charts are now responsive; use % for width and the charts size will be adjusted according to the size of the element where inside which it is placed and it will also resize with the window;
for piechart and doughnut charts added the attribute “start-angle” to indicate the starting point at which the slices will be drawn; this attribute is in degrees (from 0 to 360 but it can be any number even negative);
for piechart and doughnut chart if only one slice value is used it will be treated as a percentage value; you can also use it as a value if the attribute “label-type” is set as “value” – set the newly added attribute “base-value” as a calculation base for displaying the chart (eg. if the slice value is 50, the “label-type” is set as “value” and the “base-value” is set to 200, the chart will display a slice 50 / 200 = 25%)