Highlight the log while hovering over points in dash plotly - javascript

I have created a graph using dash. i am showing the logs corresponding to the xaxis range, ie. i am displaying the logs from one end of xaxis to the other end.
Now i want to add a feature like if anyone hover any points on graph, corresponding log get highlighted.
I tried many times but i failed each time.i am new in dash.
Thank you very much for your help.
Regards

Related

How to use multiple Curve's Stroke style at The Same Time - ApexChart

I got a problem while using ApexChart and struggling so much on how do I could remove the one that I give 'X'?
So basically, what I want to achieve is like the light blue line that I draw.
On ApexChart, there's a specific styling for this - Curve's Stroke.
I want to use Stepline and Straight at the same time but I don't know how. So what I did is using 2 different series (dummy random data) with line and area chart type, then the first one using stepline curve and the second one is using straight.
It turned out I almost achieving what I need to do but, the problem is the 'X' blue mark.
I didn't want it like that. I want it just start a straight line after that specific last value/category/you know what I mean.
Is there any workaround for me to look? Can anyone help me?
I've been struggling about this for days and I'm getting crazy about it.
Reference: Apex Chart Demo's Docs

Bokeh Zoom Out in the main figure

I am trying to plot a line graph on Bokeh and i am using 2nd y axis to the right side as well. For this reason i put y_axis_location to None. But when i am trying to change the start and the end option from Range1 does it only to the yaxis not in my main figure. The problem is that i want my application to plot as initial graph this that can be displayed after i zoom out as the 2nd picture above (after zoom out) but what i get is the 1st picture instead.
By the way i found what cause this error, it has to do with y_range_name which need to take the name of the y_range that you named at the starting point.

Highcharts: some x-axis labels are disappearing after using setExtremes()

I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz BlachliƄski are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid

Highcharts date tick position hiding removing

I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.

Dynamically applying plot bands to a Highcharts graph

I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().

Categories

Resources