+ Start a Discussion
rohitrrohitr 

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

Best Answer chosen by Admin (Salesforce Developers) 
Shiv ShankarShiv Shankar

// 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

Shiv ShankarShiv Shankar

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.

rohitrrohitr

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

Shiv ShankarShiv Shankar

// 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>

This was selected as the best answer
Bryn JonesBryn Jones
Rohit R
Did you ever get your side by side thing figured out? I am having the same issue :(

Glad of any help...

rohitrrohitr
Hi brynjones,

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>