the following is the output for get_json_bar.php
{"cols":[{"label":"year","type":"string"},{"label":"coursecode","type":"string"},{"label":"employed","type":"number"},{"label":"further_study","type":"number"},{"label":"unemployed","type":"number"},{"label":"unknown","type":"number"},{"label":"related
job","type":"number"},{"label":"irrelevant
job","type":"number"}],"rows":[{"c":[{"v":"2010"},{"v":"NDRTE"},{"v":16},{"v":8},{"v":12},{"v":3},{"v":13},{"v":3}]},{"c":[{"v":"2010"},{"v":"NDAVN"},{"v":10},{"v":0},{"v":0},{"v":0},{"v":10},{"v":0}]},{"c":[{"v":"2010"},{"v":"NDAIR"},{"v":10},{"v":0},{"v":0},{"v":0},{"v":10},{"v":0}]},{"c":[{"v":"2011"},{"v":"NDMEC"},{"v":4},{"v":2},{"v":1},{"v":0},{"v":1},{"v":3}]},{"c":[{"v":"2011"},{"v":"NDCTN"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"2009"},{"v":"ndilm"},{"v":6},{"v":6},{"v":6},{"v":0},{"v":6},{"v":6}]},{"c":[{"v":"2009"},{"v":"NDAUT"},{"v":20},{"v":12},{"v":1},{"v":0},{"v":2},{"v":2}]},{"c":[{"v":"2009"},{"v":"ndcst"},{"v":4},{"v":4},{"v":4},{"v":0},{"v":4},{"v":4}]}]}
below is the output for get_json_app.php
{"cols":[{"label":"deptid","type":"number"},{"label":"year","type":"string"},{"label":"coursecode","type":"string"},{"label":"places","type":"number"},{"label":"applied","type":"number"},{"label":"eligible","type":"number"},{"label":"reject","type":"number"},{"label":"accept","type":"number"},{"label":"reserve","type":"number"}],"rows":[{"c":[{"v":"CIT"},{"v":"2009"},{"v":"NDCST"},{"v":32},{"v":90},{"v":50},{"v":2},{"v":30},{"v":5}]},{"c":[{"v":"AIR"},{"v":"2009"},{"v":"NDAIR"},{"v":12},{"v":20},{"v":20},{"v":0},{"v":12},{"v":5}]},{"c":[{"v":"AUT"},{"v":"2009"},{"v":"NDAUT"},{"v":40},{"v":100},{"v":28},{"v":0},{"v":28},{"v":0}]},{"c":[{"v":"AIR"},{"v":"2010"},{"v":"NDAVN"},{"v":12},{"v":20},{"v":20},{"v":2},{"v":12},{"v":5}]},{"c":[{"v":"AIR"},{"v":"2010"},{"v":"NDAIR"},{"v":12},{"v":15},{"v":12},{"v":0},{"v":12},{"v":5}]},{"c":[{"v":"CIT"},{"v":"2010"},{"v":"NDCST"},{"v":30},{"v":70},{"v":35},{"v":0},{"v":30},{"v":5}]},{"c":[{"v":"CIT"},{"v":"2009"},{"v":"NDILM"},{"v":30},{"v":40},{"v":35},{"v":0},{"v":30},{"v":5}]}]}
On Sat, Apr 19, 2014 at 12:31 AM, Andrew Gallant <[email protected]>wrote:
> Post the output of get_json_bar.php and get_json_app.php.
>
>
> On Thursday, April 17, 2014 5:05:55 PM UTC-4, nas wrote:
>
>> hi,
>>
>> Im afraid that it still doesnt work. I forgot to attach the php - json
>> file before. Let me include the two php files to encode json ok.
>>
>>
>>
>> On Sunday, April 13, 2014 5:32:11 PM UTC+8, nas wrote:
>>
>> 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 das
>>
>> ...
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Google Visualization API" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/HBrzEF8Grpw/unsubscribe
> .
> To unsubscribe from this group and all its topics, 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.
>
--
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.
