Here is a Nice jQuery Plugin Which Can Convert Data to Inline SVG Pie, Line or Bar Chart in Very Easy to Follow Steps. Here are Some Details. In certain type of weblogs or webpages, it is quite important to show SVG Pie, Line or Bar Chart inline, the method must have cross browser compatibility, cross operating system compatibility and multi device support. As can be guessed, this jQuery Plugin to Convert Data to Inline SVG Pie, Line or Bar Chart not only fulfills these criterion but also is free.
Peity : The jQuery Plugin to Convert Data to Inline SVG Pie, Line or Bar Chart
Peity is the name of the jQuery Plugin and here is the official repository :
1 | https://github.com/benpickles/peity |
Actually the repository looks bigger but the jQuery, even not in minified form is not very bigger – https://gist.github.com/AbhishekGhosh/9900038. Including the script here would convert the guide to relatively difficult to read. As you can see, there are explicit values :
---
1 | fill: ["#ff9900", "#fff4dd", "#ffc66e"] |
which obviously can be changed according to your need. If you use data attributes, Peity will apply their values to the defaults with the same names automatically, that way is more easy.
Demonstration of the jQuery Plugin to Convert Data to Inline SVG Pie, Line or Bar Chart
Excellent documentation and live examples can be seen here :
1 | http://benpickles.github.io/peity/ |
Just include the span class as your data :
1 | <span class="bar">5,3,9,6,5,9,7,3,5,2</span> |
and include the jQuery Plugin and you will get the nice result. So, actually 3 Js are required :
1 2 3 | //your.cdn.com/jquery/1.6.2/jquery.min.js //your.cdn.com/jquery.peity.js //your.domain.com/ |
