this example: Synchronisation of multiple charts
use the chartx and charty position of the mouse to detect which data point is hovered. But if u want to sync charts with different sizes... of course it stops working.
the charts are timeseries with the same data length. Is there a way to synchronise relative?
Greetings mok
It's not working as you expecting, because it's not taking current xAxis focused value, but actually the pointer position.
However, I found the example on our Highcharts forum, which shows how to draw the crosshair on all charts, basing on current xAxis position instead of pointer one, so it should help you to solve your problem.
Please refer to this topic: https://forum.highcharts.com/highcharts-usage/synchronize-line-chart-with-xrange-chart-t39781/?hilit=synchronization&sid=72b63bab7545ef4ba2c4a102ef52cfa5
Related
I'm currently trying to add a horizontal scroll bar below x-axis to control data displayed along x-axis.
The chart that I'm using is the following link.
https://arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0904-3dSpectrogramBox.html?theme=lightNew&page-theme=light
[3d Box Series Spectogram]
Unfortunately, there is not much information I can find on the API documentation about adding a scroll bar.
The closest api is 'setScrollStrategy' API.
Thus, I've added the following code snippet.
this.chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategy.progressive)
But it didn't make any noticeable change..
If Anyone has similar experience to share with me to implement such functionality, I'd be grateful.
At least I can say that there is no built-in functionality for this kind of scroll bar in 3D.
Programmatically you can alter the Axis interval like this
chart3D.getDefaultAxisX().setInterval(20, 40, false, true)
However, this is probably what you are after, since this just affects the positioning and scaling of the data, the samples outside this interval are not clipped out.
Connecting some sort of slider component to this interval would be straightforward, whereas adding this slider inside the 3D view under the X axis sounds tricky.
I'm using plotly.js to plot real time data. I'm using the extendTraces method to do so. As can be seen, as new data comes in, the number of points on screen increases, and the graph condenses. I'd like to have the graph pan automatically to the right at a certain point (say 20 points). I was looking at the possible events for this in the documentation, it would seem after_plot would be my best bet though I don't know if extendTraces creates an after_plot event. Either way, is there a function to automatically pan the chart? I can't seem to find this information anywhere.
It was not intuitive for me to find this so I can see why you had trouble finding the answer. But it appears that zoom and pan are controlled by the range attribute of one of the axes attributes. If you want to zoom or pan on the x axis, you need to change the range attribute on the xaxis attribute of the layout.
as a part of an app that I'm developing, I am looking for an open source pie chart which can be manipulated on mobiles effectively.
I've found great pie charts such as Flot, jqPlot, HighCharts, etc. however, they only show configured values. While I don't need slice animations of click events, I do need a pie chart with the capability of changing its values from the chart itself, in a way similar to this.
The point is that I want to force a user to have his values sum up at 100 by favoring a slice and increasing its size at the price of lowering another slice.
Thanks in advance.
Chart.js is what you're looking for. If you have a look on the bottom right of the home page you'll see interactivity. You can trigger events when an element is clicked that will resize the chart as long as you are willing to do some javascript yourself.
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.
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.