Step1->include google apic
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Sales Amount');
data.addColumn('number', 'Quantity Sold');
//["Sale date", sale amount,sale quantity]
data.addRows([["2013-06-05", 14.95, 1],["2013-06-07", 29.9, 2],["2013-06-11", 14.95, 1],["2013-06-13", 30, 3],["2013-06-17", 19.9, 2],["2013-06-18", 14.95, 1],["2013-06-19", 0.2, 2],["2013-06-20", 88.85, 9],["2013-06-21", 117.1, 16],["2013-06-22", 71.8, 7],["2013-06-24", 164.45, 11],["2013-06-25", 492.95, 42],["2013-06-26", 271.85, 30],["2013-06-27", 95.95, 13],["2013-06-28", 52.9, 5],["2013-06-29", 14.95, 1]]);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div_2'));
chart.draw(data, {width: 650, height: 240, title: 'Sale Amount and Quantity Sold by Date', colors:['#3366CC','#9AA2B4','#FFE1C9'],
hAxis: {title: 'Date', titleTextStyle: {color: 'black'}}
});
}
</script>
<div id="chart_div_2"></div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Products');
data.addColumn('number', 'Numbers');
data.addRows([
[""The Map" Webinar Series", 3],["The “One Minute Manifestor” Audio Technique ", 1],[""Life On Planet Earth: A User's Manual" (E-Book)", 125],["The Map: To Our Responsive Universe, Where Dreams Really Do Come True!", 3],[""Conscious Creation" Inspiration Cards", 10],["Live a Life You Love Vneck TShirt", 48], ]);
// Set chart options
var options = {'title':'Product Sale Quantity Stats',
'width':450,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div_1'));
chart.draw(data, options);
}
</script>
<div id="chart_div_1"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Sales Amount');
data.addColumn('number', 'Quantity Sold');
//["Sale date", sale amount,sale quantity]
data.addRows([["2013-06-05", 14.95, 1],["2013-06-07", 29.9, 2],["2013-06-11", 14.95, 1],["2013-06-13", 30, 3],["2013-06-17", 19.9, 2],["2013-06-18", 14.95, 1],["2013-06-19", 0.2, 2],["2013-06-20", 88.85, 9],["2013-06-21", 117.1, 16],["2013-06-22", 71.8, 7],["2013-06-24", 164.45, 11],["2013-06-25", 492.95, 42],["2013-06-26", 271.85, 30],["2013-06-27", 95.95, 13],["2013-06-28", 52.9, 5],["2013-06-29", 14.95, 1]]);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div_2'));
chart.draw(data, {width: 650, height: 240, title: 'Sale Amount and Quantity Sold by Date', colors:['#3366CC','#9AA2B4','#FFE1C9'],
hAxis: {title: 'Date', titleTextStyle: {color: 'black'}}
});
}
</script>
<div id="chart_div_2"></div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Products');
data.addColumn('number', 'Numbers');
data.addRows([
[""The Map" Webinar Series", 3],["The “One Minute Manifestor” Audio Technique ", 1],[""Life On Planet Earth: A User's Manual" (E-Book)", 125],["The Map: To Our Responsive Universe, Where Dreams Really Do Come True!", 3],[""Conscious Creation" Inspiration Cards", 10],["Live a Life You Love Vneck TShirt", 48], ]);
// Set chart options
var options = {'title':'Product Sale Quantity Stats',
'width':450,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div_1'));
chart.draw(data, options);
}
</script>
<div id="chart_div_1"></div>
No comments:
Post a Comment