I have two files
searh_journal.php
<script type="text/javascript">
function submitForm() {
var form = document.myform;
var dataString = $(form).serialize();
$.ajax({
type: 'POST',
url: 'journal_table/get_data_journ.php',
data: dataString,
success: function (data) {
$('#container_journal').html(data);
var options = {
chart: {
renderTo: 'container_journal',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
xAxis: {
title: {
text: 'Year'
},
categories: []
},
yAxis: {
title: {
text: 'Number of Citations'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
type: 'line',
color: '#0066FF',
name: 'Citations',
data: []
}]
}
$.getJSON("journal_table/get_data_journ.php", function (data) {
$.each(data, function (key, value) {
$.each(value, function (key, value) {
options.series[0].data = value;
});
});
chart = new Highcharts.Chart(options);
});
}
});
return false;
}
</script>
<div id="container_journal"></div>
get_data_journ.php
include '../connect.php';
$hello = $_POST['checkedname'];
foreach($hello as $key = > $values) {
$result_journ = mysql_query("SELECT year, citations, jour_id FROM journ_graph WHERE jour_id = '$values'");
$rows_journ = array();
while ($r_journ = mysql_fetch_array($result_journ)) {
$row_journ[0] = $r_journ[0];
$row_journ[1] = $r_journ[1];
array_push($rows_journ, $row_journ);
}
print json_encode($rows_journ, JSON_NUMERIC_CHECK);
}
<br />
The output is like this<br />
<br />
| Journal Name | Edgefactor |<br />
Checkbox| journal1 | 0.56 |<br />
Checkbox| journal2 | 0.34 |<br />
Checkbox| journal3 | 0.32 |<br />
Checkbox| journal4 | 0.14 |<br />
Checkbox| journal5 | 0.54 |<br />
Compare Journal button
Here if the user chooses two journals and he wants to compare two journals, he can click on the compare journal button, then the graph must be shown for that two journals.
Here the html part is working i mean the plain html json data is shown, but the graph is not showing, the problem is in the $.getJson() line I guess.