I have created the BBox on a Average line. i have created the BBox by the following code
$('#container').highcharts({
chart: {
zoomType: 'x',
},
.
.
.
.
}, function(chart){
if(chart.series[0].data[1])
{
var point = chart.series[0].data[1],
text = chart.renderer.text(
'Average='+Math.ceil(point.y)+" s",
point.plotX + chart.plotLeft - 45,
point.plotY + chart.plotTop - 13
).attr({
zIndex: 5
}).add(),
box = text.getBBox();
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
.add();
}
});
the box have been created
I want to change the BBox location according to average line when the zoom property in role.
How can i do this ..Thanks in Advance
You need to use your code in the redraw() event in highcahrts. Take care about destroy (old rendered object) and create new one, or translate it.
Example:
http://jsfiddle.net/be2ebcg2/1/
Related
I know it is weird but I want to customize step line chart like horizontal step is thicker and vertical step is thinner, is there any way to achieve this?
Thanks in advance
You can render other lines in the same positions as the horizontal ones. Please check the below solution:
chart: {
events: {
render: function() {
const points = this.series[0].points;
points.forEach(point => {
const nextPoint = points[point.index + 1];
if (nextPoint) {
const d = [
'M',
point.plotX + this.plotLeft - 1,
point.plotY + this.plotTop,
'L',
nextPoint.plotX + this.plotLeft + 1,
point.plotY + this.plotTop
];
if (point.customPath) {
point.customPath.attr({
d
});
} else {
point.customPath = this.renderer
.path([])
.attr({
d,
stroke: 'red',
'stroke-width': 7
})
.add();
}
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wc5zrax9/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I'm trying to build some chart like this one:
Chart Visual
But the main struggle is to add two different series that complement each other.
I really appreciate any help that someone could give me.
Many thanks in advance.
You can achieve it, but the process of implementation is not so easy. I prepared the example which shows how to do that, and I will try to explain what I did, step by step.
First, you need to define your data array just like that:
var data = [40, 30, 10, 20]
Then define your chart configuration, and inside of chart.events.load function handler put whole logic of creating desired effect.
Next step is iterate on all data positions, and create its own specific point, series, yAxis and pane, basing on calculations like below:
load() {
var chart = this,
series = [],
panes = [],
yAxes = [],
radius = 112,
innerRadius = 88,
pointAngle,
prevPointAngle = 0,
pointPadding = (radius - innerRadius) / 4,
colors = Highcharts.getOptions().colors,
additionalPointPadding = 2;
data.forEach(function(p, i) {
pointAngle = (p * 360) / 100 // Calculate point angle
// Prepare pane for each point
panes.push({
startAngle: prevPointAngle + pointPadding + additionalPointPadding,
endAngle: (pointAngle + prevPointAngle) - pointPadding - additionalPointPadding,
background: [{
backgroundColor: '#fff',
borderWidth: 0
}]
})
// Prepare yAxis for specific pane
yAxes.push({
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
pane: i
})
// Prepare series with specific point
series.push({
name: 'Exercise ' + i,
data: [{
color: colors[i],
radius: radius + '%',
innerRadius: innerRadius + '%',
y: 100,
percents: p
}],
yAxis: i
})
prevPointAngle += pointAngle
})
And finally, update our chart by new objects:
chart.update({
pane: panes,
yAxis: yAxes,
series: series
},true, true)
Last thing you have to know, that your chart configuration should have the same amount of empty objects in pane array, like the data positions, e.g:
var data = [10, 80, 10]
(...)
pane: [{},{},{}]
Here is the example which shows the final effect: https://jsfiddle.net/yamu5z9r/
Kind regards!
I have a chart with an events.load function that draws some lines based on the charts properties.
The loading function works exactly how I'd like it to, but I'd like to erase and re-draw the lines each time the chart gets redrawn (such as hiding a series).
I added the same function (with erasing) on the chart.events.redraw function thinking this would do the trick, but the object given to the redraw() function is the previous chart properties, not the new properties.
For example in the fiddle, if you hide Canada, the x axis changes, but the lines don't get rendered. But click Canada again to un-hide, and the chart is re-drawn, but with the prior properties.
Is there a way to redraw but with the newly redrawn chart properties?
Thanks!
See (fiddle).
events : {
load: function(){
var ren = this.renderer;
// Get data from the highcharts object
var plot = this.plotBox;
var zeroGridLine = this.yAxis[0].ticks[0].gridLine.d;
var zeroGridLineArray = zeroGridLine.split(' ');
var topPos = plot.y; // top of the chart
var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]); // position of the zero line
var bottomPos = topPos + plot.height; // bottom of the chart
var vertLinePos = parseFloat(zeroGridLineArray.slice(-2)[0]) + 8; // vertical line position
var horizWidth = 5; // width of the horizontal lines
var strokeWidth = 1; // thickness of the line
var stroke = 'black'; // color of the line
// exports vertical line
ren.path(['M', vertLinePos, topPos, 'L', vertLinePos, zeroPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_0'
})
.add();
// imports vertical line
ren.path(['M', vertLinePos, zeroPos, 'L', vertLinePos, bottomPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_1'
})
.add();
// Horizontal line to separate import/export
ren.path(['M', vertLinePos - horizWidth, zeroPos, 'L', vertLinePos + horizWidth, zeroPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_2'
})
.add();
// top horizontal line
ren.path(['M', vertLinePos - horizWidth, topPos, 'L', vertLinePos + horizWidth, topPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_3'
})
.add();
// bottom horizontal line
ren.path(['M', vertLinePos - horizWidth, bottomPos, 'L', vertLinePos + horizWidth, bottomPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_4'
})
.add();
// label imports and exports
ren.text('Exports',vertLinePos + 5,((zeroPos - topPos) / 2) + topPos + 3 )
.attr({id: 'impExpLines_5'})
.add();
// label imports and exports
ren.text('Imports',vertLinePos + 5,((bottomPos - zeroPos) / 2) + zeroPos + 3 )
.attr({id: 'impExpLines_6'})
.add();
},
redraw : function(){
// clear previosuly drawn lines
$("[id^=impExpLines_]").remove();
var ren = this.renderer;
// Get data from the highcharts object
var plot = this.plotBox;
var zeroGridLine = this.yAxis[0].ticks[0].gridLine.d;
var zeroGridLineArray = zeroGridLine.split(' ');
var topPos = plot.y; // top of the chart
var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]); // position of the zero line
var bottomPos = topPos + plot.height; // bottom of the chart
var vertLinePos = parseFloat(zeroGridLineArray.slice(-2)[0]) + 8; // vertical line position
var horizWidth = 5; // width of the horizontal lines
var strokeWidth = 1; // thickness of the line
var stroke = 'black'; // color of the line
// exports vertical line
ren.path(['M', vertLinePos, topPos, 'L', vertLinePos, zeroPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_0'
})
.add();
// imports vertical line
ren.path(['M', vertLinePos, zeroPos, 'L', vertLinePos, bottomPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_1'
})
.add();
// Horizontal line to separate import/export
ren.path(['M', vertLinePos - horizWidth, zeroPos, 'L', vertLinePos + horizWidth, zeroPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_2'
})
.add();
// top horizontal line
ren.path(['M', vertLinePos - horizWidth, topPos, 'L', vertLinePos + horizWidth, topPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_3'
})
.add();
// bottom horizontal line
ren.path(['M', vertLinePos - horizWidth, bottomPos, 'L', vertLinePos + horizWidth, bottomPos])
.attr({
stroke: stroke,
'stroke-width': strokeWidth,
id: 'impExpLines_4'
})
.add();
// label imports and exports
ren.text('Exports',vertLinePos + 5,((zeroPos - topPos) / 2) + topPos + 3 )
.attr({id: 'impExpLines_5'})
.add();
// label imports and exports
ren.text('Imports',vertLinePos + 5,((bottomPos - zeroPos) / 2) + zeroPos + 3 )
.attr({id: 'impExpLines_6'})
.add();
}
}
In short, instead of using the actual drawn grid lines and parsing their location, use the toPixels function which is a utility method to translate an axis value to pixel position. In your code you have the line:
var zeroPos = parseFloat(zeroGridLineArray.slice(-1)[0]); // position of the zero line
Replace that line with:
var zeroPos = this.yAxis[0].toPixels(0); // position of the zero line
See this JSFiddle demonstration.
I didn't specifically read through the rest of your code, but you might also be able to more easily establish the top and bottom of the axis using this method instead of parsing.
I need two labels for a column, one above to show the score and one below to show if it is a "test" or a "retest". How do I go about doing it?
I assume complicated calculation is needed, something like this? http://jsfiddle.net/72xym/4/ (but I can't really understand)
I got other diagrams need to achieve this as well. Basically I need to do this:
My code is inside here: http://jsfiddle.net/kscwx139/6/
I did this for the part to add the label:
..., function() {
var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[];
for(i=0; i<this.series.length; i++) {
labels[i] = [];
for(j=0; j<this.series[i].data.length; j++) {
labels[i][j] = this.renderer.label(self.series[i].name)
.css({
width: '100px',
color: '#000000',
fontSize: '12px'
}).attr({
zIndex: 100
}).add();
labelBBox = labels[i][j].getBBox();
labels[i][j].attr({
x: 100, //1) what to put here?
y: 100 //2) what to put here?
});
}
}
}
I would do something like this:
var chart2 = new Highcharts.Chart(options2, function() {
var i = 0, j = 0, len_i, len_j, self = this, labelBBox, labels=[], point;
for(i=0; i<this.series.length; i++) {
labels[i] = [];
for(j=0; j<this.series[i].data.length; j++) {
labels[i][j] = this.renderer.label(self.series[i].name)
.css({
width: '100px',
color: '#000000',
fontSize: '12px'
}).attr({
zIndex: 100,
align: "center"
}).add();
point = this.series[i].data[j];
labelBBox = labels[i][j].getBBox();
labels[i][j].attr({
x: point.plotX + this.plotLeft + point.series.pointXOffset + point.shapeArgs.width / 2,
y: this.plotTop + this.plotHeight - labelBBox.height
});
}
}
});
Demo: http://jsfiddle.net/kscwx139/7/
Note: I would suggest using chart.redraw event to update labels position (label[i][j].animate({ x: ..., y: ... });) when resizing browser, updating data, etc.
Short explanation:
point.plotX - x-position in the plotting area (center of the point's shape)
this.plotLeft - left offset for left yAxis (labels, title)
point.series.pointXOffset - offset for multiple columns in the same category
this.plotTop - the same as plotLeft but from top ;)
this.plotHeight - height of the plotting area
labelBBox.height - height of the label to place it above the xAxis line
I am new to Kineticjs and not a great javascript coder so I am hoping to get some help with this example.
http://jsfiddle.net/pwM8M/
I am trying to store the x axis on doors so when a redraw unrelated to the doors is done they don't go back to the default position. (multiple types of doors and windows too)
Each form element can have multiple quantities (more than one door) so I need a way to store/retrieve the data currently contained in the alert on jsfiddle.
I did some research but have come up empty. Can anyone help with what I have provided?
function OH(x,y,w,h) {
var oh = new Kinetic.Text({
x:x,
y: y,
width: w*scale,
height: h*scale,
stroke: wtc,
strokeWidth: 1,
fill: 'brown',
fontSize: 6,
fontFamily: 'Calibri',
padding:4,
text: w+' x '+h+' OH\n\n<- DRAG ->',
align: 'center',
textFill: 'white',
draggable: true,
dragConstraint:'horizontal',
dragBounds: {
left:xoffset, right: xoffset+width+length-(w*scale)
}
});
oh.on('dragend', function(e) {
alert(oh.getPosition().x);
});
window.south.add(oh);
}
Thanks,
I have fixed sized 40x40 rectangle here in which i am using dragging function. try this
var box = new Kinetic.Rect({
x: parseFloat(area.size.x),
y: parseFloat(area.size.y),
width: 40, //parseFloat(area.size.width)
height: 40,
fill: area.color,
stroke: 'black',
strokeWidth: 1,
opacity: 0.6,
id : area.id + id,
draggable: true,
dragBoundFunc: function(pos) {
// x
var newX = pos.x < 0 ? 40 : pos.x;
var newX = newX > _self.canvasWidth - area.size.width ? _self.canvasWidth - area.size.width : newX;
// y
var newY = pos.y < 0 ? 40 : pos.y;
var newY = newY > _self.canvasHeight - area.size.height ? _self.canvasHeight - area.size.height : newY;
return {
x: newX,
y: newY
};
Use this function
box.on('dragend', function() {
_self.draw = false;
_self.dragArea(area, box);
});
and try this to play with x y coordinates
dragArea: function(area, box){
if(box){
$$('#' + this.formId + ' [name="areas[' + area.id + '][size][x]"]').first().value = parseInt(box.attrs.x);
$$('#' + this.formId + ' [name="areas[' + area.id + '][size][y]"]').first().value = parseInt(box.attrs.y);
area.size.x = parseInt(box.attrs.x);
area.size.y = parseInt(box.attrs.y);
}
},
Create a new array before the function, like so:
var xArray = new Array();
then inside your function
oh.on('dragend', function(e) {
alert(oh.getPosition().x);
// ADD NEW ITEM TO ARRAY, STORE X POSITION
xArray.push(oh.getPosition().x);
});
and so all the x values get stored in the array.
If you need to clear the array, you can simply create a new one again with the same name.
And you can iterate through it with a loop if needed.
updated:
http://jsfiddle.net/pwM8M/2/