To preface this, I am very new to highcharts/javascript/jquery in general, so I apologize if this is a simple question.
I am trying to bind this highchart to a variable, while keeping the $(div class="chart") element on the outside. This is basically part of a bigger loop that creates a new div for each chart. Is this even possible?
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: 'line',
zoomType: 'xy',
animation: false,
height: 500
},
plotOptions: {
line: { marker: { enabled: false } },
series: {
cursor: 'pointer',
animation: false,
point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
turboThreshold: 0,
}
},
xAxis: {
title: { text: 'Time' }
},
yAxis: {
title: { text: 'Value' }
},
tooltip: {
crosshairs: true,
shared: true,
animation: false
},
title: {
text: 'Housekeeping'
}
});
You could do something like this to store the chart in a variable.
var chartOptions = {
chart: {
renderTo: 'some unique selector for the container',
type: 'line',
zoomType: 'xy',
animation: false,
height: 500
},
plotOptions: {
line: { marker: { enabled: false } },
series: {
cursor: 'pointer',
animation: false,
point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
turboThreshold: 0,
}
},
xAxis: {
title: { text: 'Time' }
},
yAxis: {
title: { text: 'Value' }
},
tooltip: {
crosshairs: true,
shared: true,
animation: false
},
title: {
text: 'Housekeeping'
}
};
var chart = new Highcharts.Chart(chartOptions);`
This will assign a new chart to a variable and render it to the element specified in the chartOptions.chart.renderTo selector.
You would need to add an id (or some other way to select a single element for the chart to render to) to the element. If this is part of a loop you could use a loop index as the id to give each div a unique id and then add the index to the renderTo attribute mentioned above.
Related
Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
I am building a real-time visualisation tool for some PC hosts, using the highcharts library. Using websocket, the web application receives data and update the charts (11 charts per web application, per host). The javascript code is in one single file and that causes the browser to freeze at some point, or just some considerable latency.
After googling, i read about web workers, and thought of trying it to optimize. So I came up with 02 javascript files:
The first one (Main thread) initialising UI and charts etc...
The second one (worker) supposed to listen to websocket, and update the charts.
Since the charts are created in the main thread (because that's where i can acces the DOM and choose charts' container), when i try to transfer the charts to the worker i get the DATA_CLONE_ERR error as follows:
DataCloneError: The object could not be cloned.
Below is the part of the script triggering the code, precisely at the postmessage() part:
var charts_list = []; //charts
function initAllCharts(host_i, l_id, pos){
var chart_i;
for (var i = 0; i < 11; i++) {
if (i < 4){
chart_i = new Highcharts.Chart({
chart: {
renderTo: l_id + '_graph'+i,
defaultSeriesType: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: ''
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
tooltip: {
valueDecimals: 2,
},
xAxis: {
title: {
text: ''
},
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: ''
},
minPadding: 0.2,
maxPadding: 0.2,
},
series: [{
name: 'Random data',
data: []
}]
});
}else{
chart_i = new Highcharts.Chart({
chart: {
renderTo: l_id + '_histogram'+i,
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: '',
},
subtitle: {
text: '',
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 0.5,
}
},
xAxis: {
title: {
text: ''
}
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Random Data',
data: []
}],
});
}
charts_list.push(chart_i);
chart_i = {};
}
//Post to worker
toChartsWorker = {"charts_list":charts_list};
chartsDataWorker.postMessage(toChartsWorker);
return chart_i;
}
So far, that's the only approach i have. Could you please help me out ? Do you see another way of doing ?
I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}
Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?
I have tried the solution at https://stackoverflow.com/a/24206104/5653279 but to no avail as my Highcharts consist of 2 series of data.
Following the above solution returns me the error
Uncaught TypeError: Cannot read property 'category' of undefined
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
tooltip: {
enabled: false,
headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>',
shared: true,
borderRadius: 10,
crosshairs: [true, false] //x,y
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
title: {
text: 'Glucose/Carbohydrate'
},
subtitle: {
text: 'Ratio between Glucose and Glucose'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b',
},
title: {
text: 'Date'
}
},
yAxis: [{ // Glucose yAxis
labels: {
format: '{value}mmol/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Glucose',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Carbohydrate yAxis
title: {
text: 'Carbohydrate',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
},{
name: 'Carbohydrate',
data: carbohydrate,
dashStyle: 'shortdot',
yAxis: 1,
marker: {
enabled: true
}
}
]}
);
});
However, the error would be "solved" if I edit plotOptions as seen.
plotOptions: {
series: [{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}]
},
But still, the tooltip does not show when I clicked on any point.
Solved the issue!
Just changed
this.chart.myTooltip.refresh(evt.point, evt);
to
this.chart.myTooltip.refresh([evt.point], evt);
But the only limitation to this fix is if there's multiple series (e.g. Line A and B) and the data of both series falls on the same X-Axis (e.g. on the same date), clicking on it will only show the tooltip of that particular series's data (if I click on series A's data, the tooltip only shows A's data without B, even though they are sharing the same X-Axis).