Accueil / Over 100 Shortcodes / Google Charts

Google Charts

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
[h3]Vertical Bar Chart[/h3] [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=”350×300″ 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”]

Get Code

Get Code

[pre] [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=”350×300″ 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”] [/pre]

[divider_top] [h3]Horizontal Bar Chart[/h3] [chart data=”100,50,115,80″ bg=”4D89F9″ labels=”1:|Python|Java|Ruby|.NET” colors=”4D89F9″ size=”550×230″ type=”bhg” advanced=”&chxr=0,0,120&chds=0,120&&chbh=35,0,15&chg=8.33,0,5,5″]

Get Code

Get Code

[pre] [chart data=”100,50,115,80″ bg=”4D89F9″ labels=”1:|Python|Java|Ruby|.NET” colors=”4D89F9″ size=”550×230″ type=”bhg” advanced=”&chxr=0,0,120&chds=0,120&&chbh=35,0,15&chg=8.33,0,5,5″] [/pre]

[divider_top] [h3]3D Pie Chart[/h3] [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=”650×250″ title=”Traffic Sources” type=”pie”]

Get Code

Get Code

[pre] [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=”650×250″ title=”Traffic Sources” type=”pie”][/pre]

[divider_top] [h3]Stacked Vertical Bar Chart[/h3] [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=”350×300″ 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″]

Get Code

Get Code

[pre] [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=”350×300″ 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″] [/pre]

[divider_top] [h3]Line Chart[/h3] [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=”630×250″ title=”Line Chart Title 2″ type=”xyline”]

Get Code

Get Code

[pre] [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=”630×250″ title=”Line Chart Title 2″ type=”xyline”] [/pre]

[divider_top] [h3]Scatter Chart[/h3] [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=”630×250″ title=”Scatter Chart Title” type=”scatter”]

Get Code

Get Code

[pre] [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=”630×250″ title=”Scatter Chart Title” type=”scatter”] [/pre]

[divider_top] [h3]2D Pie[/h3] [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=”488×200″ title=”Traffic Sources” type=”pie2d”]

Get Code

Get Code

[pre][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=”488×200″ title=”Traffic Sources” type=”pie2d”][/pre]

[divider_top] [h3]Gom Chart[/h3] [chart data=”40″ bg=”F7F9FA” labels=”Mula” colors=”058DC7,50B432,ED561B,EDEF00″ size=”488×200″ title=”Macbook Fund” type=”gom”]

Get Code

Get Code

[pre] [chart data=”40″ bg=”F7F9FA” labels=”Mula” colors=”058DC7,50B432,ED561B,EDEF00″ size=”488×200″ title=”Macbook Fund” type=”gom”] [/pre]

[divider_top] [h3]Venn Chart[/h3] [chart data=”100,80,60,30,30,30,10″ colors=”FF6342,ADDE63,63C6DE” bg=”bg,s,F7F9FA” size=”630×250″ title=”Chart Title” advanced=”&chdl=A|B|C” type=”venn”]

Get Code

Get Code

[pre] [chart data=”100,80,60,30,30,30,10″ colors=”FF6342,ADDE63,63C6DE” bg=”bg,s,F7F9FA” size=”630×250″ title=”Chart Title” advanced=”&chdl=A|B|C” type=”venn”] [/pre]

[divider_top]

Laisser une réponse

Votre adresse email ne sera pas publiée

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close