GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Javascript (v4.1.1)
  • Python (v7.1.0)
  • R
  • Julia
  • Javascript (v4.1.1)
  • ggplot2
  • MATLAB
  • F#
  • Download Studio
  • Studio and Cloud Pricing
  • Dash Enterprise Pricing
  • Getting Started
  • Is Plotly Free?
  • Figure Reference

This view

  • Original page
  • New address

GeezerVison is showing plotly.com — Uirevision in plotly.react in JavaScript

Quick Reference
On This Page
View open positions at Plotly.

Persist User Changes

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: {text: 'User Zoom Persists<br>When uirevision Unchanged'},
	uirevision:'true',
	xaxis: {autorange: true},
	yaxis: {autorange: true}
};

Plotly.react('myDiv', data, layout);

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

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

	// user interaction 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('myDiv', data, layout);
	if(cnt === 100) clearInterval(interval);
}, 2500);

Reset User Changes

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: {text: 'User Zoom Resets<br>When uirevision Changes'},
	uirevision:'true',
	xaxis: {autorange: true},
	yaxis: {autorange: true}
};

Plotly.react('myDiv', data, layout);

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

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

	// user interaction 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('myDiv', data, layout);
  if(cnt === 100) clearInterval(interval);
}, 2500);
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.