I'd like to make hoverable tooltips for x-axis markings, I used basically the same code in this demo.
http://people.iola.dk/olau/flot/examples/annotating.html
Imagine the text next to the vertical lines hidden, and when you mouse over the markings, the text were to show up. That's basically what I am trying to accomplish. I have tried using the flothover event but markings don't show up in those. Is there a plugin or something that performs a similar action?
Try binding to the x-axis marking div instead.
$(".flot-x-axis .tickLabel").bind("mouseover",functionThatDisplaysTooltip);
Related
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I want to use both animated zoom and range selector in the vertical barchart plotted using Dygraph. Setting both animateZoom and rangeSelector options to true is not working . But any one of these two are working fine individually.Please suggest me the solution. Any help would be greatly appreciated.
Those two options don't work very well together, so the combination is disabled. When you have a range selection, you typically zoom the chart by dragging the handles on either end of the selected range. The resulting sequence of mousemove events results in what looks like an animated zoom. Animating the zooms between those events would be superfluous.
Seems like there is a workaround. Try this:
1. disable range selector initially
2. have a button in your page that has an event handler that updates the graph options and sets rangeSelector to true
3. click this button on document load. Now both animatedzoom and range selector will work
Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....
I'm using HighCharts, and I would like to use the crosshairs from the tooltip to help the user to hover a particular point. When the point is hovered I would like to show the information of that point in another div (that is done), but I would like to prevent the tooltip box to appears. Here is the "working" code: http://jsfiddle.net/Mw8WB/266/ . As you can see, I did a display:none in the tooltip, but there is a "circle" that is still there.
Appreciate any help :)
One of the tooltip options is formatter. It is a callback function to format the text of the tooltip. You can disable the tooltip by returning false from this function.
You can see the example here
http://jsfiddle.net/76LwZ/
and the documentation here
http://www.highcharts.com/ref/#tooltip