Hi Everyone,
I am trying to create function which create dynamic google chart but it
through error
Following is my code.
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control2">
</div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1">
</div>
</td>
</tr>
</table>
</div>
<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(chartData, chartType, title, columnOnChart,
filterColumnData, chartContainer) {
if (chartData.length > 0) {
// Prepare the data
var data =
window.google.visualization.arrayToDataTable(chartData);
var categoryPickerList = [];
jQuery.each(filterColumnData, function (id, val) {
// Define a category picker control for the Gender
column
var categoryPicker = new
window.google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': val,
'options': {
'filterColumnLabel': id,
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
categoryPickerList.push(categoryPicker);
});
// Define a Pie chart
var pie = new window.google.visualization.ChartWrapper({
'chartType': chartType,
'containerId': chartContainer,
'options': {
'width': 400,
'height': 400,
'legend': 'none',
'title': title,
'chartArea': { 'left': 15, 'top': 15, 'right': 0,
'bottom': 0 },
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3
(Donuts Eaten)
// from the 'data' DataTable.
'view': { 'columns': columnOnChart }
});
// Create a dashboard
new
window.google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and
the category
// picker will drive both charts.
bind(categoryPickerList, [pie]).
// Draw the entire dashboard.
draw(data);
}
}
drawChart([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
],
"PieChart", "Title", [0, 3],
{ control2: 'Gender' }, 'chart1');
</script>
thanks in advance
--
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.
