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
Related
I have a horizontal bar chart with negative and positive values,
I noticed that gridlines have a slight offset to the left (maybe they get rounded?). Here is an image that illustrates my problem:
I tried to reproduce it in fiddle, but got slightly different result (please export png to see the image). It's hard to notice but negative bars don't start from zero.
So I am curios to know what is the root cause of the problem and potential fix you may suggest.
Thanks in advance!
Highcharts.chart('container', {
chart: {
type: 'bar',
styledMode: true,
events: {
load: function(){
const chart = this;
const gridLines = chart.yAxis[0].gridGroup.element.querySelectorAll('path');
console.log(gridLines);
const yTicks = chart.yAxis[0].ticks;
for(let tick of Object.keys(yTicks)){
if(yTicks[tick].pos === 0) {
const zeroGridLine = yTicks[tick].gridLine.element;
zeroGridLine.classList.replace('highcharts-grid-line','zero-line');
if(chart.seriesGroup) chart.seriesGroup.element.appendChild(zeroGridLine)
break;
}
}
}
}
},
title: {
text: 'title'
},
xAxis: {
categories: ['Medical care',
'Shelter',
'Personal services',
'Education',
'Furnishings',
'Communication',
'Recreation',
'Fuels and utilities',
'Apparel',
'Transportation',],
lineWidth: 1,
labels: {
align: 'left',
reserveSpace: true,
step: 1,
x:-5,
/* max: 9.5,
min: -0.5, */
style: {
whiteSpace: 'wrap',
textOverflow: 'visible'
}
}
},
yAxis: {
tickWidth: 1
},
series: [{
name: 'April 2020',
data: [
4.81, 2.62, 2.53, 2.15, 1.31, 1.12, 0.94, -0.35, -3, -8]
}, {
name: 'Jan 2020',
data: [4.48, 3.32, 2.11, 2.17, 0.66, 0.93, 1.41, 0.57, -1.26, 2.87]
}]
})
#import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 300px;
height: 300px;
margin: 1em auto;
}
.highcharts-xaxis-labels {
font-size: 15px;
}
.zero-line {
stroke: black;
stroke-width: 1;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
I think that it is a bug. I reported it on the Highcharts Github issue channel where you can follow this thread or add your own opinion about this behaviour. The core developers will respond you.
https://github.com/highcharts/highcharts/issues/14302
I can not find how to retrieve the name of the data in the series to display it in the tooltip, with this.x it works but not this.series.data.name
at the hover over the line, the name remains always 'undefined'
I looked in the documentation but I did not find the solution, that's why I post for the first time a message here, I'm a regular reader and for the first time I can not find .. thank you very much to all
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Affectation des véhicules'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 7, 15),
max: Date.UTC(2019, 7, 30)
},
yAxis: {
title: {
text: ''
},
categories: ['VITO 5 places blanc','VITO 5 places bleu','VITO 9 places gris','VITO 5 places gris','20 M3','SPRINTER'],
reversed: true
},
tooltip: {
formatter () {
const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
const chantier = this.series.data.name
const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`
const body = `<tr>
<td style="color:${this.series.color};padding:0">Chantier: </td>
<td style="padding:0"><b>${chantier}</b></td>
</tr>`
const footer = '</table>'
return header + body + footer
},
useHTML: true
},
series: [{
data: [{
name: 'aze',
x: Date.UTC(2019, 7, 20),
x2: Date.UTC(2019, 7, 22),
y: 5
},
{
name: 'azer',
x: Date.UTC(2019, 7, 24),
x2: Date.UTC(2019, 7, 25),
y: 2
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Can you help me please ?
For series name, use: this.series.name, but for point name use: this.point.name:
tooltip: {
formatter() {
const x1 = Highcharts.dateFormat('%d/%m/%Y', this.x)
const x2 = Highcharts.dateFormat('%d/%m/%Y', this.x2)
const chantier = this.point.name
const header = `<span style="font-size:10px">du ${x1} au ${x2}</span><table>`
const body = `<tr>
<td style="color:${this.series.color};padding:0">Chantier: </td>
<td style="padding:0"><b>${chantier}</b></td>
</tr>`
const footer = '</table>'
return header + body + footer
},
useHTML: true
}
Live demo: http://jsfiddle.net/BlackLabel/u2ekp4wz/
I have a json list of countries, that each has a status not updated, or updated.
I want to show different background colors for the countries, based on their status.
$(function() {
var criticalStatusData=[{"Country":"Australia","Criticality_High":40,"Criticality_Medium":294,"Criticality_Low":62,"LocationLiveStatus":"Live"}];
var mapData = Highcharts.maps['custom/world'];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
this.series[0].data = this.series[0].data.map((el) => {
if (el['LocationLiveStatus'] == "Live") {
el.color = "#ff0000";
return el;
}
return el
})
this.update({
series: [{
data: this.series[0].data
}]
})
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
data: criticalStatusData
}],
legend: {
enabled: false
},
title: {
text: 'World map'
}
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
Any help is appreciated.
By adding custom data as a separate series, it is possible to use the load event to tell if a country should be in one state or the other. Can be done like this:
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Country) {
if(this.series[1].data[i].LocationLiveStatus == 'Live'){
el.update({color: "#ff0000"}, false);
}
}
return el
})
}
this.redraw();
}
}
},
Thanks to #daniel_s for making the query more efficient, by only updating the affected points and not the whole series.
$(function() {
var criticalStatusData = [{
"Country": "Australia",
"Criticality_High": 40,
"Criticality_Medium": 294,
"Criticality_Low": 62,
"LocationLiveStatus": "Live"
}];
var mapData = Highcharts.maps['custom/world'];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Country) {
if(this.series[1].data[i].LocationLiveStatus == 'Live'){
el.update({color: "#ff0000"}, false);
}
}
return el
})
}
this.redraw();
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
}, {
name: 'Countries options',
visible: false,
data: criticalStatusData
}],
legend: {
enabled: false
},
title: {
text: 'World map'
}
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
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>
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'];