You have two lines (one in each column filter's options) that say
"allowMultiple:
talse," which should be "allowMultiple: false,". Changing "talse" to
"false" in both of those lines should fix the problem.
On Tuesday, April 9, 2013 2:09:59 PM UTC-4, kolo ken wrote:
>
> 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.
