AJAX call for highcharts - javascript

so I have finally came up with the following script that generates a highcharts graph based on data from MySQL.
The actual HTML and Javascript are here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function test(year){
$.getJSON("data.php?year="+year, function(json){
options.series[0].data = json['data'];
chart = new Highcharts.Chart(options);
});
}
</script>
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php?year=2012", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<button onclick="test('2013')">2013</button>
</body>
</html>
The PHP file then looks like this:
<?php
$con=mysqli_connect("x","x","x","x");
$year = $_GET["year"];
$rows = array();
$rows['name'] = '2012';
$x = mysqli_query($con,"
SELECT Logdatetime, Temp
FROM alldata
WHERE YEAR(Logdatetime)=$year
LIMIT 12"
);
while($r = mysqli_fetch_array($x)){
$rows['data'][] = $r['Temp'];
}
$result = array();
array_push($result,$rows);
print json_encode($result, JSON_NUMERIC_CHECK);
?>
Now the problem is that what happens is that it works and generates the initial graph with a value "2012" as year, but after clicking the button which I wanted to generate 2013, nothing happens.
Any idea where the mistake is? It must be somewhere in the function test(), which I used to trigger the call from the button click, but I have no idea how to fix it.

Related

How to dynamically feed xAxis of a highchart line graph

i want to load mysql results to highcharts' line graph using json. In the code below, xAxix is manually feed. How can i feed it dynamically from the mysql database? you'll find the php code and the html code too.
Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</body>
</html>
<?php
$con = mysqli_connect("localhost","root","","bdd");
if (!$con) {
die('Could not connect: ' . mysqli__connect_error());
}
//mysqli_select_db($con,"bdd");
$query="SELECT revenue FROM projections_sample";
$sth = mysqli_query($con,$query);
$rows = array();
$rows['name'] = 'Revenue';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$query2="SELECT overhead FROM projections_sample";
$sth = mysqli_query($con,$query2);
$rows1 = array();
$rows1['name'] = 'Overhead';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_free_result($sth);
mysqli_close($con);
?>

You can just echo your JSON code to the xAxis attribute of your chart settings:
subtitle: {
text: '',
x: -20
},
xAxis: <?php echo json_encode($result, JSON_NUMERIC_CHECK); ?>,
yAxis: ...
Or if you retrive your data with an AJAX request, perform the request before initializing your chart and use the return data the same way.

How to display different tooltip formats in series of data in High Chart

Here I have a series of data while some of the series having time duration like 00:12:00 and other having an int value,
Here is my Javascript code (you can also view it on JSFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
inverted: false
},
title: {
text: 'Duration Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
type: "datetime",
title: {
text: 'Time Duration'
},
lineWidth: 2,
labels: {
formatter: function () {
var ts = this.value,
hs = ts / (3600 * 1000),
ms = new Date(ts).getUTCMinutes();
sc = new Date(ts).getUTCSeconds();
sc = sc < 10 ? '0' + sc : sc;
ms = ms < 10 ? '0' + ms : ms;
hs = hs < 10 ? '0' + hs : hs;
if(hs > 1)
return hs + ":" + ms +":" + sc;
else
return ms +":" + sc;
}
}
},
tooltip:{
formatter:function() {
return Highcharts.dateFormat('%H:%M:%S',this.y);
}
},
legend: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Time',
data: [600000, 2520000,75610000]
},
{
name: 'Price',
data: [12,778,123]
}]
});
});
Here is my HTML code:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
How can I differentiate multiple series data in High Chart?

Try this:
tooltip:{
formatter:function() {
var a = Highcharts.dateFormat('%H:%M:%S',this.y);
if(a === "00:00:00"){
return this.y;
}else{
return a;
}
}
}
Here Is the updated fiddle:
http://jsfiddle.net/ishandemon/efgu7eru/2/
Updated fiddle with series name: http://jsfiddle.net/ishandemon/efgu7eru/3/

data with the chart does not fit in highcharts js

I'm making a chart with highcharts.js but I find it difficult when the chart is displayed not in accordance with the existing data.
I have created a chart on JSFiddle.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
credits: {
enabled: false
},
title: {
text: ''
},
colors: ['#ff0000', '#18b55b'],
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
}],
yAxis: [{
min: 0,
labels: {
enabled: false
},
title: {
text: '',
}
}, {
min: 0,
title: {
text: '',
},
labels: {
formatter: function () {
return this.value + '%';
}
}
}],
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var s = '<table>';
$.each(this.points, function () {
s += '<b style="text-align: right; color: ' + this.series.color + '">' + this.y + '%' + this.point.value + '</b><br/>';
});
return s;
},
footerFormat: '</table>',
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{"name":"Aktual","type":"column","yAxis":1,"data":[{"y":0,"value":""},{"y":0,"value":""},{"y":12.06
,"value":" - 122,890,156"},{"y":2.66,"value":" - 27,080,668"},{"y":0,"value":""},{"y":0,"value":""},
{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0
,"value":""}]},{"name":"Plan","type":"spline","data":[{"y":0,"value":""},{"y":0,"value":""},{"y":2.17
,"value":""},{"y":2.17,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value"
:""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""}]}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Dynamic High Chart no Displaying

I am trying to plot high chart from the example given in the HighChart Web Site.
The code I am trying is given below,
<html>
<head>
<title>
Chart
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Unfortunately nothing is coming up in the google chrome.
Error Code : 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

A small example on highcharts
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="update">Update chart</button>
$(function () {
var cat=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
$('#container').highcharts({
chart: {
animation: false
},
xAxis: {
categories: cat
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
chart.series[0].data[0].update(i++ % 2 ? 200 : 0);
});
});

I made some mistake in referencing the jquery files. I made it in order and its working perfectly fine..
Chart
<!-- <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="jquery/highcharts.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script> !-->
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Using Ajax in highchart

I am trying to use high chart. I am new to high chart also new to jquery also. I was trying load categories and series into the line chart. This is the code which i am used.
<script type="text/javascript">
$(function () {
function getData(){
alert('fff');
$.ajax({
url:"high_line_data.php",
type:"POST",
success:function(resp){
chart.series[0].setData(resp);
}
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: getData
}
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
});
});
</script>
and php script
I am echoing the series result as
name:'Test',
Data : '1,3,4,5'
How can I resolve this. Please help.

parse the output of the php from text to array. highcharts also accepts a direct array of integers as input to plot the data.
hope this will be useful

You should replace your string values with numbers. Obiously you can use JSON format to add points.
Related article about preprocessing data from PHP: http://docs.highcharts.com/#preprocessing

Categories