i can't able to add image at my 3d chart:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
where i must add this code (for renderer image) ?
function (chart) { // on complete
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
.add();
});
thanks!
Related
I want some customization in the Gantt chart as follows:
display some text/html on the top left section (interaction of x and y-axis)
show x Axis (header) with black color in the background and some other customization in styles but got nothing in documentation.
Please refer attached image.
https://i.stack.imgur.com/Ir1gN.png
You can render text via SVG renderer, set position from the plot area. What interaction section do you mean, could you show screenshot?
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Gantt chart is draw by line, and draw automatically, you can't find background options for axis in our documentation.
Possibility to make this is draw rectangle by SVG renderer and set them under draw line.
chart: {
events: {
render: function() {
var chart = this,
series = chart.series,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth;
if (chart.myBackground) {
chart.myBackground.destroy();
}
chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
opacity: 0.5,
zIndex: -1
})
.add();
}
}
},
Live demo:
https://jsfiddle.net/BlackLabel/xmg31aez/
I change the color and radius of my spline's marker as soon as it crosses a certain value by using point.update however now I am aggregating the data using dataGrouping and I have lost that ability. How can I color the aggregated data point?
Currently it is not possible to update grouped points. Please check a thread in this github isssue: https://github.com/highcharts/highcharts/issues/5147
However, you can use attr method directly on SVG point elements:
chart: {
events: {
load: function() {
var points = this.series[0].groupedData;
points.forEach(function(point) {
if (point.y > 30) {
point.graphic.attr({
width: 8,
height: 8,
fill: 'red',
translateX: -2
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/58afeL47/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
What I am trying to achieve is showing the transformer around the custom shape itself. I took the code directly from the API docs for creating the custom shape and adding the transformer. The transformer works great for rectangles, circles, etc but for custom shapes, it doesn't seem to appear properly.
Here is a link to a demo app with the issue with custom shapes and transformer:
https://jsfiddle.net/5zpua740/
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
sceneFunc: function (context) {
context.beginPath();
context.moveTo(120, 150);
context.lineTo(320, 180);
context.quadraticCurveTo(250, 200, 360, 270);
context.closePath();
// Konva specific method
context.fillStrokeShape(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// add the triangle shape to the layer
layer.add(triangle);
// add the layer to the stage
stage.add(layer);
stage.on('click', function (e) {
// if click on empty area - remove all transformers
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
})
In this sample, you can see that if you click on the object, the transformer appears in the corner. You can still use it to manipulate the object but it's not around the object itself.
Any help appreciated! Thanks in advance.
Konva can't detect bounding box of a custom shape. But we can simply help it. We just need to define a method getSelfRect.
The method should return bounding box of a shape without transforming applied (like the shape has no rotation, no scaling and placed in x =0, y=0).
We can do this by just looking at sceneFunc:
triangle.getSelfRect = function() {
return {
// sceneFunc started from moving to 120, 150 point
// so it is our top left point
x: 120,
y: 150,
// the bottom right point finished with quadraticCurveTo
// I will use the coordinates to calculate size of the shape
width: 360 - 120,
height: 270 - 150
};
}
Demo: http://jsbin.com/lazuhowezi/2/edit?js,output
i'm using Highcharts to create a pie, and I need to put user's profile image in a circle in the middle of it. I have managed to add the image but couldn't get it to be round, and I managed to add a circle but without image background :/
what it the best way to combine the tow?
by the way it must be part of the svg and not an absolute div on top of the pie, because the tooltip needs to be on top of that image with opacity
to add a circle I used this code :
var pixelX = 438;
var pixelY = 276;
var pixelR = 70;
// add my circle
chart.renderer.circle(pixelX, pixelY, pixelR)
.attr({
zIndex: 100,
align: 'center',
// fill: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
color: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
stroke: 'black',
'stroke-width': 2
})
.css({
backgroundImage :'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)'
})
.add();
});
this example shows how to do it with pure SVG : http://jsfiddle.net/9zkfodwp/1/
resolved it by defining a pattern with the img, works fine but now need to find a way for the pattern to be no-repeat.
code used to add pattern:
function(chart) { // on complete
var r = chart.renderer,
pattern = r.createElement('pattern')
.attr({
id: 'pattern',
patternUnits: 'userSpaceOnUse',
x: 0,
y: 0,
width: 180,
height: 190,
viewBox: '0 0 135 135'
})
.add(r.defs);
r.rect(0, 0, 135, 135, 0)
.attr('fill', '#ddd')
.add(pattern);
r.image(profileImg,0,0,135,135)
.add(pattern);
});
and when I add the circle it can have a fill of the pattern:
// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
fill: 'url(#pattern)'
});
this.circle.add();
I want to use chart.renderer.image to put a image on Yaxis. Please see this fiddle
Is there a easy way to put the image on Yaxis? For example I want to put the image on Yaxis [0,100]. It is very difficult to using the following way to do that.
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 0, 10, 30, 30)
.add();
In this line:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
.add();
first two parameters are responsible for position (x,y). So you should modify it to position object in yAxis, like in the example: http://jsfiddle.net/F4qS8/701/