Visit or Review Us On Angie's List
Built-in theme shortcode allow to insert Google charts in your posts or pages. The Google Charts is extremely simple way to create charts from some data and embed it in a website. Here are some examples of usage.
| In addition to the basic attributes in shortcode is also used advanced attribute that can be used to deliver any advanced parameters with the syntax described in the documentation of the Google Chart API |
Vertical Bar Chart
Get Code
[chart data="20,35,10" bg="4D89F9" labels="0:|High|Medium|Low|2:||Task+Priority||" title="Tasks+on+my+To+Do+list" colors="ff0000|ffa000|00ff00" size="350x300" type="bvg" advanced="&chxr=1,0,40&chds=0,40&chxs=2,000000,12&chts=000000,20&chg=0,25,5,5&chbh=65,0,35&chxt=x,y,x"]
Horizontal Bar Chart
Get Code
[chart data="100,50,115,80" bg="4D89F9" labels="1:|Python|Java|Ruby|.NET" colors="4D89F9" size="550x230" type="bhg" advanced="&chxr=0,0,120&chds=0,120&&chbh=35,0,15&chg=8.33,0,5,5"]
3D Pie Chart
Get Code
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="650x250" title="Traffic Sources" type="pie"]
Stacked Vertical Bar Chart
Get Code
[chart data="20,35,10,5|30,55,25,0|5,25,5,5" bg="4D89F9" labels="0:|Pizza|Pasta|Pide|Salad" colors="0A8C8A,EBB671,DE091A" size="350x300" type="bvs" advanced="&chdl=Large|Medium|Small&chg=0,8.3,5,5&chxt=x,y&chxr=1,0,120&chds=0,120&chbh=45,20,15"]
Line Chart
Get Code
[chart data="0,25,50,75,100|2,33,43,17,25|0,25,50,75,100|0,20,25,40,75" labels="Begin|25|50|75|End" colors="058DC7,50B432" bg="bg,s,ffffff" size="630x250" title="Line Chart Title 2" type="xyline"]
Scatter Chart
Get Code
[chart data="0,10,20,30,40,50,60,70,80,90,100|50,52,56,63,70,80,92,85,75,60,43" labels="1|2|3|4|5|6|7|8|9|10" colors="058DC7" bg="bg,s,ffffff" size="630x250" title="Scatter Chart Title" type="scatter"]
2D Pie
Get Code
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie2d"]
Gom Chart
Get Code
[chart data="40" bg="F7F9FA" labels="Mula" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Macbook Fund" type="gom"]
Venn Chart
Get Code
[chart data="100,80,60,30,30,30,10" colors="FF6342,ADDE63,63C6DE" bg="bg,s,F7F9FA" size="630x250" title="Chart Title" advanced="&chdl=A|B|C" type="venn"]