You need to sign in to do that
Don't have an account?
rohitr
Draw 2 charts in a VF page using Google Charts
Hi,
I've created a VF page where i'm suing google charts API.
Source of my information :http://developer.force.com/cookbook/recipe/easy-visualforce-charts-with-javascript-remoting--google-charts-api
Is it possible to have 2 charts on the same page?
Thanks in Advance,
Rohit
// create div to show google chart
<apex:form >
<!--<apex:sectionHeader title="Opportunity Analysis based on Stage"/>-->
<div id="chart_div" style="width: 400px; height: 400px;chco=FFC6A5|FFFF42|DEF3BD"></div>
//create one more div
<div id="chart_div1" style="width: 400px; height: 400px;chco=FFC6A5|FFFF42|DEF3BD"></div>
</apex:form>
// script link for google chart.....
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
google.load('visualization', '2', {'packages':['corechart']});
google.load('visualization', '3', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
write one more function
google.setOnLoadCallback(drawChart1);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it. ------------you can make other chart also
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Stage8: Closed Dropped', {!dropped }],
['Stage8: Closed Won',{!closedwon }],
['Stage8: Closed Lost', {!closedlost }],
]);
// create one more function
function drawChart1() {
// Create our data table.
var data = new google.visualization.DataTable1();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Red', {!dropped }],
['Yellow',{!closedwon }],
['Orange', {!closedlost }],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
for second chart
var chart 1= new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, {title:"Win/Loss/Abadoned Analysis",width: 400, height: 400,is3D : true});
call second time
chart1.draw(data, {title:"Win/Loss/Abadoned Analysis",width: 400, height: 400,is3D : true});
}
</script>
All Answers
This may help you....
// create div to show google chart
<apex:form >
<!--<apex:sectionHeader title="Opportunity Analysis based on Stage"/>-->
<div id="chart_div" style="width: 400px; height: 400px;chco=FFC6A5|FFFF42|DEF3BD"></div>
</apex:form>
// script link for google chart.....
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
google.load('visualization', '2', {'packages':['corechart']});
google.load('visualization', '3', {'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. ------------you can make other chart also
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Stage8: Closed Dropped', {!dropped }],
['Stage8: Closed Won',{!closedwon }],
['Stage8: Closed Lost', {!closedlost }],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {title:"Win/Loss/Abadoned Analysis",width: 400, height: 400,is3D : true});
}
</script>
if it's solution for you please mark as solution.
Thanks. It really helped me.
But, now that i have 2 charts in a single page. One above the other.
I need to display them side by side.
Is there any work around.
Thanks in Advance,
Rohit R
// create div to show google chart
<apex:form >
<!--<apex:sectionHeader title="Opportunity Analysis based on Stage"/>-->
<div id="chart_div" style="width: 400px; height: 400px;chco=FFC6A5|FFFF42|DEF3BD"></div>
//create one more div
<div id="chart_div1" style="width: 400px; height: 400px;chco=FFC6A5|FFFF42|DEF3BD"></div>
</apex:form>
// script link for google chart.....
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
google.load('visualization', '2', {'packages':['corechart']});
google.load('visualization', '3', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
write one more function
google.setOnLoadCallback(drawChart1);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it. ------------you can make other chart also
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Stage8: Closed Dropped', {!dropped }],
['Stage8: Closed Won',{!closedwon }],
['Stage8: Closed Lost', {!closedlost }],
]);
// create one more function
function drawChart1() {
// Create our data table.
var data = new google.visualization.DataTable1();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Red', {!dropped }],
['Yellow',{!closedwon }],
['Orange', {!closedlost }],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
for second chart
var chart 1= new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, {title:"Win/Loss/Abadoned Analysis",width: 400, height: 400,is3D : true});
call second time
chart1.draw(data, {title:"Win/Loss/Abadoned Analysis",width: 400, height: 400,is3D : true});
}
</script>
Did you ever get your side by side thing figured out? I am having the same issue :(
Glad of any help...
You can use html <table> and then in a single row. u can have have two columns each coloum carrying the div id
<table>
<tr>
<td>chart1</td>
<td>chart2</td>
</tr>
</table>