Highchart general drawing svg label zoom-in on mouse hover - javascript

I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();

It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.

Related

Is it possible to to customize a dragmode to draw a custom shape in Plotly JavaScript?

In Plotly JavaScript, is it possible to draw a custom shape, selecting a custom tool from the mode bar?
For example I would like to select a tool similar to the Draw rectangle though draw a box with only the lower edge dotted, for which the shape object will result something like the following code, with a customized shapes.type
editable: true
fillcolor: "rgba(0,0,0,0)"
fillrule: "evenodd"
layer: "above"
line: { *** Different values for each edge *** }
opacity: 1
type: *** "rect_custom" ***
x0: 0.4278717712776724
x1: 0.8047015695458049
xref: "x"
y0: 0.8172631338756892
y1: 0.520997557750132
yref: "y"
Or to make things simpler, having a tool, from the mode bar, to draw a custom lines dotted or with an icon attached to the end of the line.
I know the is possible to define a custom function with relative custom icon in the mode bar, but I can't figure how to trigger the drawing function or how to customize that function.
Thanks!

Incorrectly displayed plot band icon in Highcharts

I am trying to create a graph with plot bands in Highcharts, where I want to insert an icon into the plot band.
It all works well except that I cannot get the icon to show below the actual series line. I set the zIndex of the icon to 1 and series to 2, but it seems to not do anything.
I looked at the documentation here:
http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex
But it should work based on that, but it does not, it works when I use text for the label, but not an image and the object has no specific class or ID so that I could target it with jquery and set the css manually.
To illustrate my point I made a fiddle:
http://jsfiddle.net/qwfj4x3j/
I used for example
{
color: null,
zIndex: -1,
from: 3.5,
to: 4.5,
label: {
text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
verticalAlign: 'top',
useHTML: true,
y: 25
}
},
As you can see, I set the zIndex of both the plot band and the actual image, and a higher zIndex for the series, but it does not work.
OK, so in the end I found a very elegant solution :)
I gave all the images a class and then after the graph is rendered, I call jquery command that targets all parent elements of this class, the span I originally needed to target, but could not because it had no class or id. Now I can call all these as parents of my image with particular class, asign them z-index of -1 and it works :)
If you render an image in that way HTML <img> will be rendered at the top of the svg - this is why the image covers svg elements.
Instead, you can use chart.renderer.image() method combined with axis.toPixels() methods to get x, y attributes in pixels.
var img;
function renderImage() {
var chart = this;
img = chart.renderer.image(
'http://simpleicon.com/wp-content/uploads/rain.png',
chart.xAxis[0].toPixels(0),
chart.yAxis[0].toPixels(10),
150,
150
)
.add();
}
function redrawImage() {
img.attr({
x: this.xAxis[0].toPixels(0),
y: this.yAxis[0].toPixels(10)
});
}
Example: http://jsfiddle.net/qwfj4x3j/2/
To have the image responsive like plot lines you need to adjust x, y attributes on redraw event.

SVG/JavaScript pie chart with outside labels constrained by container width

All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.
Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library

cursor styling in for flot pie chart

I was using flot pie chart(http://www.flotcharts.org/flot/examples/series-pie/index.html) example and succesfully drew the pie charts. While styling the pie chart, I was able to find the options for pie like colors and opacity and al. but I wanted to change the cursor styling on pie and I found that in the offcial flot page itself it is using ordinary cursor wehn we hover over pie slices. Instead i wanted to change it to cursor pointer styling.. when we give the creating canvas that property it will show pointer cursor for the whole canvas.. so if the canvas is big, it will be pointer cursor even if we hover outside pie graph. Ive also tried to giv the proeprty while at the time of creation,
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.3,
cursor : 'pointer',
stroke: {
color: '#ffffff',
width: 2.0
}
},
}
});
This will not work.. is there any solution for this issue?
Take a look at the 'hoverable' option, described under Customizing the Grid
in the docs and demonstrated in the pie example.
Leave the cursor at default to begin with, then change it to the pointer when you receive a hover event over a pie slice. When you receive a hover event with no attached slice, set the cursor back to default.
You could just target the pie chart and change the CSS class in your stylesheet:
.flot-overlay { cursor: pointer; }
It's not the most graceful way, but it will work!

Highcharts.js - Background color of axis only

Thanks in advance for your time and help.
I'm using highcharts and need to set the background color of only the x and y axis. See attached:
So what I need is to set a background color on the x-axis that is different from the dark gray of the graph (right now they are obviously the same)
Does anyone know if this is possible and, if so, how to go about it? I've been through the highcharts API Highstock API extensively, but couldn't find anything specifically for this.
Thank you again for your time and help!
Rich
Did you try:
rendered a rectangle and positioned it to the bottom of the graph.
chart.renderer.rect(0/*position on X-axis*/, 275/*position on Y-axis*/, 680/*width*/ , 25/*height*/, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
Read more: highchart renderer
x-asis does not have backgroundColor Set background color to HighChart xAxis labels
Hope this help.

Categories

Resources