myDiv.on('plotly_relayout', function(eventdata){ alert( 'ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' + 'x-axis end:' + eventdata['xaxis.range[1]'] ); });03-06-2019
This article is about combining vuejs and a chart framework/library plotly.jsI’ve been using this combination for about 6 months now and felt like writing about my solutions and ideas to combine these systems. Plotly.js has a implementation for react but not for angular or vuejs or similar frameworks.This implementation is not really complicated or hard to understand but maybe it will be able to help people skip the struggles I had. In this article I make use of the reactive properties but I will write another article that uses a global eventBus to control the charts. This will give you more control on when to update and if updates went correctly.03-06-2019
Plot.ly is a library commonly used to draw graphs and other web interfaces. It started with Python but now has many other implementations in different programming languages, like JavaScript and R. It also has special implementations to support some popular frameworks, like React and Angular.04-06-2019
Binding to Zoom Events04-06-2019
Plotly.react has the same signature as Plotly.newPlot above, and can be used in its place to create a plot, but when called again on the same04-06-2019will update it far more efficiently than Plotly.newPlot, which would destroy and recreate the plot. Plotly.react is as fast as Plotly.restyle/Plotly.relayout documented below.
Adding a uirevision attribute and then keeping it the same during the next call to Plotly.react ensures that user interactions persist.10-06-2019