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.
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.
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
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.
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.
I have a line graph in d3, and we need to implement specific zoom levels, similar to Google maps. I want a mouse wheel zoom in action to snap/transition to the next possible inward zoom level, and a mouse wheel zoom out action to snap/transition to the next possible outward zoom level.
My setup for the zoom method is similar to everyone else's:
self.plot.call(d3.behavior.zoom().x(self.x).y(self.y).on("zoom", self.redraw()));
But I don't know enough about d3 (nor do I have tons of time left...) to know how to set this. Any tips/help?
You can change your zoom event listener to interject the event and adjust the scale as you like (e.g. round to the next integer). There's a blog post that explains a bit more here.
This is a bit more work than simply attaching the zoom behaviour to an axis, but d3 doesn't offer anything to restrict the zoom levels out of the box.