Thanks to visit codestin.com
Credit goes to github.com

Skip to content

document uirevision #1228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 24, 2019
Merged

document uirevision #1228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions _posts/plotly_js/fundamentals/uirevision/2019-01-04-uirevision-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Javascript Graphing Library uirevision with Plotly.react | Examples | Plotly
name: uirevision in Plotly.react
permalink: javascript/uirevision/
description: Persist user interactions using uirevision with Plotly.react or Dash.
layout: user-guide
thumbnail: thumbnail/uirevision.gif
language: plotly_js
page_type: example_index
has_thumbnail: true
display_as: file_settings
order: 21
---
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","uirevision" | sort: "order" %}
{% include auto_examples.html examples=examples %}
50 changes: 50 additions & 0 deletions _posts/plotly_js/fundamentals/uirevision/2019-01-04-uirevision-persist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
name: Persist User Changes
plot_url: https://codepen.io/plotly/embed/ebMJEW/?height=550&theme-id=15263&default-tab=result
language: plotly_js
suite: uirevision
order: 1
sitemap: false
arrangement: horizontal
display_as: basic
markdown_content: |
Adding a `uirevision` attribute and then keeping it the same during the next call to Plotly.react ensures that user
interactions persist.
---
const rand = () => Math.random();
var x = [1, 2, 3, 4, 5];
const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});

// add random data to three line traces
var data = [
{mode:'lines', line: {color: "#b55400"}},
{mode: 'lines', line: {color: "#393e46"}},
{mode: 'lines', line: {color: "#222831"}}
].map(new_data);

var layout = {
title: 'User Zoom Persists<br>When uirevision Unchanged',
uirevision:'true',
xaxis: {autorange: true},
yaxis: {autorange: true}
};

Plotly.react(graphDiv, data, layout);

var myPlot = document.getElementById('graphDiv');

var cnt = 0;
var interval = setInterval(function() {
data = data.map(new_data);

// user interation will mutate layout and set autorange to false
// so we need to reset it to true
layout.xaxis.autorange = true;
layout.yaxis.autorange = true;

// not changing uirevision will ensure that user interactions are unchanged
// layout.uirevision = rand();

Plotly.react(graphDiv, data, layout);
if(cnt === 100) clearInterval(interval);
}, 2500);
50 changes: 50 additions & 0 deletions _posts/plotly_js/fundamentals/uirevision/2019-01-04-uirevision-reset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
name: Reset User Changes
plot_url: https://codepen.io/plotly/embed/REMrgv/?height=550&theme-id=15263&default-tab=result
language: plotly_js
suite: uirevision
order: 2
sitemap: false
arrangement: horizontal
display_as: basic
markdown_content: |
Changing the `uirevision` attribute during a Plotly.react call will reset previous user interactions in the updated plot.
---
const rand = () => Math.random();
var x = [1, 2, 3, 4, 5];
const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});

// add random data to three line traces
var data = [
{mode:'lines', line: {color: "#b55400"}},
{mode: 'lines', line: {color: "#393e46"}},
{mode: 'lines', line: {color: "#222831"}}
].map(new_data);

var layout = {
title: 'User Zoom Resets<br>When uirevision Changes',
uirevision:'true',
xaxis: {autorange: true},
yaxis: {autorange: true}
};

Plotly.react(graphDiv, data, layout);

var myPlot = document.getElementById('graphDiv');

var cnt = 0;
var interval = setInterval(function() {
data = data.map(new_data);

// user interation will mutate layout and set autorange to false
// so we need to reset it to true
layout.xaxis.autorange = true;
layout.yaxis.autorange = true;

// a new random number should ensure that uirevision will be different
// and so the graph will autorange after the Plotly.react
layout.uirevision = rand();

Plotly.react(graphDiv, data, layout);
if(cnt === 100) clearInterval(interval);
}, 2500);