Previous help here has got me to the current stage with my Highcharts project, however I am still hitting a major stumbling block. Highcharts chart is not loading data retrieved using .getJSON. I am at a loss as to why the html is not rendering the chart and load the data from data.php. All code below, does anyone have any ideas? #PawełFus
php
<?php
$con = mysql_connect("ip_address","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$result = array();
$sql = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PR");
$result['name'] = 'TEST';
while($r = mysql_fetch_array($sql)) {
$datetime = $r[0]*1000;
$result['category'][] = $datetime;
$result['data'][] = round($r[1],2) ;
}
$json = array();
array_push($json,$result);
print json_encode($json);
?>
php return
[{"name":"CCGT","category":[1387791900000,1387792200000,1387792500000,1387792800000],"data":[8389,8478,8761,8980,9050]}]
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'test',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'test'
},
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: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Your series array (in options) has no object, so you cannot use series[0].name. Secondly your json is not used correct, but try to replace this lines:
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
with
options.xAxis.categories = json[0]['category'];
options.series[0] = {};
options.series[0].name = json[0]['name'];
options.series[0].data = json[0]['data'];
Related
I have a trellis chart and I want to show the Standard Deviation, min max and average on top of them. I have the values for standard deviation, min, max and average coming into my dataset.
Need to show SD(standard deviation) as a different color of the bar on the respective bar.
min with down arrow, max with up arrow and average with any symbol.
currently my chart looks like as below
and I want to show the SD, min max and average value on top of my current chart as like here
The complete code is as below.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Network Visualization</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
servicesName = [];
servicesName.push('Activity Store', 'Bec', 'bl2-dpx-a-Azure', 'DPX-s1-am3a', 'DPX-s1-bl2/DPX');
var seriesDataSet = [
{
name: 'AvgSRTT',
data: [674167, 221349, 40049, 635006, 43978],
stack: 2544
}, {
name: 'MaxCount',
data: [1410, 12, 284, 497, 1499],
stack: 3553
}, {
name: 'maxDataBytesIn',
data: [104034610, 97935, 2781481799, 114003343, 24964398065],
stack: 6556889
}, {
name: 'maxDataBytesOut',
data: [61710601, 78619, 262050684, 8902916, 2331402781],
stack: 3557879
}, {
name: 'avgAvgSRTT',
data: [674167, 221349, 40049, 635006, 43978],
stack: 68699
}, {
name: 'avgDataBytesIn',
data: [104034610, 97935, 2781481799, 114003343, 24964398065],
stack: 477889094
}, {
name: 'avgDataBytesOut',
data: [61710601, 78619, 262050684, 8902916, 2331402781],
stack: 36547568
}
];
var charts = [],
$containers = $('#trellis td'),
datasets = seriesDataSet;
$.each(datasets, function (i, dataset) {
var yAxisMax = 25000000000;
if (i == 0 || i == 4) {
yAxisMax = 1000000;
}
else if (i == 1) {
yAxisMax = 4000;
}
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'bar',
marginLeft: i === 0 ? 110 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
stacking: 'normal'
},
series: {
minPointLength: 3
}
},
xAxis: {
categories: servicesName,
labels: {
enabled: i === 0,
},
title: {
text: null,
align: 'left'
},
},
yAxis: {
allowDecimals: false,
title: {
text: null
},
min: 0,
max: yAxisMax
},
legend: {
enabled: false
},
series: [dataset],
minPointLength: 3
}));
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1> Network traffic details for each services</h1>
<span id="date_time"></span>
<table id="trellis">
<tr>
<td style="min-width: 300px; height: 450px; margin: 0 auto"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I'm using highcharts to build three charts on the same page and would like to show multiple plotLines on them. My current code only renders the last plotLine value (or first value if i remove the brackets). example:
options.xAxis.plotLines[0] = ({value: 17.53, color: '#444', width: 1, dashStyle: 'solid'}, {value: 29.52, color: '#444', width: 1, dashStyle: 'solid'});
Any help would be great.
Full code (with data removed)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
chart: {
backgroundColor: null
}
});
var options = {
chart: {
type: 'areaspline'
},
title: {
text: 'Route'
},
plotOptions: {
areaspline:
{
lineColor: null,
fillColor: 'green',
lineWidth:0,
marker: {
enabled: false
}
}
},
credits: { enabled: false },
yAxis: {
min: 0,
tickPixelInterval: 30,
gridLineColor:null,
lineColor:'#333',
title:{text:null},
labels:{enabled:true},
legend:{enabled:false },
title: {
text: null
}
},
xAxis: {
plotLines: []
},
series: [{
showInLegend: false
},
]
};
options.chart.renderTo = ‘Chart1’;
options.title.text = 'Chart1';
options.series[0].data = [[0.05,75]… // Data ];
options.plotOptions.areaspline.fillColor = '#0066CC';
options.xAxis.plotLines[0] = ({value: 15.44, color: '#444', width: 1, dashStyle: 'solid'}, {value: 18.23, color: '#444', width: 1, dashStyle: 'solid'});
var chart1 = new Highcharts.Chart(options);
options.chart.renderTo = 'Chart2’;
options.title.text = 'Chart2’;
options.series[0].data = [[0.05,75]… // Data ];
options.plotOptions.areaspline.fillColor = '#FF0033';
options.xAxis.plotLines[0] = ({value: 17.53, color: '#444', width: 1, dashStyle: 'solid'}, {value: 29.52, color: '#444', width: 1, dashStyle: 'solid'});
var chart2 = new Highcharts.Chart(options);
options.chart.renderTo = 'Chart3’;
options.title.text = 'Chart3’;
options.series[0].data = [[0.05,79]… // Data ];
options.plotOptions.areaspline.fillColor = '#48BC26';
var chart3 = new Highcharts.Chart(options);
})
</script>
<script src="js/highcharts.js"></script>
<body>
<div id="Chart1" style="min-width: 310px; height: 140px; margin: 0 auto"></div>
<div id="Chart2” style="min-width: 310px; height: 140px; margin: 0 auto"></div>
<div id="Chart3” style="min-width: 310px; height: 140px; margin: 0 auto"></div>
</body>
</html>
I worked it out. The plotLines values needed to be pushed:
options.xAxis.plotLines.push
I have got a heat map with this colours:
colorAxis: {
min: 0,
max: 1,
minColor: '#a50022',
maxColor: '#007340',
gridLineColor: '#000000',
stops: [
[0, '#a50022'],
[0.5, '#fffbbc'],
[1, '#007340']
],
},
It works good, but now, I would like to define a color for some cases when I dont receive a value (between 0 and 1) but a string, so I can receive a "WARNING" and I would like to give it the colour red. For that I have tried to do this:
dataClasses: [{
name: "WARNING",
color: '#a50022',
},
],
And when I create the series:
myData.push([column, row , "WARNING"]);
This doesnt work, it is shown in black. I have also tried:
myData.push({y:[column, row ,"WARNING"],name:"WARNING"});
And everything crashes with this, no data shown.
In this case, I will only receive strings, no values, so I could delete the stops, min, max and that stuff. So I would just need a "heat map" where I could define the colours for each string value.
I believe this is now a setting you can specify in API http://api.highcharts.com/highmaps/plotOptions.heatmap.nullColor
nullColor: Color
The color to apply to null points.
Change:
myData.push({y:[column, row ,"WARNING"],name:"WARNING"});
To:
myData.push({x: column, y:row, name:"WARNING", color: 'red'});
Even you can set the color of a point in heatmap explicitly after generating it.
you can check out the below link.
Demo, Explicit select and color change HeatMap
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<button id="getselectedpoints"> Select Point</button>
<button id="changeColor"> Change color</button>
<script type='text/javascript'>//<![CDATA[
var heatMapData=[];
heatMapData.push({x: 1, y:1, name:"well_data1", color: 'red'});
heatMapData.push({x: 4, y:5, name:"well_data2", color: 'green'});
heatMapData.push({x: 6, y:10, name:"well_data3", color: 'blue'});
heatMapData.push({x: 9, y:5, name:"well_data4", color: 'yellow'});
var selfSelectedInHeatMap=false;
var heatMapChart = Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'HEAT MAP'
},
xAxis: {
min:1,
categories: [0,1,2,3,4,5,6,7,8,9,10,11],
gridLineWidth:1
},
yAxis: {
min:1,
categories: ['','a','b','c','d','e','f','g','h','i','j','m','n','o'],
gridLineWidth:1
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
enabled:false
},
plotOptions: {
series: {
point: {
events: {
select: function () {
selfSelectedInHeatMap = true;
alert("selected "+this.name + ' (' + this.series.yAxis.categories[this.y] +', ' +this.series.xAxis.categories[this.x] +')')
doHeatMapSelectionWork(this.name);
}
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b> (' + this.series.yAxis.categories[this.point.y] +', ' +this.series.xAxis.categories[this.point.x] +')';
}
},
series: [{
name: 'Wells Data',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
color: '#a4edba'
},
select: {
borderColor: 'black',
borderWidth:5
}
},
borderWidth: 1,
data: heatMapData,
dataLabels: {
enabled: false
}
}]
});
function doHeatMapSelectionWork(name)
{
if(!selfSelectedInHeatMap)
{
var dataPoints = heatMapChart.series[0].data;
for(var i=0;i<dataPoints.length;i++)
{
if(dataPoints[i].name == name)
{
dataPoints[i].select();
break;
}
}
}
selfSelectedInHeatMap=false;
}
function changeColorForHeatMap(name)
{
var dataPoints = heatMapChart.series[0].data;
for(var i=0;i<dataPoints.length;i++)
{
if(dataPoints[i].name == name)
{
dataPoints[i].update({
color: 'pink'
});
break;
}
}
}
$('#getselectedpoints').click(function () {
doHeatMapSelectionWork('well_data1');
});
$('#changeColor').click(function () {
changeColorForHeatMap('well_data2');
});
//]]>
</script>
</body>
</html>
I'm trying to apply the new threshold/negativeColor features of Highcharts v3.0.2 to essentially the 'spline updating each second' example.
During the animation of the chart updating, I'm seeing weird artifacts in the series line - it looks like it's animating to a different set of control points.. and then it snaps back to the correct configuration when the animation (of the new data point coming in) is done.
Commenting out the threshold/negativeColor features makes this visual artifact go away.
Am I seeing a bug?
UPDATE: I'm posting the following code as an example, which is the stock highcharts demo (my local jquery is v1.10.2) with the threshold/color/negativeColor lines (first lines under series) added by me. This code seemingly misbehaves.
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
threshold: 0.5,
color: '#FF0000',
negativeColor: '#00FF00',
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Indeed it looks like a bug, reported here. At this moment you can only disable animations.
My highstock will not open data in a chart on localhost. Does anybody has any idea why?
The chart displays no date. I have tried localhost, ipaddress, and still no luck.
//jsonp.php file
<?php
$host="localhost";
$username="root";
$password="";
$db_name="northwind";
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select unix_timestamp(OrderDate) as datetime, Freight from TEST1 ORDER BY OrderDate ASC LIMIT 100";
$result = mysql_query($sql);
$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 10000; // convert from Unix timestamp to JavaScript time
$data[] = array((float)$datetime,(float) $Freight);
}
$array2[] = json_encode($data);
///data2[] = json_decode($array2);
echo json_encode($data);
?>
////output from jsonp.php file
[[8364528000000,32.38],[8365392000000,11.61],[8367984000000,65.83],[8368848000000,51.3],[8369712000000,58.17],[8370576000000,22.98],[8371440000000,148.33],[8374032000000,13.97],[8374896000000,81.91],[8375760000000,140.51],[8376624000000,3.25],[8377488000000,3.05],[8380080000000,48.29],[8380944000000,146.06],[8381808000000,3.67],[8382672000000,55.28],[8383536000000,25.73],[8386128000000,208.58],[8386992000000,66.29],[8387856000000,4.56],[8388720000000,136.54],[8389584000000,98.03],[8392176000000,76.07],[8393040000000,6.01],[8393904000000,26.93],[8394768000000,13.84],[8395632000000,125.77],[8398224000000,92.69],[8399088000000,25.83],[8399952000000,8.98],[8399952000000,2.94],[8400816000000,12.69],[8401680000000,84.81],[8404272000000,76.56]]
////html file
html file-----below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(function() {
$.getJSON('127.0.0.1/HIGH_STOCK/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'TEST DATA'
},
series : [{
name : 'TEST',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="JS/highstock.js"></script>
<script src="JS/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
Everything seems to be working fine with your code.
Demo
In your $.getJSON(...) you need to take care of the Same Origin Policy
You have not specified what errors you get or what problem are you facing, it is really difficult to help in such cases. Please consider posting a jsFiddle reproduction of the error
Ok, used the northwind database on PHPmyadmin with WAMP, on localhost, it is working. Forgive the sloppiness, it's late. If you have issues, please let me know.
//PHP
<?php
//read the northwind database nworders
$host="localhost";
$username="root";
$password="root";
$db_name="NORTHWIND";
$con=mysql_connect("$host", "$username", "")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select distinct unix_timestamp(ShippedDate) as datetime, Freight from nworders WHERE shipname LIKE '%Bon app%' ORDER BY datetime ASC LIMIT 50000 ";
$result = mysql_query($sql);
if($result === FALSE) {
die(mysql_error()); // TODO: better error handling
echo mysql_error();
}
$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 1000;// convert from Unix timestamp to JavaScript time
$data[] = array($datetime, (FLOAT)$Freight);
}
$array2[] = json_encode($data);
echo json_encode($data);
?>
///
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('HTTP://localhost/HIGH/PHP_READ_TEST.PHP', function(data) {
// Create a timer
var start = + new Date();
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data,
pointStart: Date.UTC(2004, 3, 1),
pointInterval: 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
});
</script>
</head>
<body>
<script src="highstock.js"></script>
<script src="exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>