I wonder is there any way to limit number of series by default ? basically I loading data through Ajax, data might contain 50 to 80 series sometimes, I know highchart supports more than 50 series even, but it takes long time to load chart, so I have planned to show 2 series by default and remaining series I would like to give dropdown list so that user can select and can add series onclick, so far I is to have 2 data array one contains 2 series which I wanted to show by default and other array is to contain n number of series, here I am interested to send one only array through ajax and limit number of series in chart option, I don't know highchart has this option or not
Here is my example fiddle
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
legend: {
symbolWidth: 80
},
series: [{
data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
}, {
data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
},{
data: [8, 4, 1, 6, 4, 2, 9, 1, 2, 3, 4, 5],
},{
data: [0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5],
},{
data: [5, 4, 8, 3, 4, 6, 9, 4, 2, 8, 3, 5],
},{
data: [9, 4, 1, 2, 4, 2, 6, 1, 2, 3, 7, 3],
}
]
});
});
Thank you
Using addSeries, you can control the series onLoad :
$(function () {
var series = [
[1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
[2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
[0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5]
];
var series_loaded = [0];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
legend: {
symbolWidth: 80
},
series: [{
data: series[0]
}]
});
$('#serie-change').find('a').click(function() {
var index = $(this).parent().index();
if ($.inArray(index, series_loaded) != -1) {
return false;
}
series_loaded.push(index);
chart.addSeries({
name: $(this).text(),
data: series[index]
});
});
});
See the Fiddle : http://jsfiddle.net/e6aJW/2/
Related
I want to control the legends of different traces all at once for particular range lets say x=0 to x=5. How can we do it?
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var trace3 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
legend: {"orientation": "h"}};
Plotly.newPlot('myDiv', data, layout);
For example, when we click a legend, the encircled portion should get hid.
Sample code: Codepen_Sample
Update 2: what if trace(curve) is defined by set of different sub-traces whose ranges of the legends to be controlled are different but trace[name] are same for all the curves. For e.g this is the pseudo code:
for(let i=0; i<5; i++){
initialise trace1;
trace2;
trace3;
}
You can break up each of your three traces into starting and ending segments, then assign the starting segments the same name, same legendgroup, and only display one of these in the legend using the showlegend attribute.
Since plotly.js will make each trace a new color by default, you probably want to make the starting and ending segments of each trace to be the same color. Fixing the xaxis range will avoid having the entire plot resize when you toggle the legend entry.
Here is the javascript and codepen sample:
var trace1_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 3, 6, 4, 5, 2],
type: 'scatter',
marker: {color: 'orange'},
name: 'start',
showlegend: true,
legendgroup: 'start'
};
var trace1_end = {
x: [5, 6, 7, 8],
y: [2, 3, 5, 4],
type: 'scatter',
marker: {color: 'orange'},
name: 'trace1',
};
var trace2_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 4, 7, 8, 3, 6],
marker: {color: 'steelblue'},
type: 'scatter',
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace2_end = {
x: [5, 6, 7, 8],
y: [6, 3, 3, 4],
type: 'scatter',
marker: {color: 'steelblue'}
};
var trace3_start = {
x: [0, 1, 2, 3, 4, 5],
y: [5, 7, 3, 2, 8, 6],
type: 'scatter',
marker: {color: 'forestgreen'},
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace3_end = {
x: [5, 6, 7, 8],
y: [6, 1, 9, 3],
type: 'scatter',
marker: {color: 'forestgreen'}
};
var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = {showlegend: true,
legend: {"orientation": "h"}, xaxis: {"range": [0,8]}};
Plotly.newPlot('myDiv', data, layout);
I have multiple highcharts in one container and wanted to use a shared tooltip for it.
I am able to generate a shared tooltip for am not able to format it to how I want.
This is my code:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
// console.log(point.series.userOptions.val);
return `${s}<br/>${point.series.userOptions.val}<br/>${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Now my tooltip looks like this:
x axis value
temp-one
TemperatureIn: y axis value
temp-one
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
temp-two
TemperatureOut: y axis value
How do I format my tooltip to look like:
x axis value
temp-one
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-one and temp-two are values stored in point.series.userOptions.val. I am just not sure how to format my tooltip to look like that.
In the tooltip formatter function, try comparing the series name to that of the previous point and only include it if different, e.g.:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point, i, points) {
// console.log(point.series.userOptions.val);
var series = (i == 0 || point.series.userOptions.val != points[i - 1].series.userOptions.val) ? `${point.series.userOptions.val}<br/>` : '';
return `${s}<br/>${series}${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
I am currently trying to plot the values of a thermographic (AMG8833) inside a heatmap using highcharts module. As the values update in real time, these values are being sent through a nodemcu board and received in the html file. It is very strange as when I try to plot the value by itself using: (this part of the code repeats for each pixel of the camera)
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var pixel_0 = parseFloat(this.responseText);
document.getElementById("pixel_0").innerHTML = pixel_0;
pixel_0.innerHTML = pixel_0;
}
};
xhttp.open("GET", "/pixels[0]", true);
xhttp.send();
}, 1000 );
and
<h3>"The value for pixel 0 is: " <span id="pixel_0"></span></h3>
It shows the value perfectly. The problem comes when I try to put this value inside the data for my heatmap:
$(function () {
$('#Thermographic_camera').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 8,
plotBorderColor: '#FFFFFF'
},
title: {
text: 'Thermographic camera'
},
xAxis: {
categories: ['', '', '', '', '', '', '', ''],
},
yAxis: {
categories: ['', '', '', '', '', '', '', ''],
title: null
},
colorAxis: {
//min: 0,
//minColor: '#FFFFFF',
//maxColor: Highcharts.getOptions().colors[8]
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: 20,
max: 40
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
series: [{
name: 'Value',
borderColor: 'white',
borderWidth: 1,
data: [[0, 0, pixel_0],
[0, 1, pixel_1],
[0, 2, pixel_2],
[0, 3, pixel_3],
[0, 4, pixel_4],
[0, 5, pixel_5],
[0, 6, pixel_6],
[0, 7, pixel_7],
[1, 0, pixel_8],
[1, 1, pixel_9],
[1, 2, pixel_10],
[1, 3, pixel_11],
[1, 4, pixel_12],
[1, 5, pixel_13],
[1, 6, pixel_14],
[1, 7, pixel_15],
[2, 0, pixel_16],
[2, 1, pixel_17],
[2, 2, pixel_18],
[2, 3, pixel_19],
[2, 4, pixel_20],
[2, 5, pixel_21],
[2, 6, pixel_22],
[2, 7, pixel_23],
[3, 0, pixel_24],
[3, 1, pixel_25],
[3, 2, pixel_26],
[3, 3, pixel_27],
[3, 4, pixel_28],
[3, 5, pixel_29],
[3, 6, pixel_30],
[3, 7, pixel_31],
[4, 0, pixel_32],
[4, 1, pixel_33],
[4, 2, pixel_34],
[4, 3, pixel_35],
[4, 4, pixel_36],
[4, 5, pixel_37],
[4, 6, pixel_38],
[4, 7, pixel_39],
[5, 0, pixel_40],
[5, 1, pixel_41],
[5, 2, pixel_42],
[5, 3, pixel_43],
[5, 4, pixel_44],
[5, 5, pixel_45],
[5, 6, pixel_46],
[5, 7, pixel_47],
[6, 0, pixel_48],
[6, 1, pixel_49],
[6, 2, pixel_50],
[6, 3, pixel_51],
[6, 4, pixel_52],
[6, 5, pixel_53],
[6, 6, pixel_54],
[6, 7, pixel_55],
[7, 0, pixel_56],
[7, 1, pixel_57],
[7, 2, pixel_58],
[7, 3, pixel_59],
[7, 4, pixel_60],
[7, 5, pixel_61],
[7, 6, pixel_62],
[7, 7, pixel_63],
],
dataLabels: {
enabled: false,
color: '#000000'
}
}]
});
});
When I do so, I obtain the answer in the heatmap that the variable i am trying to put inside the heatmap is an [object HTMLSpanElement] and it does not put the actual value of the variables of each pixel.
Any clue on what could I be doing wrong?
Thank you very much for the help
I am using Highcharts Stream graph and everything is working fine except the yaxis labels are coming wrong. Even in the example page, the Y axis is equally divided into two parts and the mid point is zero and all the other labels are relative to that.
I want the labels to render the value which is actually on the graph.
Highcharts.chart('container', {
chart: {
type: 'streamgraph'
},
legend: {
enabled: false
},
// Data parsed with olympic-medals.node.js
series: [{
name: "Finland",
data: [
0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
]
}, {
name: "Austria",
data: [
0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
]
}, {
name: "Sweden",
data: [
0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
]
}, {
name: "Norway",
data: [
0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/streamgraph.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
That is how streamgraph series works, please check a official example: https://www.highcharts.com/demo/streamgraph - areas are displaced around a central axis, y-axis is not relevant.
Please also check the streamStacker function in the module source code: https://code.highcharts.com/modules/streamgraph.src.js
I recommend you to use areaspline series with stacking if you want to use y-axis.
chart: {
type: 'areaspline'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
Live example: http://jsfiddle.net/BlackLabel/o4drspjq/
I'm trying to display company's balance sheet with Highcharts.
I want to put legend on left side and right side like this.
I couldn't not find the way to do that.
Please help me
You can achieve it using this approach:
Set appropriate legend options:
legend: {
floating: true,
align: 'left',
itemMarginBottom: 15,
width: 200,
padding: 0
}
Then, the legend will be rendered in two columns. Loop through chart series in render event callback and translate each legend element that has translateX property greater than 0 to another side of the chart. Note that chart margins (left and right) should be set. Check the code and demo posted below.
Highcharts.chart('container', {
chart: {
type: 'column',
marginLeft: 150,
marginRight: 100,
spacingLeft: 10,
events: {
render: function() {
var chart = this,
offsetLeft = 20,
element,
itemX,
translateX,
translateY;
chart.series.forEach(function(series) {
element = series.legendItem.parentGroup;
translateY = element.translateY;
if (element.translateX > 0) {
translateX = chart.plotWidth + chart.plotLeft + offsetLeft;
element.translate(translateX, translateY);
}
});
}
}
},
legend: {
floating: true,
align: 'left',
itemMarginBottom: 15,
width: 200,
padding: 0
},
series: [
{ data: [6, 4, 2], name: 'First' },
{ data: [7, 3, 2], name: 'Second' },
{ data: [9, 4, 8], name: 'Third' },
{ data: [1, 2, 6], name: 'Fourth' },
{ data: [4, 6, 4], name: 'Fifth' },
{ data: [1, 2, 7], name: 'Sixth' },
{ data: [4, 2, 5], name: 'Seventh' },
{ data: [8, 3, 2], name: 'Eighth' },
{ data: [4, 5, 6], name: 'Ninth' },
{ data: [6, 4, 2], name: 'First' },
{ data: [7, 3, 2], name: 'Second' },
{ data: [9, 4, 8], name: 'Third' },
{ data: [1, 2, 6], name: 'Fourth' },
{ data: [4, 6, 4], name: 'Fifth' },
{ data: [1, 2, 7], name: 'Sixth' },
{ data: [4, 2, 5], name: 'Seventh' },
{ data: [8, 3, 2], name: 'Eighth' },
{ data: [4, 5, 6], name: 'Ninth' }
]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
API reference
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/highcharts/chart.marginRight