This question already has answers here:
Move images rendered on highcharts on resize
(2 answers)
Closed 8 years ago.
I've created this highchart but I need the renderer.text to scale with the parent highchart. For example. In the second chart i changed the max and min width so that the chart scales within the min and max values but the render.text stays static. I want to make the 2nd fiddle look like the 1st fiddle whenever the user changes width. Thank you for your help.
http://jsfiddle.net/jimbob25/V446C/
http://jsfiddle.net/jimbob25/V446C/1/
renderer.path(['M', 485, 40, 'L', 505, 40, 505,300, 485, 300])
.attr({
'stroke-width': 1,
stroke: 'red',
zIndex: 3
})
.add();
renderer.text('+/-2%', 435,93)
.attr({
zIndex: 3
})
.css({
color: '#000000',
fontSize: '12px'
})
.add();
In the second fiddle you had set the height:400px; width:530px; so you had fix the values and chart wont scale therefore you should set min-width and min-height you also can set max-width and max-height.
Here is the fiddle
Osyan thank you for the help but what i meant was the renderer text doesnt scale with the image.
I ended up drawing my renderer to work for 530px width, then anytime the hgihchart resizes i get the offset and redraw the images with that offset
redraw: function() {
var offset = 530 - chart.chartWidth;
initDrawing(chart,offset);
}
and then
function initDrawing(chart,offset){
$("#alert1").remove();
$("#greenArrow1").remove();
//Clear all of the old elements by id because we will redraw new ones.
// subtract the offset and add to chart
renderer.text('+/-2%', 435-offset, 40)
.attr({
id: 'alert1'
})
.css({
color: '#000000',
fontSize: '12px'
})
.add();
Related
Is it possible to blur a closed path element that has a fill using paperjs? Would I have to create an SVG feGaussianBlur primitive for each path that I wanted to blur? How would that affect performance if there were a few hundred path elements on the canvas? I thought about making use of the shadowBlur with some color magic, where the shadow would match the selected path, but it's not quite the same effect. I do not want to use raster.
A trick could be to use the shadowBlur property of the item.
The only thing is that the shadow is only drawn if the item has a fill.
And we don't want the fill to be displayed but only the shadow.
So we could make clever usage of blend modes to hide the fill but not the shadow.
Here's a simple sketch demonstrating this.
new Path.Circle({
center: view.center,
radius: 50,
shadowColor: 'black',
shadowBlur: 20,
selected: true,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply',
});
edit
This technique indeed seems to reach a limit when trying to stack items on top of each other.
We can prevent the multiply blend mode from "bleeding out" by wrapping the item into a group which has a blend mode of source-over. This has the effect to scope the children blend modes.
But there is still a trick to find to compose the items together.
Here's a sketch demonstrating where I stopped my investigation.
I'm quite sure that you can find a solution following this track.
function drawBlurryCircle(center, radius, blurAmount, color) {
const circle = new Path.Circle({
center,
radius,
shadowColor: color,
shadowBlur: blurAmount,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply'
});
const blurPlaceholder = circle
.clone()
.set({ shadowColor: null, fillColor: null })
.scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width);
return new Group({
children: [circle, blurPlaceholder],
blendMode: 'source-over'
});
}
drawBlurryCircle(view.center, 50, 20, 'red');
drawBlurryCircle(view.center + 30, 40, 30, 'lime');
drawBlurryCircle(view.center + 60, 30, 30, 'blue');
I use this activity gauge highchart graph. But, when I resize it. The layout become a mess. In this fiddle, I change the height and width of the graph. But, the label is misplaced.
chart: {
type: 'solidgauge',
marginTop: 50,
width:700,
height:700
},
You must to update tooltip and stroke position according to you new chart width and height like this :
tooltip: {
...
positioner: function (labelWidth) {
return {
x: 350 - labelWidth / 2, // edited
y: 320 // edited
};
}
}
Updated fiddle
I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?
You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/
I did responsive Meteogram , but when the browser window is enlarged, the icons ( clouds, sun ) don't move. How to get around this ?
[http://jsfiddle.net/fsrqvn9f/2/][1]
You aren't telling the chart to move those items. You'll need to add a handler for the chart redraw event:
chart: {
renderTo: this.container,
marginBottom: 70,
marginRight: 40,
marginTop: 50,
plotBorderWidth: 1,
events: {
redraw: function () {
// remove chart annotations
meteogram.onChartLoad(meteogram.chart);
}
}
},
I didn't write the code to remove the annotations, but you'll need to implement that also. I'd reccommend adding them to a group, so you can remove them all at once.
http://jsfiddle.net/fsrqvn9f/4/
EDIT - Removing the icons.
Here's what you would do to remove the weather icons. You'll need to do something similar for the Wind arrows.
When you add the icons to the graph, add them in a named group. In this case I named the group weatherSymbols. highcharts will create you elements with the class highcharts-weatherSymbols (or 'highcharts-' + grouname). This way you can easily find these items to remove them later.:
// Create a group element that is positioned and clipped at 30 pixels width and height
group = chart.renderer.g('weatherSymbols')
.attr({
translateX: point.plotX + chart.plotLeft - 15,
translateY: point.plotY + chart.plotTop - 30,
zIndex: 5
})
Then removing them is as easy as:
events: {
redraw: function () {
// remove chart annotations
$('.highcharts-weatherSymbols').remove();
meteogram.onChartLoad(meteogram.chart);
}
}
In my browser (Firefox 12), this example of a Highcharts Chart looks not correct. The labels are not styled in the same radius as the background radius is.
Is there any option in Highcharts to fix this?
Thx in advance.
Yes, there are options on the label that will fix this. If you format the label according to the below code the label should arc properly around the gauge.
labels: {
step: 2,
rotation: 'auto',
align: 'center',
distance: 15,
x: 0,
y: 0
},
I updated your jsfiddle to demonstrate. You were missing the x and y position offsets.