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>
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 trying to duplicate the Highmaps Demos › Map bubble except that I want to add other charts to the same page. When I load the Highcharts script and the Highmaps module script, the chart doesn't render. The browser throws a generic error. See jsfiddle for the example.
https://jsfiddle.net/hkjbn6wg/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title: {
text: 'World population 2013 by country'
},
subtitle : {
text : 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
The error is printed, because you miss highcharts-more.js file.
Add the reference to this file and example will work.
<script src="http://code.highcharts.com/highcharts-more.js"></script>
http://jsfiddle.net/hkjbn6wg/2/
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
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'];
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.