Chart.js is a simple graph tool that allows anyone with basic coding skills to produce interactive charts with very little coding. The following examples are made with a wordpress plugin that allows simple publishing of graphs.
Here is a link to the plugin:
There were some initial problems showing these graphs in this post. The problem happened in combination with THEMENAME and might not be relevant to you. The problem was that the headings (h2 elements) would all stick to the right of the screen and were not positioned along with their chart elments. This was fixed by giving each chart element an attribute for alignment:
IMPORTANT!
In each code example you can see it says ‘wwp_charts’. Every time you copy paste this code you have to remove a ‘w’ from wwp. The reason for adding a ‘w’ is that otherwise the code gets activated on the blog page and can’t be copied.
Pie chart
[wp_charts title=”Pie chart” type=”pie” height=”60px” width=”50%” align=”aligncenter” margin=”5px 20px” data=”10,32,50,25,5″]
Pie chart code:
Remember to remove a ‘w’ from ‘wwp’ after pasting!
<h2>Pie chart</h2>
<p>[wwp_charts title="Pie chart" type="pie" height="60px" width="50%" align="aligncenter" margin="5px 20px" data="10,32,50,25,5"]</p>Doughnut chart
[wp_charts title=”smultring” type=”doughnut” align=”aligncenter” margin=”5px 20px” data=”30,10,55,25,15,8″ height=”60px” width=”50% colors=”69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264″]
Doughnut chart code
Remember to remove a ‘w’ from ‘wwp’ after pasting!
<h2>Doughnut chart</h2>
<p>[wwp_charts title="smultring" type="doughnut" align="aligncenter" margin="5px 20px" data="30,10,55,25,15,8" height="60px" width="50% colors="69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"]</p>Polar chart
[wp_charts title=”mypolar” type=”polarArea” align=”aligncenter” margin=”5px 20px” height=”60px” width=”50% data=”40,32,5,25,50,45″ labels=”one,two,three,four,five,six”]
Polar chart code
Remember to remove a ‘w’ from ‘wwp’ after pasting!
[wwp_charts title="mypolar" type="polarArea" align="aligncenter" margin="5px 20px" height="60px" width="50% data="40,32,5,25,50,45" labels="one,two,three,four,five,six"]Bar chart
[wp_charts title=”barchart” type=”bar” align=”aligncenter” margin=”5px 20px” height=”60px” width=”50% datasets=”40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22″ labels=”one,two,three,four”]
Bar chart code
Remember to remove a ‘w’ from ‘wwp’ after pasting!
[wwp_charts title="barchart" type="bar" align="aligncenter" margin="5px 20px" height="60px" width="50% datasets="40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22" labels="one,two,three,four"]Line chart
[wp_charts title=”linechart” type=”line” align=”aligncenter” margin=”5px 20px” height=”60px” width=”50% datasets=”40,43,61,50 next 33,15,40,22″ labels=”one,two,three,four”]
Line chart code
Remember to remove a ‘w’ from ‘wwp’ after pasting!
[wwp_charts title="linechart" type="line" align="aligncenter" margin="5px 20px" height="60px" width="50% datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four"]Radar chart
[wp_charts title=”radarchart” type=”radar” align=”aligncenter” margin=”5px 20px” height=”60px” width=”50% datasets=”20,22,40,25,55 next 15,20,30,40,35″ labels=”one,two,three,four,five” colors=”#CEBC17,#CE4264″]
Radar chart code
Remember to remove a ‘w’ from ‘wwp’ after pasting!
[wwp_charts title="radarchart" type="radar" align="aligncenter" margin="5px 20px" height="60px" width="50% datasets="20,22,40,25,55 next 15,20,30,40,35" labels="one,two,three,four,five" colors="#CEBC17,#CE4264"]