Google Charts

Sometimes, you just need to display some statistics in a more graphical way and charts are usually the way to go. And Visual Composer Extensions got you covered there. By hooking into the Google Charts API, you can easily display some basic (or not so basic) charts on your site without the need for any additional plugins. The only important thing is to correctly provide the chart data, which is why examples for the data format are given for each chart.

[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • Enter data directly into element or use Google Spreadsheet as data source
  • Provide optional image version of chart as download / save option (except for Organization Chart)
  • Multiple chart options available
  • Assign custom colors
  • Fully responsive

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Pie Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”UGll”]
[TS-VCSC-Google-Charts chart_image=”true” chart_title=”Sample Pie Chart Title” chart_pie_data=”(‘Task’, ‘Hours per Day’), (‘Work’, 11), (‘Sleep’, 7), (‘Eat’, 2), (‘Commute’, 3)” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true”]
[TS-VCSC-Google-Charts chart_image=”true” chart_title=”Sample Pie Chart Title” chart_pie_3d=”false” chart_pie_data=”(‘Task’, ‘Hours per Day’), (‘Work’, 11), (‘Sleep’, 7), (‘Eat’, 2), (‘Commute’, 3)” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3VGFzayUyNyUyQyUyMCUyN0hvdXJzJTIwcGVyJTIwRGF5JTI3JTI5JTJDJTIwJTI4JTI3V29yayUyNyUyQyUyMDExJTI5JTJDJTIwJTI4JTI3U2xlZXAlMjclMkMlMjA3JTI5JTJDJTIwJTI4JTI3RWF0JTI3JTJDJTIwMiUyOSUyQyUyMCUyOCUyN0NvbW11dGUlMjclMkMlMjAzJTI5″]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Donut Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RG9udXQ=” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”donut” chart_image=”true” chart_title=”Sample Donut Chart Title” chart_donut_data=”(‘Task’, ‘Hours per Day’), (‘Work’, 11), (‘Sleep’, 7), (‘Eat’, 2), (‘Commute’, 3)” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3VGFzayUyNyUyQyUyMCUyN0hvdXJzJTIwcGVyJTIwRGF5JTI3JTI5JTJDJTIwJTI4JTI3V29yayUyNyUyQyUyMDExJTI5JTJDJTIwJTI4JTI3U2xlZXAlMjclMkMlMjA3JTI5JTJDJTIwJTI4JTI3RWF0JTI3JTJDJTIwMiUyOSUyQyUyMCUyOCUyN0NvbW11dGUlMjclMkMlMjAzJTI5″ el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Bar Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QmFy” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”bar” chart_image=”true” chart_title=”Sample Bar Chart Title” chart_bar_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_bar_vertical=”Year” chart_bar_horizontal=”Amount” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”][TS-VCSC-Google-Charts chart_type=”bar” chart_image=”true” chart_title=”Sample Bar Chart Title” chart_bar_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_bar_stack=”true” chart_bar_vertical=”Year” chart_bar_horizontal=”Amount” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3WWVhciUyNyUyQyUyMCUyN1NhbGVzJTI3JTJDJTIwJTI3RXhwZW5zZXMlMjclMjklMkMlMjglMjcyMDA0JTI3JTJDJTIwMTAwMCUyQyUyMDQwMCUyOSUyQyUyOCUyNzIwMDUlMjclMkMlMjAxMTcwJTJDJTIwNDYwJTI5JTJDJTI4JTI3MjAwNiUyNyUyQyUyMDY2MCUyQyUyMDExMjAlMjklMkMlMjglMjcyMDA3JTI3JTJDJTIwMTAzMCUyQyUyMDU0MCUyOQ==” el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Column Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Q29sdW1u” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”column” chart_image=”true” chart_title=”Sample Column Chart Title” chart_column_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”][TS-VCSC-Google-Charts chart_type=”column” chart_image=”true” chart_title=”Sample Column Chart Title” chart_column_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_column_stack=”true” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3WWVhciUyNyUyQyUyMCUyN1NhbGVzJTI3JTJDJTIwJTI3RXhwZW5zZXMlMjclMjklMkMlMjglMjcyMDA0JTI3JTJDJTIwMTAwMCUyQyUyMDQwMCUyOSUyQyUyOCUyNzIwMDUlMjclMkMlMjAxMTcwJTJDJTIwNDYwJTI5JTJDJTI4JTI3MjAwNiUyNyUyQyUyMDY2MCUyQyUyMDExMjAlMjklMkMlMjglMjcyMDA3JTI3JTJDJTIwMTAzMCUyQyUyMDU0MCUyOQ==” el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Line Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”TGluZQ==” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”line” chart_image=”true” chart_title=”Sample Line Chart Title” chart_line_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_line_vertical=”Amount” chart_line_horizontal=”Year” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”][TS-VCSC-Google-Charts chart_type=”line” chart_image=”true” chart_title=”Sample Line Chart Title” chart_line_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_line_curved=”true” chart_line_vertical=”Amount” chart_line_horizontal=”Year” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3WWVhciUyNyUyQyUyMCUyN1NhbGVzJTI3JTJDJTIwJTI3RXhwZW5zZXMlMjclMjklMkMlMjglMjcyMDA0JTI3JTJDJTIwMTAwMCUyQyUyMDQwMCUyOSUyQyUyOCUyNzIwMDUlMjclMkMlMjAxMTcwJTJDJTIwNDYwJTI5JTJDJTI4JTI3MjAwNiUyNyUyQyUyMDY2MCUyQyUyMDExMjAlMjklMkMlMjglMjcyMDA3JTI3JTJDJTIwMTAzMCUyQyUyMDU0MCUyOQ==” el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Area Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QXJlYQ==” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”area” chart_image=”true” chart_title=”Sample Area Chart Title” chart_area_data=”(‘Year’, ‘Sales’, ‘Expenses’),(‘2004’, 1000, 400),(‘2005’, 1170, 460),(‘2006’, 660, 1120),(‘2007’, 1030, 540)” chart_area_vertical=”Year” chart_area_horizontal=”Amount” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3WWVhciUyNyUyQyUyMCUyN1NhbGVzJTI3JTJDJTIwJTI3RXhwZW5zZXMlMjclMjklMkMlMjglMjcyMDA0JTI3JTJDJTIwMTAwMCUyQyUyMDQwMCUyOSUyQyUyOCUyNzIwMDUlMjclMkMlMjAxMTcwJTJDJTIwNDYwJTI5JTJDJTI4JTI3MjAwNiUyNyUyQyUyMDY2MCUyQyUyMDExMjAlMjklMkMlMjglMjcyMDA3JTI3JTJDJTIwMTAzMCUyQyUyMDU0MCUyOQ==” el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Geo Map Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”R2VvJTJDJTIwTWFw” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”geo” chart_image=”true” chart_title=”Sample Geo Map Chart Title” chart_geo_data=”(‘Country’, ‘Popularity’),(‘Germany’, 300),(‘United States’, 300),(‘Brazil’, 600),(‘Canada’, 250),(‘France’, 400),(‘Russia’, 800)” chart_geo_colorstart=”#0050ff” chart_geo_colorend=”#b3e1fc” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3Q291bnRyeSUyNyUyQyUyMCUyN1BvcHVsYXJpdHklMjclMjklMkMlMjglMjdHZXJtYW55JTI3JTJDJTIwMzAwJTI5JTJDJTI4JTI3VW5pdGVkJTIwU3RhdGVzJTI3JTJDJTIwMzAwJTI5JTJDJTI4JTI3QnJhemlsJTI3JTJDJTIwNjAwJTI5JTJDJTI4JTI3Q2FuYWRhJTI3JTJDJTIwMjUwJTI5JTJDJTI4JTI3RnJhbmNlJTI3JTJDJTIwNDAwJTI5JTJDJTI4JTI3UnVzc2lhJTI3JTJDJTIwODAwJTI5″ el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Combination Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Q29tYmluYXRpb24=” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”combo” chart_image=”true” chart_title=”Monthly Coffee Production by Country” chart_combo_data=”(‘Month’,’Bolivia’,’Ecuador’,’Madagascar’,’Papua New Guinea’,’Rwanda’,’Average’), (‘2004/05’,165,938,522,998,450,614.6), (‘2005/06’,135,1120,599,1268,288,682), (‘2006/07’,157,1167,587,807,397,623), (‘2007/08’,139,1110,615,968,215,609.4), (‘2008/09’,136,691,629,1026,366,569.6)” chart_combo_vertical=”Cups” chart_combo_horizontal=”Month” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3TW9udGglMjclMkMlMjdCb2xpdmlhJTI3JTJDJTI3RWN1YWRvciUyNyUyQyUyN01hZGFnYXNjYXIlMjclMkMlMjdQYXB1YSUyME5ldyUyMEd1aW5lYSUyNyUyQyUyN1J3YW5kYSUyNyUyQyUyN0F2ZXJhZ2UlMjclMjklMkMlMjAlMjglMjcyMDA0JTJGMDUlMjclMkMxNjUlMkM5MzglMkM1MjIlMkM5OTglMkM0NTAlMkM2MTQuNiUyOSUyQyUyMCUyOCUyNzIwMDUlMkYwNiUyNyUyQzEzNSUyQzExMjAlMkM1OTklMkMxMjY4JTJDMjg4JTJDNjgyJTI5JTJDJTIwJTI4JTI3MjAwNiUyRjA3JTI3JTJDMTU3JTJDMTE2NyUyQzU4NyUyQzgwNyUyQzM5NyUyQzYyMyUyOSUyQyUyMCUyOCUyNzIwMDclMkYwOCUyNyUyQzEzOSUyQzExMTAlMkM2MTUlMkM5NjglMkMyMTUlMkM2MDkuNCUyOSUyQyUyMCUyOCUyNzIwMDglMkYwOSUyNyUyQzEzNiUyQzY5MSUyQzYyOSUyQzEwMjYlMkMzNjYlMkM1NjkuNiUyOQ==” el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Organization Chart” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”T3JnYW5pemF0aW9u” el_file1=”” el_file2=””][TS-VCSC-Google-Charts chart_type=”org” chart_title=”Corporate Structure” chart_org_data=”(‘Name’,’Manager’,’Tooltip’),(‘Mike Smith’,null,’CEO’),( ‘Jim Miller’, ‘Mike Smith’,’CFO’),(‘Alice White’, ‘Mike Smith’,’COO’), (‘Candice Greer’, ‘Mike Smith’,’CAO’),(‘Robert Evans’,’Jim Miller’,”),(‘Janet Bergen’, ‘Robert Evans’,”),(‘Leslie Gray’, ‘Robert Evans’,”)” trend_height=”400″ trend_width=”1024″ trend_average=”false” trend_geo=”US” chart_3d=”true” chart_data_pie=”(“Task“, “Hours per Day“), (“Work“, 11), (“Sleep“, 7), (“Eat“, 2), (“Commute“, 3)” chart_bar_vaxis=”Year” chart_bar_haxis=”Amount”]

Enter data as follows:

[TS_EnlighterJS_Snippet_Single code_type=”json” code_content=”JTI4JTI3TmFtZSUyNyUyQyUyN01hbmFnZXIlMjclMkMlMjdUb29sdGlwJTI3JTI5JTJDJTI4JTI3TWlrZSUyMFNtaXRoJTI3JTJDbnVsbCUyQyUyN0NFTyUyNyUyOSUyQyUyOCUyMCUyN0ppbSUyME1pbGxlciUyNyUyQyUyMCUyN01pa2UlMjBTbWl0aCUyNyUyQyUyN0NGTyUyNyUyOSUyQyUyOCUyN0FsaWNlJTIwV2hpdGUlMjclMkMlMjAlMjdNaWtlJTIwU21pdGglMjclMkMlMjdDT08lMjclMjklMkMlMjAlMjglMjdDYW5kaWNlJTIwR3JlZXIlMjclMkMlMjAlMjdNaWtlJTIwU21pdGglMjclMkMlMjdDQU8lMjclMjklMkMlMjglMjdSb2JlcnQlMjBFdmFucyUyNyUyQyUyN0ppbSUyME1pbGxlciUyNyUyQyUyNyUyNyUyOSUyQyUyOCUyN0phbmV0JTIwQmVyZ2VuJTI3JTJDJTIwJTI3Um9iZXJ0JTIwRXZhbnMlMjclMkMlMjclMjclMjklMkMlMjglMjdMZXNsaWUlMjBHcmF5JTI3JTJDJTIwJTI3Um9iZXJ0JTIwRXZhbnMlMjclMkMlMjclMjclMjk=” el_file=””]