You need to use a single call to google.load; extra calls do nothing. You
should also have a single call to google.setOnLoadCallback, instead of
multiple calls. All you need is this:
google.load('visualization', '1.1', {packages: ['controls']});
google.setOnLoadCallback(function(){
drawVisualization1();
drawChart();
});
I suggest loading version 1 (production) instead of 1.1 (release
candidate), unless you have some specific need to load the RC version.
Also, in your HTML, you have elements with duplicate ID's, which is not
allowed. Your chart code uses the same id's for both, so the charts in
drawVisualization will be overwritten by the charts in drawChart, since
that is the order you are drawing them in. Each chart, control, and
Dashboard needs a unique element to draw in, and these elements must have
unique ID's.
On Monday, June 16, 2014 1:17:31 PM UTC-4, Lawrence Thibeault wrote:
>
> Hello i have tried this solution on a group of charts i currently have
> working(2 at the moment).
> depending on what Function i have at the end of the statement, a different
> chart shows on the page.
> i cannot get both charts to show up, however i believe my chart code is
> sound. as they will both show up.
> any help you can give is very welcome.
>
> here is the code i am using(CF Query for chart data)
>
> <cfquery name="Get_Metrics" datasource="woms">
> SELECT *
> FROM Tickets
> </cfquery>
>
> <cfquery name="GetOpen" dbtype="query">
> SELECT Count (Class), class
> FROM get_Metrics
> where status = 'open'
> GROUP BY Class
> order by Class
> </cfquery>
>
>
>
> <cfoutput>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1.1', {packages: ['controls']});
> </script>
> <script type="text/javascript">
>
> function drawChart() {
> // Prepare the data
> var data = google.visualization.arrayToDataTable([
> ['Class', 'Count'],
> <cfloop query="GetOpen">
> ['#class#' , #Column_0#],
>
> </cfloop>
> ]);
>
> // Define a slider control for the 'Count' column
> var slider = new google.visualization.ControlWrapper({
> 'controlType': 'NumberRangeFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Count',
> 'ui': {'labelStacking': 'vertical'}
> }
> });
>
> // Define a pie chart
> var piechart = new google.visualization.ChartWrapper({
> 'chartType': 'PieChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': 600,
> 'height': 300,
> 'legend': 'bottom',
> 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
> 'pieSliceText': 'value'
> }
> });
>
> // Create the dashboard.
> new
> google.visualization.Dashboard(document.getElementById('OpenTickets')).
> // Configure the slider to affect the piechart
> bind(slider, piechart).
> // Draw the dashboard
> draw(data);
> }
>
> </script>
> </cfoutput>
>
> <!--- Dashboard Test --->
> <cfquery name="GetClosed" dbtype="query">
> SELECT Count (Class), class
> FROM get_Metrics
> where status not in('Open', 'Not Visited', 'Pending')
> GROUP BY Class
> order by Class
> </cfquery>
>
> <!--- <cfdump var="#GetClosed#"> --->
>
> <cfoutput>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1.1', {packages: ['controls']});
> </script>
> <script type="text/javascript">
> function drawVisualization1() {
> // Prepare the data
> var data = google.visualization.arrayToDataTable([
> ['Type', 'Count'],
> <cfloop query="GetClosed">
> ['#class#' , #Column_0#],
> </cfloop>
> ]);
>
> // Define a slider control for the 'Count' column
> var slider = new google.visualization.ControlWrapper({
> 'controlType': 'NumberRangeFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Count',
> 'ui': {'labelStacking': 'vertical'}
> }
> });
>
> // Define a pie chart
> var piechart = new google.visualization.ChartWrapper({
> 'chartType': 'PieChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': 600,
> 'height': 400,
> 'legend': 'right',
> is3D: true,
> 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
> title: 'Closed Tickets',
> 'pieSliceText': 'value'
> }
> });
> // Define a category picker for the 'Metric' column.
> var categoryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Type',
> 'ui': {
> 'allowTyping': false,
> 'allowMultiple': true,
> 'selectedValuesLayout': 'belowStacked'
> }
> },
> // Define an initial state, i.e. a set of metrics to be initially
> selected.
>
>
> <!--- 'state': {'selectedValues':
> [<cfloop>'#getclosed.class#'</cfloop>]} --->
>
> });
> // Create the dashboard.
> new
> google.visualization.Dashboard(document.getElementById('Closed_Tickets')).
> // Configure the slider to affect the piechart
> bind(slider, piechart).
> // Draw the dashboard
> bind(categoryPicker, piechart).
> draw(data);
> }
>
>
>
> </script>
> </cfoutput>
> <!--- <script type="text/javascript">
> google.setOnLoadCallback(drawVisualization1);
>
> </script> --->
>
> <script type="text/javascript">
>
> google.setOnLoadCallback(function(){drawVisualization1(),drawChart();});
>
> </script>
>
> </head>
> <center>
> <body style="font-family: Arial;border: 0 none;">
> <div id="Closed_Tickets">
> <table>
> <tr style='vertical-align: center'>
> <td style='width: 300px; font-size: 0.9em;'>
> <div id="control1"></div>
> <div id="control2"></div>
> <div id="control3"> </div>
> </td>
>
> <td style='width: 600px'>
> <div style="float: left;" id="chart1"></div>
> <div style="float: left;" id="chart2"></div>
> <div style="float: left;" id="chart3"></div>
> </td>
> </tr>
> </table>
> </div></center>
>
> <br>
> <br>
> <div id="OpenTickets">
> <table>
> <tr style='vertical-align: top'>
> <td style='width: 300px; font-size: 0.9em;'>
> <div id="control1"></div>
> <div id="control2"></div>
> <div id="control3"></div>
> </td>
> <td style='width: 600px'>
> <div style="float: left;" id="chart1"></div>
> <div style="float: left;" id="chart2"></div>
> <div style="float: left;" id="chart3"></div>
> </td>
> </tr>
> </table>
> </div>
>
>
>
>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
