Documentation


Step 1. Upload src/infographic.min.js to your webserver and include it in your page

The main and only file of this library is src/infographic.min.js and can be found in the package you have just downloaded. To use the Infographic library you have to upload this file to your web server (you can upload it anywhere on the server, but usually JavaScript files are stored in a root folder named js).

In the HTML where you want to use this file you need to edit the page and in the <head> section add the following code:

<!-- Main file of the library -->
<!-- Be careful that the path to the library file is the correct one. Here we assume that the file was uploaded in the root js folder -->
<script src="/js/infographic.min.js" type="text/javascript"></script>

Step 2. Input the Infographic tags in your HTML documents

The Infographic Library works as an extension of the HTML language. So, each infographic type has an HTML tag associated with it. You can input that tag in your HTML documents and it will be rendered as configured.

The Infographic Library includes 5 tags for the following infographics types:

So, for example if you would like to add a doughnut chart to your page you would insert in your HTML code something like this:

<!-- Insert this HTML where you want your doughnut -->
<infographic-piechart width="300" height="300" type="doughnut">
<infographic-data>
<infographic-pieslice value="20">Data 1</infographic-pieslice> 
<infographic-pieslice value="80">Data 2</infographic-pieslice>
<infographic-pieslice value="40">Data 3</infographic-pieslice>
</infographic-data>
</infographic-piechart>



Data 1
Data 2
Data 3

Please see below the full reference for each of these tags with examples on how you can use them.

Important! All tags of this infographic library accept the style attribute just like any other HTML element, so you can use it to customize it’s look with CSS.


Tag structure
<infographic-piechart ... >
<infographic-data>
<infographic-pieslice ... /> 
...
<!-- Insert one <infographic-pieslice> element for each slice of the pie -->
<!-- The "value" attribute of the <infographic-pieslice> element will determine the size of the slice -->
<!-- And the text inside the tag will become the label of the slice -->
...
</infographic-data>
</infographic-piechart>

Definition and usage

This tag is used for rendering piechart and doughnut graphs. A piechart or doughnut consists of a <infographic-piechart> element and some sub-elements for indicating the underlying data. It has to have one and only one <infographic-data> sub-element which in turn has one or more <infographic-pieslice> sub-elements, each one for indicating data for a slice of the piechart (or doughnut).

This type of graphic also allows a legend which can be created using the <infographic-legend> element. The legend element is NOT a sub-element and it can be put anywhere in the document. Please check the <infographic-legend> element reference section

Attribute Value Description
id String Optional The ID of the HTML element. This can be used as reference when a legend element is needed. Defaults to an auto-generated ID.
width Number Optional Width in pixels of the bounding box for the chart. This chart will become responsive if you use % units (eg. setting the width to 100% will expand the chart to the full width of its parent). Defaults to 500.
height Number Optional Height in pixels of the bounding box for the chart. Defaults to 500.
type String Optional Can be either of “piechart” or “doughnut”. Default is “piechart”
font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the labels placed on the pie slices. Default is “16px”.
font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the pie slices. Default is “bold”.
font-family String Optional The font family used for the labels placed on the pie slices. You can use any font including HTML5 web fonts. Default is “sans-serif”
font-color String Optional The hex color code of the font color used for the labels placed on the pie slices. Default is “#ffffff”
colors String Optional Comma separated list of hex color codes that will be used in order for rendering the slices of the pie (or doughnut). By default the library uses its own dynamic color schema which prevents neighbouring slices to have too similar colors.
label-type String Optional Can be either of “percent”, “value” or “none”.

  • “percent” the chart will calculate for each slice the percentage and display it on the slice. This is the default behaviour.
  • “value” the chart will display the actual value on each slice.
  • “none” chart slices will not have any label
label-decimals Number Optional Indicates the number of decimal places for the slice values displayed. Default is 2 decimal places.
label-unit String Optional If the label-type attribute is set to “value” you can indicate the measure units (eg. mi, millions, billions, etc.)
hole-size Number Optional A decimal number between 0 and 1 used only for the doughnut chart indicating the size of the center hole relative to the size of the doughnut. A value of 0 will render a chart identical to the piechart type. Default is 0.5 indicating a hole size half the size of the doughnut.
padding Number Optional Padding in pixels indicating the space between the outer circumference of the chart and the bounding box of the chart. Default is 0.
highlight-mode String Optional Indicates how the slices of the chart are highlighted on mouse-over. Possible values are “default” for the default color highlighting, “pop” for highlighting by popping out the slice and “border” by adding an external border to the highlighted slice. Default value is “default”.
highlight-size Number Optional Works together with the highlight-mode atttribute and indicates the size in pixels of the popping out effect for “pop” and the width of the border for “border” highlight mode. Default value is 4.
start-angle Number Optional Indicates the starting point for the first slice. This number can be any positive or negative number indicating in degrees the starting angle for the first slice (eg. 0 is the center right margin, -90 is the top middle, 90 is the bottom middle, etc.) Default value is 0 (center right).
base-value Number Optional Used when the chart has only one slice defined and “label-type” is set as “value”. The chart will draw the slice using the formula value-of-the-slice / base-value.

This element has no attributes, but is a required sub-element for the piechart as it is a placeholder for the data that
the the piechart represents.

This element holds data for one slice of the piechart. It has to be placed inside a <infographic-data> element,
and the text inside the element will become the label of the slice.

Attribute Value Description
value Number Required The numerical value you want to represent as a slice of the piechart.
<!-- Sample piechart with custom color scheme and fonts-->
<infographic-piechart width="300" height="300" type="piechart"
colors="#880000,#cc4444,#ffaaaa" font-family="arial" font-size="25px"
>
<infographic-data>
<infographic-pieslice value="10">Data 1</infographic-pieslice> 
<infographic-pieslice value="60">Data 2</infographic-pieslice>
<infographic-pieslice value="30">Data 3</infographic-pieslice>
</infographic-data>
</infographic-piechart>



Data 1
Data 2
Data 3


Tag structure
<!-- All configuration for the shape bar graph is made through attributes in the tag -->
<infographic-shapebargraph ... >
</infographic-shapebargraph>

Definition and usage

This tag is used for rendering a bar graph by the use of a custom image. You can indicate which image to use and the percentage to represent and the image will be multiplied 10 times and the bar filled according to the value specified. A shape bar graph consists of only a <infographic-shapebargraph> element and its attributes through which you can configure the chart. The main attribute is value which is a number from 0 to 100 indicating the percentage that you want to represent with this graph.

Attribute Value Description
id String Optional The ID of the HTML element. Defaults to an auto-generated ID.
width Number Optional Width in pixels of the bounding box for the chart. Defaults to 500.
height Number Optional Height in pixels of the bounding box for the chart. Defaults to 500.
image String Required URL of an image which will be used to compose the barchart.
font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the labels placed on the graph. Default is “16px”.
font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the graph. Default is “bold”.
font-family String Optional The font family used for the labels placed on the graph. You can use any font including HTML5 web fonts. Default is “sans-serif”
font-color String Optional The hex color code of the font used for the labels placed on the graph. Default is “#777777”
fill-color String Optional Hex code for the color that will be used to fill the chart. Default is “#8dd96c”
back-color String Optional Hex code for the color that will be used for the inactive part of the chart. Default is “#eeeeee”
label String Optional Label that will be placed next to the graph indicating what the graph is representing. Default is “”
value Number Required Value that has to be represented by the chart. As the values represented by this chart are percentages this number has to be between 0 and 100.
<!-- Sample shape bar graph-->
<!-- You can use any image to construct the chart -->
<infographic-shapebargraph 
image="https://cdn1.iconfinder.com/data/icons/simple-icons/128/envato-128-black.png" 
 value="80" 
width="500" height="200" 
label="Shape Bar Graph" 
fill-color="#A2B324" back-color="#aaa" 
font-size="15px" font-color="#444444">
</infographic-shapebargraph>



Tag structure
<!-- All configuration for the shape graph is made through attributes in the tag -->
<infographic-shapegraph ... >
</infographic-shapegraph>

Definition and usage

This tag is used for rendering a graph by the use of a custom image. You can indicate which image to use and the percentage to represent and the image will be filled according to the value specified. A shape graph consists of only a <infographic-shapegraph> element and its attributes through which you can configure the chart. The main attribute is value which is a number from 0 to 100 indicating the percentage that you want to represent with this graph.

Attribute Value Description
id String Optional The ID of the HTML element. Defaults to an auto-generated ID.
width Number Optional Width in pixels of the bounding box for the chart. Defaults to 500.
description String Optional Description of the data represented by the chart. This will appear in the tooltip shown on mouse over. This attribute can contain HTML code, but attention has to be given to the use of “” and ” as this value is filled in as a value of an HTML attribute. Default is blank.
height Number Optional Height in pixels of the bounding box for the chart. Defaults to 500.
image String Required URL of an image which will be used to compose the barchart.
font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the labels placed on the graph. Default is “16px”.
font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the graph. Default is “bold”.
font-family String Optional The font family used for the labels placed on the graph. You can use any font including HTML5 web fonts. Default is “sans-serif”
font-color String Optional The hex color code of the font color used for the labels placed on the graph. Default is “#ffffff”
fill-color String Optional Hex code for the color that will be used to fill the chart. Default is “#8dd96c”
back-color String Optional Hex code for the color that will be used for the inactive part of the chart. Default is “#eeeeee”
value Number Required Value that has to be represented by the chart. As the values represented by this chart are percentages this number has to be between 0 and 100.
type String Optional Can be either of “vertical”, “horizontal” or “radial”. This setting determines the direction of the fill:
left-to-right, bottom-up or in a circular manner. Default is “vertical”
<!-- Sample shape graph-->
<!-- You can use any image to construct the chart -->
<!-- You can also set the size, type and color for the font -->
<infographic-shapegraph 
image="https://cdn1.iconfinder.com/data/icons/simple-icons/128/envato-128-black.png" 
 value="50" 
width="300" 
height="300" 
fill-color="#B324A2" 
back-color="#cccccc" 
font-family="arial"
font-size="45px" 
font-color="#ffffff">
</infographic-shapebargraph>


Tag structure
<infographic-linegraph ... >
<infographic-data>
<!-- Insert one <infographic-line> element for each line (series) of the graph -->
	<infographic-line ... > 
		<!-- Insert one <infographic-point> element for each value of a line (series) -->
		<!-- The value attribute indicates the value for the series -->
		<!-- The text inside the node indicates the label of the series -->
		<infographic-point ... /> 
		...
	</infographic-line ... > 
...
</infographic-data>
</infographic-linegraph>

Definition and usage

This tag is used for rendering line graphs. A line graph represents series of values as points that are connected. This graph consists of a <infographic-linegraph> element and some sub-elements for indicating the underlying data. It has to have one and only one <infographic-data> sub-element which in turn has one or more <infographic-line> sub-elements, each one for indicating data for a specific line (series). For each serie you have to indicate one or more points with the help of the <infographic-line> element.

This type of graphic also allows a legend which can be created using the <infographic-legend> element. The legend element is NOT a sub-element and it can be put anywhere in the document. Please check the <infographic-legend> element reference section

Attribute Value Description
id String Optional The ID of the HTML element. This can be used as reference when a legend element is needed. Defaults to an auto-generated ID.
width Number Optional Width in pixels of the bounding box for the chart. Defaults to 300.
height Number Optional Height in pixels of the bounding box for the chart. Defaults to 300.
colors String Optional Comma separated list of hex color codes that will be used in order for rendering each line. The library uses a dynamic color schema which will assign random colors to each line.
max-value Number Optional Indicates the maximum value for the Y-axis of the chart displayed. This maximum is overriden by any higher value of the line points in the graph. This ensures that all points of all lines are visible in the graph. A value of 0 will make the highest value of the line points to becmoe the maximum value of the Y-axis. Defaults to 0.
line-width Number Optional The thickness of the line in pixels. Defaults to 10.
grid-scale Number Optional The step used for drawing the grid markers lines. This value is given in absolute value (eg. 100 means that the grid will have markers for 0, 100, 200, 300, etc). If 0 is indicated then no grid will be displayed. Defaults to 0.
grid-color String Optional The hex color indicating the color for the grid lines and grid markers. Defaults to “#cccccc”.
grid-line-width Number Optional Indicates the thickness of the grid lines. Defaults to 0.5.
grid-font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the grid markers. Default is “10px”.
grid-font-family String Optional The font family used for the grid markers. You can use any font including HTML5 web fonts. Default is “arial”
grid-font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the graph. Default is “bold”.
data-csv String Optional URL path of a CSV file from which the chart will draw its data (eg. you can export CSV data from GoogleAnalytics and use that file as a parameter for the graph and it will display it accordingly). If this attribute is filled in then you don’t need to add the infographic-data sub-element.
x-axis-labels String Optional This value can be either “yes” or “no” and indicates if the chart should display or not the labels on the X-axis. Default is “yes”.

This element has no attributes, but is a required sub-element as it is a placeholder for the data that
the the graph represents.

This element holds data for one line of the graph. It has to be placed inside a <infographic-data> element,
and its name attribute indicates the name of the series that the line represents.

Attribute Value Description
Name String Required The name of the series that the line represents. This will show in the tooltips and also in the legend (if a legend is used).

This element holds individual points for a line in the graph. One or more of this elements have to be placed inside a <infographic-line> element indicating the Y-axis value to be represented, and the text inside the element will be the X-axis value.

Attribute Value Description
value Number Required The numerical value you want to represent as a point Y-axis value for the line.
<!-- Sample line chart with custom color scheme and fonts -->
<!-- You can also configure the grid style (color, font size, scale, etc.) -->
<infographic-linegraph width="450" height="600" line-width="5" grid-scale="100" grid-color="#ccc" grid-font-size="12px" point-size="4"  colors="#FF0000,#00FF00,#0000FF" max-value="1000">
<infographic-data>
<infographic-line name="Red Line">
	<infographic-point value="100">2010/01</infographic-point>
	<infographic-point value="120">2010/02</infographic-point>
	<infographic-point value="150">2010/03</infographic-point>
	<infographic-point value="250">2010/04</infographic-point>
	<infographic-point value="630">2010/05</infographic-point>
	<infographic-point value="820">2010/06</infographic-point>
</infographic-line>
<infographic-line name="Green Line">
	<infographic-point value="400">2010/01</infographic-point>
	<infographic-point value="210">2010/02</infographic-point>
	<infographic-point value="200">2010/03</infographic-point>
	<infographic-point value="130">2010/04</infographic-point>
	<infographic-point value="150">2010/05</infographic-point>
	<infographic-point value="120">2010/06</infographic-point>
</infographic-line>
<infographic-line name="Blue Line">
	<infographic-point value="300">2010/01</infographic-point>
	<infographic-point value="420">2010/02</infographic-point>
	<infographic-point value="360">2010/03</infographic-point>
	<infographic-point value="530">2010/04</infographic-point>
	<infographic-point value="350">2010/05</infographic-point>
	<infographic-point value="420">2010/06</infographic-point>
</infographic-line>
</infographic-data>
</infographic-linegraph>




2010/01
2010/02
2010/03
2010/04
2010/05
2010/06


2010/01
2010/02
2010/03
2010/04
2010/05
2010/06


2010/01
2010/02
2010/03
2010/04
2010/05
2010/06



Tag structure
<infographic-bargraph ... >
<infographic-data>
<!-- Insert one <infographic-bargroup> element for each group of bars that you want to display -->
	<infographic-bargroup ... > 
		<!-- Insert one <infographic-bar> element for each bar (series) -->
		<!-- The value attribute indicates the value for the series -->
		<!-- The text inside the node indicates the label of the series -->
		<infographic-bar ... /> 
		...
	</infographic-bargroup ... > 
...
</infographic-data>
</infographic-bargraph>

Definition and usage

This tag is used for rendering bar graphs. A bar graph represents series of values as bars. The bars can be represented either vertically (bottom to top) or horizontally (left to right). This graph consists of a <infographic-bargraph> element and some sub-elements for indicating the underlying data. It has to have one and only one <infographic-data> sub-element which in turn has one or more <infographic-bargroup> sub-elements, each one for indicating data for a bar (series). For each serie you have to indicate one or more values with the help of the <infographic-bar> element.

This type of graphic also allows a legend which can be created using the <infographic-legend> element. The legend element is NOT a sub-element and it can be put anywhere in the document. Please check the
<infographic-legend> element reference section

Attribute Value Description
id String Optional The ID of the HTML element. This can be used as reference when a legend element is needed. Defaults to an auto-generated ID.
width Number Optional Width in pixels of the bounding box for the chart. Defaults to 200.
height Number Optional Height in pixels of the bounding box for the chart. Defaults to 200.
colors String Optional Comma separated list of hex color codes that will be used in order for rendering each bar. The library uses a dynamic color schema which will assign random colors to each line.
type String Optional Can be either “vertical” or “horizontal” and indicates how the bars should be drawn. “Vertical” will draw the bars bottom-up and “horizontal” will draw them left-to-right. Defaults to “vertical”.
serie-spacing Number Optional Value in pixels indicating the space between groups of bars (bargroup elements). Defaults to 10.
font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the labels placed on the around the bars. Default is “10px”.
font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the chart. Default is “bold”.
font-family String Optional The font family used for the labels placed on the chart. You can use any font including HTML5 web fonts. Default is “arial”
font-color String Optional The hex color code of the font color used for the labels placed on the chart. Default is “#777777”
grid-scale Number Optional The step used for drawing the grid markers lines. This value is given in absolute value (eg. 100 means that the grid will have markers for 0, 100, 200, 300, etc). If 0 is indicated then no grid will be displayed. Defaults to 0.
grid-color String Optional The hex color indicating the color for the grid lines and grid markers. Defaults to “#cccccc”.
grid-line-width Number Optional Indicates the thickness of the grid lines. Defaults to 0.5.
grid-font-size Unit Size Optional The font size in size units (eg. “16px” or “1.2em”) for the grid markers. Default is “10px”.
grid-font-family String Optional The font family used for the grid markers. You can use any font including HTML5 web fonts. Default is “arial”
grid-font-weight Unit Size Optional The font weight in size units (eg. “bold” or “normal”) for the labels placed on the graph. Default is “bold”.
bar-type String Optional This value can be either “normal” or “stacked” and indicates if this is the bars are represented side by side or stacked. Default is “normal”.

This element has no attributes, but is a required sub-element as it is a placeholder for the data that
the the graph represents.

This element holds data for a group of bars in the graph. It has to be placed inside a <infographic-data> element,
and its name attribute indicates the name of the series (bar group).

Attribute Value Description
Name String Required The name of the series (bar group).

This element holds individual values for a bar in the graph. One or more of this elements have to be placed inside a <infographic-line> element indicating the size of the bar. The text inside the element will be the label of the series. The label will appear in the tooltips and also in the legend (if a legend is used).

IMPORTANT: The text inside this element uniquely identifies the subserie that the bar represents, so it should be consistent to the value inside <infographic-bar> elements in other <infographic-bargroup> elements.

Attribute Value Description
value Number Required The numerical value you want to represent as a point Y-axis value for the line.
<!-- Sample horizontal bar chart with custom color scheme and fonts -->
<infographic-bargraph width="450" 
font-color="#000000" 
height="600" 
 type="horizontal" 
colors="#894E1E,#DB9A55,#E8831E,#EFAA3B,#8D9B25"
grid-scale="100" 
grid-font-size="8px" 
grid-color="#ccc"
>
<infographic-data>
	<infographic-bargroup name="2011">
		<infographic-bar value="330">Data 1</infographic-bar>
		<infographic-bar value="1200">Data 2</infographic-bar>
		<infographic-bar value="1000">Data 3</infographic-bar>
		<infographic-bar value="1830">Data 4</infographic-bar>
		<infographic-bar value="730">Data 5</infographic-bar>
		<infographic-bar value="430">Data 6</infographic-bar>
		<infographic-bar value="130">Data 7</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="2012">
		<infographic-bar value="730">Data 1</infographic-bar>
		<infographic-bar value="200">Data 2</infographic-bar>
		<infographic-bar value="700">Data 3</infographic-bar>
		<infographic-bar value="130">Data 4</infographic-bar>
		<infographic-bar value="830">Data 5</infographic-bar>
		<infographic-bar value="330">Data 6</infographic-bar>
		<infographic-bar value="330">Data 7</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="2013">
		<infographic-bar value="130">Data 1</infographic-bar>
		<infographic-bar value="800">Data 2</infographic-bar>
		<infographic-bar value="300">Data 3</infographic-bar>
		<infographic-bar value="230">Data 4</infographic-bar>
		<infographic-bar value="130">Data 5</infographic-bar>
		<infographic-bar value="530">Data 6</infographic-bar>
		<infographic-bar value="340">Data 7</infographic-bar>
	</infographic-bargroup>
</infographic-data>
</infographic-bargraph>




Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
Data 7


Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
Data 7


Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
Data 7



Tag structure
<infographic-legend ... >
</infographic-legend>

Definition and usage

This tag is used to show the meaning and the color relations represented in the graphs. The legend consists of only a simple <infographic-legend> element with some attributes that indicate for what graph the legend is. It will be rendered as a box containing small colored rectangles and labels indicating the data series represented in the graph that they relate to.

This element can be placed anywhere in the HTML document to offer maximum flexibility. Also, you can style it however you want (just like the other elements).

Only Piecharts (Doughnuts), Line Graphs and Bar Graphs can have a legend element, because these are the graphs that handle series and subseries of data.

Attribute Value Description
for String Required The ID of the graph element for which the legend will display the colors and labels of the data series.
display String Optional Can be either “block” or “inline”.”Block” will display each data series on a separate line. “Inline” will try to place each dataseries on a single line. Defaults is “block”.
<!-- Sample piechart with custom color scheme and fonts -->
<!-- The legend element can be placed anywhere -->
<!-- Here we place it right after the piechart -->
<!-- Notice that we use the ID of the piechart to attach the legend -->
<infographic-piechart width="300" height="300" type="piechart"
colors="#880000,#cc4444,#ffaaaa" font-family="arial" font-size="25px"
id="pieChartExampleForLegend"
>
<infographic-data>
<infographic-pieslice value="10">Data 1</infographic-pieslice> 
<infographic-pieslice value="60">Data 2</infographic-pieslice>
<infographic-pieslice value="30">Data 3</infographic-pieslice>
</infographic-data>
</infographic-piechart>

<!-- Here's an inline legend for the piechart -->
<infographic-legend for="pieChartExampleForLegend" display="inline">
</infographic-legend>



Data 1
Data 2
Data 3