You need to sign in to do that
Don't have an account?
Best practice for multiple Googlecharts on VF page
Is there a way to insert separate Googlecharts as components into a visualforce page, something like using apex:include, so that I can develop each Googlechart as its separate page? I've tried using apex:include, but each chart simply renders on top of the last one.
Or is it necessary to include the visualization, etc. for each chart in the page header, and then call them separately in the body separated by <div> tags?
I hope that's not the only approach ... I'm trying to build a single VF page with ten or so charts embedded, and don't want have a humongous mess in the header.
Thanks for your advice,
Baird
Starz, thanks a ton for your suggestions. They pointed me right to the solution, which I found with help from BritishBoyinDC as well. Here's the gist of it:
Each one of my components was replacing the same <div id="visualization"> in this section:
What I needed to do was to create three <div>s with id "visualization1," "visualization2," and so on. Thus:
And then each component needs to insert the chart in a specific div:
The way Starz handled it was slightly different. He includes the line:
which creates the table itself, within the <table><tr><td></td></tr></table> structure. BritishBoyinDC points out that this is a simpler structure. Using the <div> tags allows for more formatting and manipulation.
Hope this helps someone else as they find their way through this,
Baird
All Answers
Sure....I have 3 across and 10 down in Google charts.
Here is a sample component to use:
and a snippet from the page:
Just placed in a table and use css to format
Thanks, Starz. It looks like what you're doing is more complex than my application. Let me give it a shot based on the code you sent. Baird
I've got the formatting, and have inserted the components. But when I put multiple components into the table format, they still render one on top of the other ... or, perhaps, only the last one renders. I wonder if my problem is in the script that I include in each component. Right now, my components look like this:
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Revenue'); // Implicit series 1 data col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['Your Organization',111371, false],
['Lowest in Group', 11298, true],
['Average for Group', 491853, true],
['Highest in Group', 1741692, true]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'How does your revenue compare to others in your comparison group?',
width: 600,
height: 400,
legend: {position: "none"},
seriesType: "bars",
series: {5: {type: "line"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
Am I including elements in the component that should be in the page header instead, or only referenced once?
I'm trying to keep it simple, not even using a controller, just to get the layout straight.
Above the table I have another graph, not in a component. I haven't been able to figure out which parts go in the component and which parts need to be in the HTML header. The whole page looks like this:
On this page, I only see the last component rendered. If I remove one, the previous one appears.
Here's the code I'm using for one of my components:
Thanks for your help with this.
Your element to palce the chart in needs to be in the component.....
If you look at mine the put the chart in the ID chart_div and I have that in the component not in the VF page
Starz, thanks a ton for your suggestions. They pointed me right to the solution, which I found with help from BritishBoyinDC as well. Here's the gist of it:
Each one of my components was replacing the same <div id="visualization"> in this section:
What I needed to do was to create three <div>s with id "visualization1," "visualization2," and so on. Thus:
And then each component needs to insert the chart in a specific div:
The way Starz handled it was slightly different. He includes the line:
which creates the table itself, within the <table><tr><td></td></tr></table> structure. BritishBoyinDC points out that this is a simpler structure. Using the <div> tags allows for more formatting and manipulation.
Hope this helps someone else as they find their way through this,
Baird
After this exchange, I still could not get multiple charts to post on one page using a structure like this:
I was attempting to reuse the component on a visualforce page, thus:
The problem, I eventually figured out, was that the second time I called the component, when it looked for the "visualization" div, it actually found the visualization div from the first time I had called the component, and overwrote that. This I verified.
BritishBoyinDC was able to dig into the page source code to see that Salesforce could actually differentiate between the two divs in the separate instances of the component. He came up with this fix, which uses a "
to specify the div within this particular component, and
to create a div where the component will render. Here's the entire component:
Baird
Or as in my code above,
simply place the chart div inside the component......