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
My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.
I am trying to split the data contained in a dict into multiple charts. Each chart has two series: column and marker. If represent all the data in a single chart, everything works fine, but if I try to split it, the columns and the marker don't get aligned for some reason
function setup_chart(chart_container){
return new Highcharts.chart(chart_container, {
chart: {
alignTicks: false,
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [],
className: 'chart-axis-title',
title: {
align:'high'
},
offset: -10
},
navigation: {
buttonOptions: {
x: 5,
y: -12
}
},
yAxis:[{
minRange: 1,
max:null,
min:null,
allowDecimals: false,
title: {
text: 'Days'
},
labels:{
formatter:function(){
if(this.value !=0){
return this.value;
}
}
}
},{
tickPositions: [0, 100],
visible: false
}],
tooltip: {
},
exporting: {
scale: 3,
chartOptions: {
legend: {
enabled: true
}
}
},
legend: {
enabled: false
},
series: [{
yAxis: 1,
data:[]
},{
name: 'Days',
data: [],
stickyTracking: true
}]
});
}
I'm passing the data via jinja2 and populate the chart in the following way:
var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
cms_details[key] = {
"data":[],
"left":[],
"right":[],
"cols":[],
"categories":[]
}
}
for(var key in cms_details){
var crtChart = $('#'+key).highcharts();
crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
crtChart.addSeries({
type: 'column',
yAxis: 1,
data: cms_details[key]['cols'],
zIndex: 1,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
crtChart.addSeries({
name: "Study Days",
dataLabels: {
enabled: false,
padding: 10,
borderWidth: 0,
useHTML:false,
formatter:function(){
if(this.y != 0)
return this.y;
}
},
stickyTracking: false,
data: cms_details[key]['data'],
borderWidth: 0,
zIndex: 5,
maxPointWidth: 5,
tooltip:{
followPointer:true
},
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['left'],
zIndex: 1
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['right'],
zIndex: 1
});
crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
}
Here are two pictures, the first one is with assignment without breaking the data into multiple charts, the second one is an attempt to split it :
I've tried to inspect the content of the data and it seems OK in the sense that both have the same coordinates, however they are shifted.
EDIT:
Here's the link to the jsfiddle
I have managed to solve the issue by adding pointPlacement: 0.2 to the series which was displaced.
My highstock chart chokes on the x-axis labels once I get down any more granular than about 1 day - that is, the data renders properly but the x-axis (time) labels don't seem to update, and become more sparse as I zoom in until they disappear completely. (See images)
Here is a fiddle at a larger time interval where the labels show as expected: http://jsfiddle.net/uhpn8Ljp/2/
Here is a fiddle for the smaller intervals where they don't display: http://jsfiddle.net/4r39730h/1/
I have this as my data setup when the data is received:
return {
chart: {
type: 'areaspline',
zoomType: 'x',
},
credits: {
enabled: false,
},
navigator: {
adaptToUpdatedData: false,
series: {
data: masterSeriesDateValues || dateValues,
},
yAxis: {
gridLineWidth: 0,
startOnTick: false,
endOnTick: false,
minPadding: 0.1,
maxPadding: 0.1,
labels: {
enabled: false,
},
title: {
text: null,
},
tickWidth: 0,
min: 0,
},
},
rangeSelector: {
enabled: true,
inputBoxStyle: { right: '65px', position: 'absolute' },
buttons: [{
type: 'second',
count: 1,
text: '1s',
}, {
type: 'minute',
count: 1,
text: '1min',
}, {
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1d',
}, {
type: 'month',
count: 1,
text: '1m',
}, {
type: 'year',
count: 1,
text: '1y',
}, {
type: 'all',
text: 'All',
}],
selected: rangeSelectorIndex,
inputDateFormat: dateFormat,
inputEditDateFormat: dateFormat,
inputBoxWidth: 170,
},
exporting: {
enabled: false,
},
xAxis: {
min: xAxisStart,
max: xAxisEnd,
minRange: 1, // one millisecond
},
yAxis: {
min: 0,
},
tooltip: {
formatter: function () {
return `${this.points[0].series.name} : ${(display === 'count' ? this.y : formatBytes(this.y))}`;
},
},
series: [{
id: 'itemSize',
name: display === 'count' ? 'Count of Items' : 'Size of Items',
data: dateValues,
dataGrouping: {
enabled: false,
},
}],
};
I also add a few events and labels on render:
xAxis.events = {
afterSetExtremes: this.afterSetExtremes.bind(this),
};
chart.events = { selection: function (ev) {
that.handleRangeSelection.call(this, ev, that);
} };
chartConfig.tooltip = {
formatter: function () {
let label;
if (display === 'count') {
label = this.points[0].series.name + ': ' + this.y;
} else {
label = this.points[0].series.name + ': ' + formatBytes(this.y);
}
return label;
},
};
In a previous implementation of the app, I was seeing smaller and smaller intervals down to milliseconds, and I just copied and pasted the configuration so I don't understand what could be different.
I am using Highstock/Highchart and if I draw two lines on a graph, who share a single Y axis, one of the lines isn't displayed on the Y axis properly. It is offset to higher values. For example, a value is 120 but the dot shows up on the 200 line. I would post a pic but I can't yet.
I have tried setting the Y axis max by the highest value but the line goes off the chart because it's still rendered with an offset.
Here is my config for the chart :
$scope.chartConfig = {
options: {
style: {
fontSize: '12px'
},
chart: {
alignTicks: true,
type: 'spline'
},
rangeSelector: {
inputEnabled: true, //$('#container').width() > 480,
selected: 0,
buttons: [{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true
},
tooltip: {
animation: true,
enabled: true,
shadow: true,
shared: false,
useHTML: false,
xDateFormat: '%m/%d/%Y'
},
colors: ['#51324e', '#6e6e6e', '#3d2b3b', '#515151', '#342d3d', '#3e3e3e', '#413451', '#4f4b4b', '#351032', '#3e3e3e'],
plotOptions: {
pointStart: 0,
'line': {
'cursor': 'pointer',
'marker': {
'lineWidth': 1.5,
},
'lineWidth': 1
},
column: {
grouping: true
},
series: {
stacking: 'normal',
}
}
},
xAxis: {
title: {
text: ''
},
},
yAxis: {
//min: 10,
max: null,
title: {
text: ''
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
},
useHighStocks: true,
series: [{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
},
{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: { // TODO: delete me?
units: [[
'week', // unit name
[1]
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}
],
title: {
style: {
color: '#51324e'
}
},
credits: {
enabled: false
}
};
In the HTML:
<highchart id="chart" class="hiChart-container" config="chartConfig"></highchart>
And all I change is the data and series name to update the chart...
I am only importing Highstock and using Highchart-ng.
I cannot do var chart = new Chart($scope.chartConfig) because my javascript framework is AngularJS and hence we are using Highchart-ng
How do I adjust the lines to be scaled to the Y axis?