How to show the container in a nested treemap? - highcharts

I have a treemap made of
a big container
with an element
with an element
with an element which is itself made of
an element
an element
another big container
Highcharts.chart('container', {
series: [{
type: "treemap",
animation: false,
data: [
// first big category
{
id: 'B',
name: 'B'
},
{
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Peter',
parent: 'B',
value: 1
},
// below is a member of forst big category, but with sub-categories
{
name: 'aaa container',
parent: 'B',
id: 'aaa'
}, {
name: 'Anneinaaa',
parent: 'aaa',
value: 1
}, {
name: 'Rickinaaa',
parent: 'aaa',
value: 3
},
// second big category
{
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}
]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
I would like to highlight the fact that there is a container for Rickinaaa and Anneinaaa, with a description.
Right now Rickinaaa and Anneinaaa are at the same level as Anne and Peter, despite the fact that it is their container (the one I do not know how to show) which should be at their level.
An example from ZingCharts which shows this multilayer presentation:
It is much easier to see the box-in-a-box structure.
Is there a way to achieve this in Highcharts? Specifically, how could I have a visible container labelled aaa container which would encompass the rectangles Rickinaaa and Anneinaaa

It can be done by using custom positioning algorithm for treemap. The process is described here: https://www.highcharts.com/docs/chart-and-series-types/treemap (ADD YOUR OWN ALGORITHM section).
I created simplified algorithm for demo purposes (some values are hardcoded):
// Custom positioning algorithm
function myFunction(parent, children) {
childrenAreas = [];
Highcharts.each(children, function(child) {
// Do some calculations
var newLeaf = null;
if (child.id === 'A') {
newLeaf = {
x: 0,
y: 0,
width: 50,
height: 50
};
} else if (child.id === 'B') {
newLeaf = {
x: 50,
y: 0,
width: 50,
height: 50
};
} else if (child.name === 'Rick') {
newLeaf = {
x: parent.x + 10,
y: parent.y + 10,
width: parent.width - 20,
height: (parent.height - 20) / 2
}
} else if (child.name === 'Peter') {
newLeaf = {
x: parent.x + 10,
y: parent.y + 30,
width: parent.width - 20,
height: (parent.height - 20) / 2
}
} else if (child.name === 'Anne') {
newLeaf = {
x: parent.x + 10,
y: 10,
width: parent.width - 20,
height: parent.height - 20
}
}
if (newLeaf) {
childrenAreas.push(newLeaf);
}
});
return childrenAreas;
};
Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = myFunction;
By default Highcharts assigns color fill attribute only for the nodes of the Highest level - all other nodes have it set to none. It can be changed manually via CSS:
.highcharts-internal-node {
fill: #bada55
}
I also did a small change in the core code so that parent levels are drawn underneath the child ones:
(function(H) {
var grep = H.grep,
each = H.each,
seriesTypes = H.seriesTypes;
H.seriesTypes.treemap.prototype.drawPoints = function() {
var series = this,
points = grep(series.points, function(n) {
return n.node.visible;
});
each(points, function(point) {
var groupKey = 'level-group-' + point.node.levelDynamic;
if (!series[groupKey]) {
series[groupKey] = series.chart.renderer.g(groupKey)
.attr({
// CHANGED FROM: zIndex: 1000 - point.node.levelDynamic
zIndex: 1000 + point.node.levelDynamic // #todo Set the zIndex based upon the number of levels, instead of using 1000
})
.add(series.group);
}
point.group = series[groupKey];
});
// Call standard drawPoints
seriesTypes.column.prototype.drawPoints.call(this);
// If drillToNode is allowed, set a point cursor on clickables & add drillId to point
if (series.options.allowDrillToNode) {
each(points, function(point) {
if (point.graphic) {
point.drillId = series.options.interactByLeaf ? series.drillToByLeaf(point) : series.drillToByGroup(point);
}
});
}
}
})(Highcharts);
Live demo: https://jsfiddle.net/BlackLabel/wfed4jeo/

Related

How can I hide/show a data that in a series? (highchart)

I know how to hide a whole series,but I have no idea about how to hide a specific data in a series. here is part of my option:
series: [
{
data: [
{ x: 35, y: 35, z: 50.8, name: "A" ,visible:false},
{ x: 25, y: 75, z: 50.8, name: "B" },
{ x: 45, y: 55, z: 50.8, name: "C", color: "red" }
]
}
mydemo
visible:false is half works , the background is disappeared but the datalabel is still there , I want hide it , and no user interaction.
and I want tigger hide/show on a bubble click like this:
const onClickBubble = event => {
let currentPointName = event.point.name;
console.log(chartRef.current.chart.series[0].options.data);
option.series[0].data.forEach(element => {
if (currentPointName === element.name) {
element.color = "green";
} else {
//hide other bubble here
element.visible = false;
}
});
let NewOptoin = Object.assign({}, option);
setOption(NewOptoin);
};
so this :
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
there is no series[x].points in chart option. so this way may not work for me.
You can hide a point in the load event:
chart: {
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4805/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/highcharts/chart.events.load

Konvajs: Create a draggable area with some constraints on one of the childs

I'm creating a timeline with Konva and the entire timeline (stage) is draggable on all directions but I have an axis with all the years of the timeline (Konva group) that I want to restrict its movement so that it only moves horizontally.
I can't use dragBoundFunc as it will restrict the movement on all nodes of the timeline.
I tried to change the position of the element using the dragmove event:
stage.on("dragmove", function(evt) {
xaxis.y(0);
});
But the xaxis still moves on all direction while dragging the stage.
I could also use different draggable layers for the axis and the timeline itself, but then when I drag the axis it wouldn't move the timeline and the same if I move the timeline.
As the simplest solution, you can just make sure that the absolute position of your timelime group is the same:
stage.on("dragmove", function(evt) {
// read absolute position
const oldAbs = xaxis.absolutePosition();
// set new absolute position, but make sure x = 0
xaxis.absolutePosition({
x: oldAbs.x,
y: 0
});
});
Here is a slightly more capable version that allows vertical drag of the event layer whilst keeping the time line axis visible for reference. This uses two layers - one to act as the background containing the time line and grid, whilst the second shows the events.
The key technique here is using the dragMove event listener on the draggable event layer to move the background layer in sync horizontally but NOT vertically. Meanwhile the event layer is also constrained with a dragBound function to stop silly UX.
An improvement would be to add clipping to the event layer so that when dragged down it would not obscure the timeline.
var stageWidth = 800,
stageHeight = 300,
timeFrom = 1960,
timeTo = 2060,
timeRange = timeTo - timeFrom,
timeLineWidth = 1000,
timeSteps = 20, // over 100 yrs = 5 year intervals
timeInt = timeRange / timeSteps,
timeLineStep = timeLineWidth / timeSteps,
yearWidth = timeLineWidth / timeRange,
plotHeight = 500,
events = [{
date: 1964,
desc: 'Born',
dist: 10
},
{
date: 1966,
desc: 'England win world cup - still celebrating !',
dist: 20
},
{
date: 1968,
desc: 'Infant school',
dist: 30
},
{
date: 1975,
desc: 'Secondary school',
dist: 50
},
{
date: 1981,
desc: 'Sixth form',
dist: 7
},
{
date: 1983,
desc: 'University',
dist: 30
},
{
date: 1986,
desc: 'Degree, entered IT career',
dist: 50
},
{
date: 1990,
desc: 'Marriage #1',
dist: 0
},
{
date: 1996,
desc: 'Divorce #1',
dist: 0
},
{
date: 1998,
desc: 'Marriage #2 & Son born',
dist: 90
},
{
date: 2000,
desc: 'World did not end',
dist: 20
},
{
date: 2025,
desc: 'Retired ?',
dist: 0
},
{
date: 2044,
desc: 'Enters Duncodin - retirement home for IT workers',
dist: 0
},
{
date: 2054,
desc: 'Star dust',
dist: 0
}
]
function setup() {
// Set up a stage and a shape
stage = new Konva.Stage({
container: 'konva-stage',
width: stageWidth,
height: stageHeight
});
// bgLayer is the background with the grid, timeline and date text.
var bgLayer = new Konva.Layer({
draggable: false
})
stage.add(bgLayer);
for (var i = 0, max = timeSteps; i < max; i = i + 1) {
bgLayer.add(new Konva.Line({
points: [(i * timeLineStep) + 0.5, 0, (i * timeLineStep) + .5, plotHeight],
stroke: 'cyan',
strokeWidth: 1
}))
bgLayer.add(new Konva.Text({
x: (i * timeLineStep) + 4,
y: 260,
text: timeFrom + (timeInt * i),
fontSize: 12,
fontFamily: 'Calibri',
fill: 'magenta',
rotation: 90,
listening: false
}));
}
for (var i = 0, max = plotHeight; i < max; i = i + timeLineStep) {
bgLayer.add(new Konva.Line({
points: [0, i + 0.5, timeLineWidth, i + .5],
stroke: 'cyan',
strokeWidth: 1
}))
}
// add timeline
var timeLine = new Konva.Rect({
x: 0,
y: 245,
height: 1,
width: timeLineWidth,
fill: 'magenta',
listening: false
});
bgLayer.add(timeLine)
// eventLayer contains only the event link line and text.
var eventLayer = new Konva.Layer({
draggable: true,
// the dragBoundFunc returns an object as {x: val, y: val} in which the x is constricted to stop
// the user dragging out of sight, and the y is not allowed to change.
// ! position of bgLayer is moved in x axis in sync with eventLayer via dragMove event
dragBoundFunc: function(pos) {
return {
x: function() {
var retX = pos.x;
if (retX > 20) { // if the left exceeds 20px from left edge of stage
retX = 20;
} else if (retX < (stageWidth - (timeLineWidth + 50))) { // if the right exceeds 50 px from right edge of stage
retX = stageWidth - (timeLineWidth + 50);
}
return retX;
}(),
y: function() {
var retY = pos.y;
if (retY < 0) {
retY = 0;
} else if (retY > 200) {
retY = 200;
}
return retY;
}()
};
}
});
stage.add(eventLayer);
// ! position of bgLayer is moved in x axis in sync with eventLayer via dragMove event of eventLayer.
eventLayer.on('dragmove', function() {
var pos = eventLayer.position();
var bgPos = bgLayer.position();
bgLayer.position({
x: pos.x,
y: bgPos.y
}); // <--- move the bgLayer in sync with the event eventLayer.
stage.draw()
});
for (var i = 0, max = events.length; i < max; i = i + 1) {
var event = events[i];
var link = new Konva.Rect({
x: yearWidth * (event.date - timeFrom),
y: 200 - event.dist,
width: 1,
height: 55 + event.dist,
fill: 'magenta',
listening: false
});
eventLayer.add(link)
var eventLabel = new Konva.Text({
x: yearWidth * (event.date - timeFrom) - 5,
y: 190 - event.dist,
text: event.date + ' - ' + event.desc,
fontSize: 16,
fontFamily: 'Calibri',
fill: 'magenta',
rotation: -90,
listening: false
});
eventLayer.add(eventLabel);
var dragRect = new Konva.Rect({
x: 0,
y: 0,
width: timeLineWidth,
height: 500,
opacity: 0,
fill: 'cyan',
listening: true
});
eventLayer.add(dragRect);
dragRect.moveToTop()
}
stage.draw()
}
var stage, eventLayer;
setup()
.konva-stage {
width: 100%;
height: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script>
<p>Drag the timeline left & right AND up & down...</p>
<div id="konva-stage"></div>
Just for fun, a stripped down version of my answers showing the ondrag() function without all the timeline frills.
var stage;
function setup() {
// Set up a stage and a shape
stage = new Konva.Stage({
container: 'konva-stage',
width: 600,
height: 300
});
// layer1.
var layer1 = new Konva.Layer({
draggable: false
})
stage.add(layer1);
var ln1 = new Konva.Line({
points: [10, 0, 10, 20, 10, 10, 0, 10, 20, 10],
stroke: 'cyan',
strokeWidth: 4
});
layer1.add(ln1);
var layer2 = new Konva.Layer({
draggable: true,
});
stage.add(layer2);
var ln2 = new Konva.Line({
points: [10, 0, 10, 20, 10, 10, 0, 10, 20, 10],
stroke: 'magenta',
strokeWidth: 4
});
layer2.add(ln2);
// position the crosses on the canvas
ln1.position({
x: 100,
y: 80
});
ln2.position({
x: 100,
y: 40
});
// ! position of layer1 is moved in x axis in sync with layer2 via dragMove event of layer2.
layer2.on('dragmove', function() {
var pos = layer2.position();
var bgPos = layer1.position();
layer1.position({
x: pos.x,
y: bgPos.y
}); // <--- move layer1 in sync with layer2.
stage.draw()
});
stage.draw()
}
setup()
.konva-stage {
width: 100%;
height: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script>
<p>Drag the upper cross - only one moves vertically whilst the other is contrained in the y-axis. Both move in sync on the x-axis</p>
<div id="konva-stage"></div>
It is not entirely clear what you are asking but I have assumed you want to constrain the drag of the timeline so that it gives good UX. See working snippet below. The majority of the code is setup of the timeline. The important piece is
Include a rect covering the entire timeline that has zero opacity and is listening for mouse events.
Provide the layer with a dragBoundFunc that returns an object as {x: val, y: val} in which the x is constricted to stop the user dragging out of sight horizontally, and the y is not allowed to change. If you think of the rect and the stage as rectangles then the math is not difficult to comprehend. If your timeline is vertical, swap the x & y behaviour.
var stageWidth = 800,
timeFrom = 1960,
timeTo = 2060,
range = timeTo - timeFrom,
timeLineWidth = 1000;
yearWidth = timeLineWidth / range,
events = [{
date: 1964,
desc: 'Born'
},
{
date: 1968,
desc: 'Infant school'
},
{
date: 1975,
desc: 'Secondary school'
},
{
date: 1981,
desc: 'Sixth form'
},
{
date: 1983,
desc: 'University'
},
{
date: 1986,
desc: 'Degree, entered IT career'
},
{
date: 1990,
desc: 'Marriage #1'
},
{
date: 1998,
desc: 'Marriage #2'
},
{
date: 1999,
desc: 'Son born'
},
{
date: 2025,
desc: 'Retired ?'
},
{
date: 2044,
desc: 'Enters Duncodin - retirement home for IT workers'
},
{
date: 2054,
desc: 'Star dust'
}
]
function setup() {
// Set up a stage and a shape
stage = new Konva.Stage({
container: 'konva-stage',
width: stageWidth,
height: 500
});
layer = new Konva.Layer({
draggable: true,
// the dragBoundFunc returns an object as {x: val, y: val} in which the x is constricted to stop
// the user dragging out of sight, and the y is not allowed to change.
dragBoundFunc: function(pos) {
return {
x: function() {
retX = pos.x;
if (retX > 20) {
retX = 20;
} else if (retX < (stageWidth - (timeLineWidth + 50))) {
retX = stageWidth - (timeLineWidth + 50);
}
return retX;
}(),
y: this.absolutePosition().y
};
}
});
stage.add(layer);
// add timeline
var timeLine = new Konva.Rect({
x: 0,
y: 245,
height: 10,
width: timeLineWidth,
fill: 'magenta',
listening: false
});
layer.add(timeLine)
for (var i = 0, max = events.length; i < max; i = i + 1) {
var event = events[i];
var link = new Konva.Rect({
x: yearWidth * (event.date - timeFrom),
y: 200,
width: 5,
height: 55,
fill: 'magenta',
listening: false
});
layer.add(link)
var timeLabel = new Konva.Text({
x: yearWidth * (event.date - timeFrom) + 10,
y: 265,
text: event.date,
fontSize: 16,
fontFamily: 'Calibri',
fill: 'magenta',
rotation: 90,
listening: false
});
layer.add(timeLabel);
var eventLabel = new Konva.Text({
x: yearWidth * (event.date - timeFrom) - 5,
y: 190,
text: event.desc,
fontSize: 16,
fontFamily: 'Calibri',
fill: 'magenta',
rotation: -90,
listening: false
});
layer.add(eventLabel);
var dragRect = new Konva.Rect({
x: 0,
y: 0,
width: timeLineWidth,
height: 500,
opacity: 0,
fill: 'cyan',
listening: true
});
layer.add(dragRect);
dragRect.moveToTop()
}
stage.draw()
}
var stage, layer;
setup()
.konva-stage {
width: 100%;
height: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script>
<p>Drag the timeline...</p>
<div id="konva-stage"></div>

How to put shadow inside of bar chart in highcharts?

How to put shadow inside of bar chart like box-shadow inset(css) in hightcharts as image below.
Thank you. Have a good day~
enter image description here
You can use two overlap series, one with default shadow property and translate both of them by a few pixels in load event:
Highcharts.chart('container', {
chart: {
...,
events: {
load: function() {
this.series[0].points[0].graphic.attr({
translateX: -2
});
this.series[1].points[0].graphic.attr({
translateX: -2
});
}
}
},
...,
series: [{
...,
data: [100],
shadow: {
color: 'gray',
opacity: 0.8,
width: 2
}
}, {
data: [50]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/b7hp0r6s/
API Reference: https://api.highcharts.com/highcharts/series.bar.shadow
Unfortunately, Highcharts doesn't have an inset shadow implemented in the core. However, it can be done by adding custom logic to Highcharts.SVGElement.prototype.shadow method. Check the code and demo posted below and let me know if something is unclear for you.
Additionally, to add a partial fill to columns with the inner shadow you have to make a custom column elements and insert them to the DOM between shadows and particular points.
Code:
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
(function(H) {
H.SVGElement.prototype.shadow = function(shadowOptions, group, cutOff) {
var shadows = [],
i, shadow, element = this.element,
strokeWidth, shadowWidth, shadowElementOpacity,
// compensate for inverted plot area
transform,
elemBBox = element.getBBox(),
translateX,
translateY;
if (!shadowOptions) {
this.destroyShadows();
} else if (!this.shadows) {
shadowWidth = H.pick(shadowOptions.width, 3);
shadowElementOpacity = (shadowOptions.opacity || 0.15) /
shadowWidth;
transform = this.parentInverted ?
'(' + H.pick(shadowOptions.offsetY, 1) * -1 + ', ' +
H.pick(shadowOptions.offsetX, 1) * -1 + ')' :
'(' + H.pick(shadowOptions.offsetX, 1) + ', ' +
H.pick(shadowOptions.offsetY, 1) + ')';
if (!shadowOptions.inside) {
for (i = 1; i <= shadowWidth; i++) {
shadow = element.cloneNode(0);
strokeWidth = (shadowWidth * 2) + 1 - (2 * i);
H.attr(shadow, {
stroke: (shadowOptions.color ||
'#000000'),
'stroke-opacity': shadowElementOpacity * i,
'stroke-width': strokeWidth,
transform: 'translate' + transform,
fill: 'none'
});
shadow.setAttribute('class', (shadow.getAttribute('class') || '') + ' highcharts-shadow');
if (cutOff) {
H.attr(shadow, 'height', Math.max(H.attr(shadow, 'height') - strokeWidth, 0));
shadow.cutHeight = strokeWidth;
}
if (group) {
group.element.appendChild(shadow);
} else if (element.parentNode) {
element.parentNode.insertBefore(shadow, element);
}
shadows.push(shadow);
}
} else {
for (i = shadowWidth; i >= 1; i--) {
shadow = element.cloneNode(0);
translateX = i / 2 - shadowOptions.offsetY;
translateY = i / 2 - shadowOptions.offsetX;
H.attr(shadow, {
stroke: (shadowOptions.color ||
'#000000'),
'stroke-opacity': shadowElementOpacity * (shadowWidth - i + 1),
'stroke-width': i,
transform: 'translate(' + translateX + ',' + translateY + ')',
fill: 'none'
});
H.css(shadow, {
width: elemBBox.width - i,
height: elemBBox.height - i,
});
shadow.setAttribute('class', (shadow.getAttribute('class') || '') + ' highcharts-shadow');
if (cutOff) {
H.attr(shadow, 'height', Math.max(H.attr(shadow, 'height') - strokeWidth, 0));
shadow.cutHeight = strokeWidth;
}
if (group) {
group.element.appendChild(shadow);
} else if (element.parentNode) {
insertAfter(shadow, element);
}
shadows.push(shadow);
}
}
this.shadows = shadows;
}
return this;
};
})(Highcharts)
Highcharts.chart('container', {
chart: {
type: 'column',
inverted: true,
events: {
render: function() {
var chart = this,
yAxis = chart.yAxis[0],
partialFillWidth,
elem,
bBox;
if (chart.customElements && chart.customElements.length) {
chart.customElements.forEach(custElem => {
custElem.parentNode.removeChild(custElem);
})
chart.customElements.length = 0;
} else {
chart.customElements = [];
}
chart.series[0].points.forEach(point => {
bBox = point.graphic.getBBox();
elem = point.graphic.element.cloneNode(0);
partialFillWidth = yAxis.toPixels(point.partialFill);
Highcharts.attr(elem, {
fill: point.partialFillColor,
transform: 'translate(0, ' + (bBox.height - (point.partialFill / point.y) * bBox.height) + ')'
});
Highcharts.css(elem, {
height: (point.partialFill / point.y) * bBox.height
});
insertAfter(elem, point.graphic.element);
chart.customElements.push(elem);
});
}
}
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
}
},
series: [{
color: '#efefef',
id: 'main',
data: [{
y: 120,
partialFill: 100,
partialFillColor: '#bbb'
}, {
y: 50,
partialFill: 10,
partialFillColor: '#bbb'
}, {
y: 70,
partialFill: 20,
partialFillColor: '#bbb'
}],
pointPadding: 0.4,
shadow: {
color: 'rgba(0, 0, 0, 0.5)',
opacity: 0.3,
width: 5,
offsetX: 0,
offsetY: 0,
inside: true
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/kvrjd48w/
API reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement
https://api.highcharts.com/class-reference/Highcharts#.attr

Keep Scroll on the Right Highchart

Is there a way to keep the scroll on the most right?
I am trying live update on highchart and it seems that sometimes I am encountering scroll being left behind.
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts(),
yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: 66,
color: 'red',
width: 2,
id: 'plot-line-1',
label: {
text: 66,
align: 'right',
y: newY,
x: 0
}
});
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY:newY,
text:y
},400),
plotLine.animate({
translateY: newY
}, 400);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});
I know it a little bit hard to explain my concern, but check this image
I have search setExtremes but I am not sure if how it works or how it will be set up on future dated in case this is the function that I am looking for.
Here is the jsfiddle http://jsfiddle.net/kttfv1h3/3/
Appreciate your help
setExtremes() will work - see API http://api.highcharts.com/highcharts/Axis.setExtremes.
The only thing you need to adjust is the min value - you can calculate it from the last point or set some fixed value.
xAxis.setExtremes(x - 1000 * 60, x)
example: http://jsfiddle.net/nmx5hruo/

Resizing Annotation shapes

I am trying to create annotations in high charts and resizing the shapes on clicking inside a shape. I have created a js fiddle.
Run the jsfiddle: http://jsfiddle.net/1e1jnv7w/
HTML:
<h3>Add annotation via simple form</h3>
<div style="width: 1054px; float: left;">
<div id="container" style="float: left; height: 342px; width: 800px">
</div>
JAVASCRIPT:
$(function() {
var options = {
chart: {
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
renderTo: 'container',
backgroundColor: '#f7f7f7',
//zoomType: 'x',
events: {
load: chartLoad
}
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Drag and drop on a chart to add annotation <span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
annotationsOptions: {
enabledButtons: false
},
annotations: [{
title: {
text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
style: {
color: 'red'
}
},
anchorX: "left",
anchorY: "top",
allowDragX: true,
allowDragY: true,
x: 515,
y: 55
}, {
title: 'drag me <br> horizontaly',
anchorX: "left",
anchorY: "top",
allowDragY: false,
allowDragX: true,
xValue: 3,
yValue: 10,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 110, 0],
stroke: '#c55'
}
}
}, {
title: 'on point <br> drag&drop <br> disabled',
linkedTo: 'high',
anchorX: "middle",
anchorY: "middle",
allowDragY: false,
allowDragX: false,
shape: {
type: 'circle',
params: {
r: 40,
stroke: '#c55'
}
}
}, {
x: 100,
y: 200,
title: 'drag me <br> verticaly',
anchorX: "left",
anchorY: "top",
allowDragY: true,
allowDragX: false,
shape: {
type: 'rect',
params: {
x: 0,
y: 0,
width: 55,
height: 40
}
}
}],
series: [{
data: [13, 4, 5, {
y: 1,
id: 'high'
},
2, 14, 3, 2, 11, 6
]
}]
};
var chart = new Highcharts.Chart(options, function(chart) {
var container = chart.container,
offsetX = chart.plotLeft - container.offsetLeft,
offsetY = chart.plotTop - container.offsetTop;
Highcharts.addEvent(container, 'mousedown', function(e) {
var isInside = chart.isInsidePlot(e.clientX - offsetX, e.pageY - offsetY);
});
});
function chartLoad() {
var chart = this,
container = chart.container,
annotations = chart.annotations.allItems,
annotation,
clickX,
clickY;
function getParams(e) {
function getRadius(e) {
var x = e.pageX - container.offsetLeft,
y = e.pageY - container.offsetTop,
dx = Math.abs(x - clickX),
dy = Math.abs(y - clickY);
return parseInt(Math.sqrt(dx * dx + dy * dy), 10);
}
function getPath(e) {
var x = e.pageX - container.offsetLeft,
y = e.pageY - container.offsetTop,
dx = x - clickX,
dy = y - clickY;
return ["M", 0, 0, 'L', parseInt(dx, 10), parseInt(dy, 10)];
}
function getWidth(e) {
var x = e.clientX - container.offsetLeft,
dx = Math.abs(x - clickX);
return parseInt(dx, 10) + 1;
}
function getHeight(e) {
var y = e.pageY - container.offsetTop,
dy = Math.abs(y - clickY);
return parseInt(dy, 10) + 1;
}
if (!annotation.options.shape) return;
var shape = annotation.options.shape.params;
var newShape = {};
if (shape.r) {
newShape.r = getRadius(e);
}
if (shape.d) {
newShape.d = getPath(e);
}
if (shape.width) {
newShape.width = getWidth(e);
}
if (shape.height) {
newShape.height = getHeight(e);
}
return newShape;
}
function drag(e) {
// alert("Hii");
var shape = $("input[type='radio']:checked").val(),
stroke = $("#stroke").val(),
strokeWidth = $("#strokeWidth").val(),
title = $("#title").val(),
fill = $("#fill").val(),
shapeOpt = null,
x = null,
y = null,
width = null,
height = null,
radius = 20;
clickX = e.pageX - container.offsetLeft;
clickY = e.pageY - container.offsetTop;
if (!chart.isInsidePlot(clickX - chart.plotLeft, clickY - chart.plotTop)) {
return;
}
if (shape == 'rect') {
x = 0;
y = 0;
width = 1;
height = 1;
radius = 1;
}
if (shape !== 'text') {
shapeOpt = {
type: shape,
params: {
r: shape == 'circle' ? 1 : 0,
d: shape == 'path' ? ['M', 0, 0, 'L', 1, 1] : null,
x: x,
y: y,
width: width,
height: height
}
};
title = null;
Highcharts.addEvent(document, 'mousemove', step);
}
chart.addAnnotation({
x: clickX,
y: clickY,
allowDragX: true,
allowDragY: true,
anchorX: 'left',
anchorY: 'top',
title: title,
shape: shapeOpt
});
annotation = annotations[annotations.length - 1];
}
function step(e) {
// use renderer api for better performance
annotation.shape.attr(getParams(e));
}
function drop(e) {
Highcharts.removeEvent(document, 'mousemove', step);
// store annotation details
if (annotation) {
annotation.update({
shape: {
params: getParams(e)
}
});
}
annotation = null;
}
function sal(e)
{
// Highcharts.removeEvent(container, 'dblclick', step);
var each = Highcharts.each;
each(chart.annotations.allItems, function (item, i) {
if (item.selectionMarker) {
shape = item.shape.element.localName;
}
});
// var shape = $("input[type='radio']:checked").val(),
var shapeOpt = null,
x = null,
y = null,
width = null,
height = null,
radius = null;
clickX = e.pageX - container.offsetLeft;
clickY = e.pageY - container.offsetTop;
if (!chart.isInsidePlot(clickX - chart.plotLeft, clickY - chart.plotTop)) {
return;
}
if (shape == 'rect') {
x = clickX;
y = clickY;
width = 1;
height = 1;
radius = 1;
}
if (shape !== 'text') {
shapeOpt = {
type: shape,
params: {
r: shape == 'circle' ? 1 : 0,
d: shape == 'path' ? ['M', 0, 0, 'L', 1, 1] : null,
x: x,
y: y,
width: width,
height: height
}
};
title = null;
Highcharts.addEvent(document, 'mousemove', step);
}
annotation = annotations[annotations.length - 1];
}
// Highcharts.addEvent(container, 'mousedown', drag);
Highcharts.addEvent(document, 'mouseup', drop);
Highcharts.addEvent(container, 'dblclick', sal);
$('#ann1size').click(function() {
var ann = annotations[annotations.length - 1];
ann.update({
shape: {
params: {
r: 200
}
}
})
});
}
});
double click on square shape, you can resize it now.
double click on circle shape, its still resizing square shape.
Can you please let me know how to fix this issue that no matter which shape is double clicked, square is getting resized.
I think that right now you have problem with getting right annotation in your chart. You are getting always the same rect shape because you are using fixed:
annotation = annotations[annotations.length - 1];
Instead this line, you can set your annotation object inside Highcharts.each:
var each = Highcharts.each;
each(chart.annotations.allItems, function(item, i) {
if (item.selectionMarker) {
annotation = item;
shape = item.shape.element.localName;
}
});
Here you can see an example how it can work:
http://jsfiddle.net/1e1jnv7w/3/
Best regards.

Resources