Hi, I successfully managed to create two charts from the same json url onto one
html page. But now, I would like to add few more charts but from a different
json url. I have tried to do it but it was unsuccessful. However, creating
that chart alone was successful. I need guidance from expert. I will include
the successful codes with two charts in one html as below.
<?php
session_start();
?>
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/chart.css" rel="stylesheet">
<title>Reporting Dashboard</title>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js";></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Students Scorecard</h1>
<p><a href="deptmenu.php" class="btn btn-sm btn-default"
role="button">Department Menu</a></p>
<body style="font-family: Arial;border: 0 none;">
<div id="dash1_div">
<div id="YearFilter_div" style="float: left;"></div>
<div style="clear: both;"></div>
</div>
<div id="dashboard">
<table>
<td style='width: 600px'>
<div id="chart_div"></div>
</td>
<td></td>
<td style='width: 500px'>
<div id="piechart_div"></div>
</td>
</table>
</div>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData =$.ajax({
url: "get_json_bar.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 = 2; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var YearFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'YearFilter_div',
options: {
filterColumnLabel: 'year',
ui: {
label: 'Year',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart_div',
options: {
title: '% Students Employed According to Course
Relevancy',
width: 600,
height: 350
},
view: {
columns: [1,2,6,7]
}
});
var chart1 = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'piechart_div',
options: {
title: '% of Students Employed According to
Year',
width: 600,
height: 350,
is3D: true,
pieStartAngle: 100,
},
view: {
columns: [1,2]
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind([YearFilter], [chart,chart1]);
dashboard.draw(data);
}
</script>
</body>
</html>
Unsuccessful code shown below to combine all the three charts.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/chart.css" rel="stylesheet">
<title>Reporting Dashboard</title>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js";></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<h1>Students Scorecard</h1>
<p><a href="deptmenu.php" class="btn btn-sm btn-default"
role="button">Department Menu</a></p>
<body style="font-family: Arial;border: 0 none;">
<div id="dash1_div">
<div id="YearFilter_div" style="float: left;"></div>
<div id="YearFilter1_div" style="float: left;"></div>
<div id="DeptFilter1_div" style="float: left;"></div>
<div style="clear: both;"></div>
</div>
<div id="dashboard">
<table>
<tr>
<td style='width: 600px'>
<div id="chart_div"></div>
</td>
<td></td>
<td style='width: 500px'>
<div id="piechart_div"></div>
</td>
</tr>
<tr>
<td style='width: 600px'>
<div id="combochart_div"></div>
</td>
<tr>
</table>
</div>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart, drawChart1);
function drawChart() {
var jsonData =$.ajax({
url: "get_json_bar.php",
dataType:"json",
async: false
}).responseText
function drawChart1() {
var jsonData1 =$.ajax({
url: "get_json_app.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var data = new google.visualization.DataTable(jsonData1);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
var columnsTable1 = new google.visualization.DataTable1();
columnsTable1.addColumn('number', 'colIndex');
columnsTable1.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 2; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
// put the columns into this data table (skip column 0)
for (var i = 2; i < data.getNumberOfColumns(); i++) {
columnsTable1.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var YearFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'YearFilter_div',
options: {
filterColumnLabel: 'year',
ui: {
label: 'Year',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var YearFilter1 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'YearFilter1_div',
options: {
filterColumnLabel: 'year',
ui: {
label: 'Year',
allowTyping: false,
allowMultiple: false,
selectedValuesLayout: 'belowStacked'
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart_div',
options: {
title: '% Students Employed According to Course
Relevancy',
width: 600,
height: 350
},
view: {
columns: [1,2,6,7]
}
});
var chart1 = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'piechart_div',
options: {
title: '% of Students Employed According to
Year',
width: 600,
height: 350,
is3D: true,
pieStartAngle: 100,
},
view: {
columns: [1,2]
}
});
var chart2 = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'combochart_div',
options: {
title: 'Charts showing Applicants',
width: 600,
height: 350,
bar: {groupwidth: '50%'},
seriesType: "bars",
series: {7: {type: "line"}},
},
view: {
columns: [2,3,4,5,6,7,8]
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind([YearFilter, YearFilter1, DeptFilter],
[chart,chart1, chart2]);
dashboard.draw(data);
}
</script>
</body>
</html>
--
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.
