Multiple Charts from a different table in mysql onto one page of html

[noor nasriah hj nor shah]

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>

[Andrew Gallant]

The first problem is that you create a DataTable "data" with the first json results, and then overwrite it with a new DataTable based on the second set of json results.:

var data = new google.visualization.DataTable(jsonData);
var data = new google.visualization.DataTable(jsonData1);

should be like this to create two data sets:

var data1 = new google.visualization.DataTable(jsonData);
var data2 = new google.visualization.DataTable(jsonData1);

You cannot use two separate data sources within a Dashboard.  Either you need to combine the two DataTables into one or you need to create two Dashboards.

[nas]

Ive modified the codes, but I still don't get it.  Ive attached both modified codes and the mysql db file.  Could you please have a look at it again.  Thankyou.

[Andrew Gallant]

You're missing the container divs for "YearFilter" and "YearFilter1", and you need to create and bind a Dashboard in each drawing function.  Also, the callback takes a single function; you can create a function that calls the two draw functions and pass them in.  I attached an edited file, give that a try.

...

[nas]

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:

[Andrew Gallant]

Post the output of get_json_bar.php and get_json_app.php.

...

[noor nasriah hj nor shah]

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}]}]}

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Andrew Gallant]

There were a handful of syntax errors in that code.  I attached a version with the errors fixed, and here's an example of it working: http://jsfiddle.net/asgallant/h3Dt2/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.