First of all, you have some errors in your code.
- You have the
<body> tag inside the <head> tag.
- The
$.ajax() is expecting a json response, however your json data is incorrect.
Valid json data:
[
{
"name": "DEL",
"data": [96.65,96.71,96.37]
},
{
"name" : "MUM",
"data": [96.22,96.29,96.61]
},
{
"name": "KOL",
"data": [97.21,97.56,97.24]
},
{
"name": "CHN",
"data": [96.52,96.50,96.67]
}
]
Now, about the problem:
I'd suggest to follow this:
- Make a helper request function that returns the
$.ajax() function.
Example:
function request() {
return $.ajax({
url: "https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json",
type: "GET",
async: true,
dataType: "json"
});
}
- Call the request function in the
$(function(){}); block. By using .done() in the request function, you can get the json data from the URL. In the done() function build the HighChart content.
Example:
$(function() {
request().done(function(point) {
options.series = point;
var chart = new Highcharts.Chart(options);
});
});
- Set the
load function in the event object in the chart options. Then with the current json data response you can use the update() series method.
Series.update()
update (Object options, [Boolean redraw]) Update the series with a new set of options. For a clean and precise handling of new options,
all methods and elements from the series are removed, and it is
initiated from scratch. Therefore, this method is more performance
expensive than some other utility methods like setData or setVisible.
Parameters
- options: Boolean New options that will be merged into the series' existing options.
- redraw: Boolean Defaults to true. Whether to redraw the chart after the series is altered. If doing more operations on the chart, it is a
good idea to set redraw to false and call chart.redraw() after.
Example:
events: {
load: function() {
var series = this.series[0]; // Get the current series.
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series.update(point); // Get the point (json data from the URL) and use the update(point) method.
console.log("Updated with this: ", point);
});
}, 5000);
}
}
Something like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>C2S Success %</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body class="theme-light">
<font color="WHITE">
<marquee behavior="scroll" direction="left" style="background:RED">Testing Etopup Dashboard </marquee>
</font>
<script type="text/javascript">
// (1)
function request() {
return $.ajax({
url: 'https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json',
type: "GET",
async: true,
dataType: "json"
});
}
var options = {
chart: {
renderTo: "chart1",
type: "column",
height: 500,
width: 530,
events: { // (3)
load: function() {
var series0 = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function() {
request().done(function(point) {
series0.update({
name: point[0].name,
data: point[0].data
});
series1.update({
name: point[1].name,
data: point[1].data
});
series2.update({
name: point[2].name,
data: point[2].data
});
});
}, 5000);
}
}
},
title: {
text: "Success %"
},
xAxis: {
categories: ["Today", "YesterDay", "D-7"],
title: {
text: "DAYs"
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: []
};
// (2)
$(function() {
request().done(function(point) {
options.series = point;
var chart = new Highcharts.Chart(options);
});
});
</script>
<div id="chart1" style="width: 300px; height: 200px;"></div>
</body>
</html>
Don't forget to change https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json by your successper.php page.
Update:
As you have an array with 4 elements, change:
events: {
load: function() {
var series = this.series[0]; // Get the current series.
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series.update(point); // Get the point (json data from the URL) and use the update(point) method.
console.log("Updated with this: ", point);
});
}, 5000);
}
}
to this:
events: {
load: function() {
var series0 = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
var series3 = this.series[3];
setInterval(function() { // For every 5 seconds call the request function.
request().done(function(point) {
series0.update({
name: point[0].name,
data: point[0].data
});
series1.update({
name: point[1].name,
data: point[1].data
});
series2.update({
name: point[2].name,
data: point[2].data
});
series3.update({
name: point[3].name,
data: point[3].data
});
});
}, 5000);
}
}
Update: The php code of the successper.php page from my demo site.
<?php
header("Access-Control-Allow-origin: *");
header("Content-Type: application/json");
header("Cache-Control: no-cache");
$min = 0;
$max = 100;
$array = array(array(name => "DEL", data => array(mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10)),
array(name => "MUM", data => array(mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10)),
array(name => "KOL", data => array(mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10)),
array(name => "CHN", data => array(mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10, mt_rand ($min*10, $max*10) / 10)));
echo json_encode($array);
flush();
?>
You can see the working example here.
Hope this helps.
</div>
