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.
