Hi, i want to display 2 charts in same page, but when i try to run, just
only 1 chart can display... i had changed the element id's, did i miss
something ???
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData =$.ajax({
url: "goo2.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 3; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
title: 'Foobar',
width: 600,
height: 400
},
view: {
columns: [2, 3, 4, 5, 6, 7]
}
});
var SubjectFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SubjectFilter_div',
options: {
filterColumnLabel: 'Subject',
ui: {
label: 'Subject',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var SemesterFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SemesterFilter_div',
options: {
filterColumnLabel: 'Semester',
ui: {
label: 'Semester',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var CategoryFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'CategoryFilter_div',
options: {
filterColumnLabel: 'Category',
ui: {
label: 'Category',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dash_div'));
dashboard.bind([SemesterFilter], [SubjectFilter]);
dashboard.bind([SubjectFilter], [CategoryFilter]);
dashboard.bind([CategoryFilter], [chart]);
dashboard.draw(data);
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: talse,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
google.visualization.events.addListener(columnFilter, 'statechange',
function () {
var state = columnFilter.getState();
var row;
var columnIndices = [2];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value:
state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
columnIndices.sort(function (a, b) {
return (a - b);
});
chart.setView({columns: columnIndices});
chart.draw();
});
columnFilter.draw();
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div1',
options: {
title: 'Foobar',
width: 600,
height: 400
},
view: {
columns: [2, 3, 4, 5, 6, 7]
}
});
var SubjectFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SubjectFilter_div1',
options: {
filterColumnLabel: 'Subject',
ui: {
label: 'Subject',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var SemesterFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'SemesterFilter_div1',
options: {
filterColumnLabel: 'Semester',
ui: {
label: 'Semester',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var CategoryFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'CategoryFilter_div1',
options: {
filterColumnLabel: 'Category',
ui: {
label: 'Category',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dash_div1'));
dashboard.bind([SemesterFilter], [SubjectFilter]);
dashboard.bind([SubjectFilter], [CategoryFilter]);
dashboard.bind([CategoryFilter], [chart]);
dashboard.draw(data);
var columnFilter1 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div1',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: talse,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
google.visualization.events.addListener(columnFilter1, 'statechange',
function () {
var state = columnFilter1.getState();
var row;
var columnIndices = [2];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value:
state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
columnIndices.sort(function (a, b) {
return (a - b);
});
chart.setView({columns: columnIndices});
chart.draw();
});
columnFilter1.draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dash_div">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="SemesterFilter_div" style="float: left;"></div>
<div id="SubjectFilter_div" style="float: left;"></div>
<div id="CategoryFilter_div" style="float: left;"></div>
<div id="colFilter_div" style="float: left;"></div>
<div style="clear: both;"></div>
<div id="chart_div"></div>
</td>
</tr>
</table>
</div>
<div id="dash_div1">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="SemesterFilter_div1" style="float: right;"></div>
<div id="SubjectFilter_div1" style="float: right;"></div>
<div id="CategoryFilter_div1" style="float: right;"></div>
<div id="colFilter_div1" style="float: right;"></div>
<div style="clear: both;"></div>
<div id="chart_div1" style="float: right;"></div>
</td>
</tr>
</table>
</div>
</body>
--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
