Reputation: 4746
I have very simple data that has come from my MSSQL Server to a JSON_Encode.
Here is my PHP Code (located in myPHPFile.php):
<?php
$serverName = "MyServer";
$connectionInfo = array( "Database"=>"MyDatabase", "UID"=>"MyUID", "PWD"=>"MyPWD");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
$tsql = "SELECT * FROM [MyDatabase].[dbo].[MyView] ORDER BY Year";
$stmt = sqlsrv_query( $conn, $tsql);
$rows = array();
while($r = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$res[] = $r;
}
print json_encode($res, JSON_NUMERIC_CHECK);
sqlsrv_free_stmt( $stmt);
sqlsrv_close( $conn);
?>
That gives me the following print:
[{"Year":2016,"Number":41},{"Year":2017,"Number":512},{"Year":2018,"Number":1895},{"Year":2019,"Number":3132}]
Great. There's the data.
I've tried every tutorial, every highcharts forum post, and every stackoverflow question to get this simple data from my php file in JSON format, into a Highcharts Chart. Perhaps I am missing something obvious.
So let's look at my HTML file:
In the head:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("myPHPFile.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
title: { text: 'Year'}
},
yAxis: {
title: {
text: 'Number'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
And then obviously my div
<div id="container"></div>
What am I missing? The HTML window is just blank. No chart rendered.
Upvotes: 0
Views: 116
Reputation: 5811
The Highchart examples show another example to setup the chart. The following format can be used:
$(document).ready(function() {
$.getJSON("myPHPFile.php", function(json) {
var series = json.map(function(record){
return [record.Year, record.Number];
})
Highcharts.chart('container', {
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
title: {
text: 'Year'
}
},
yAxis: {
title: {
text: 'Number'
},
},
series: [{
data: series
}],
});
});
});
Checkout the live demo below:
const data = [{
"Year": 2016,
"Number": 41
}, {
"Year": 2017,
"Number": 512
}, {
"Year": 2018,
"Number": 1895
}, {
"Year": 2019,
"Number": 3132
}];
const series = data.map(record => [record.Year, record.Number])
Highcharts.chart('container', {
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
title: {
text: 'Year'
}
},
yAxis: {
title: {
text: 'Number'
},
},
series: [{
data: series
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
Upvotes: 1