Google charts provides a better way to visualize website data on your website. The chart gallery provides a very large number of ready to use chart types from simple line charts to hierarchical tree maps.
To integrate Google Charts you need to embed JavaScript in your webpage.
The process is very simple. Just load Google Chart libraries, list data on the chart, customize your chart options and finally create a object with the id you choose. At last, in your webpage, create a <div> with that id and display the Google Chart with your mentioned data.
Google Chart types:
- Pie Chart
- Line Chart
- Column Chart
- Area Chart
- Tree Map
- Controls and Dashboards
Example:
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]}); google.setOnLoadCallback(drawChartPie); function drawChartPie() {
var row = $.parseJSON(‘{“0”:{“title”:”PHP”,”count”:”2″},”1″:{“title”:”JQUERY”,”count”:”4″},”2″:{“title”:”HTML”,”count”:”3″},”3″:{“title”:”CSS”,”count”:”2″},”total”:4}’);
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ”);
data.addColumn(‘number’, ”);
data.addRows(row.total);
$.each(row, function(index, val) {
$.each(val, function(key, value) {
if(key == ‘title’) {
data.setValue(parseInt(index), 0, value +’ (‘+ row[index].count +’)’ );
}
if(key == ‘count’) {
data.setValue(parseInt(index), 1, parseInt(value));
}
});
});
var options = { title: ‘Google Chart’, colors: [‘#e0440e’, ‘#e6693e’, ‘#ec8f6e’, ‘#f3b49f’, ‘#f6c7b6’], is3D: false, height:500, width:500 };
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’)); chart.draw(data, options);
}
</script>
<div id=”chart_div” style=”width:50%;”></div>
Ready to create your first Google Chart? Visit the quickstart.
Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.