I am working with Plotly.js in a space where i need to dynamically change the data loaded in a plot.
The approach I took was to re-plot the plot div with new data that would be taken from a json. The data will be selected based on input boxes which will select the data from the json.
I have included a basic example in the snippet below.
How to reproduce:
- Change the left selector to 'week'.
- Then change the right selector to 'profit'.
- Then change the left selector back to 'month'.
After this the plot will not display for this specific combination even though the correct data exists before the newPlot call.
However if you reload the snippet and then cycle through all the options in the right box initially and repeat the above process. It will work as expected.
Why does it only happen when selections are done in this order?
var RevenueTrend = class {
constructor(e) {
this.data = e;
this.periodicitySelector = document.getElementById('revenue_trend_periodicity');
this.measureSelector = document.getElementById('revenue_trend_measure');
// set default data
this.#a('monthly', 'revenue');
// set callbacks for boxes
this.periodicitySelector.addEventListener('change', () => {
this.updateBySelector()
}, !1);
this.measureSelector.addEventListener('change', () => {
this.updateBySelector();
}, !1);
}
updateBySelector = () => {
this.#a(this.periodicitySelector.value, this.measureSelector.value);
};
#a = (e, t) => {
let r = this.data.data[t][e];
let i = this.data.layout[t];
let c = this.data.config;
// Plotly.purge('revenue_trend');
Plotly.newPlot('revenue_trend', r, i, c)
};
}
let data = {
"config": {
"displaylogo": false,
"editable": true,
"responsive": true,
"scrollZoom": false
},
"data": {
"margin": {
"monthly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
0.34047666529174736,
0.3457742367934246,
0.360425447773756,
0.35145317789771846,
0.35262465169115526,
0.36081828971765284,
0.3482103705232538,
0.3544357552302324,
0.3560519434681411,
0.3530277177894459,
0.3481856525787436
]
}
],
"weekly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
0.3525772625730744,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.32872302637273987,
0.31988710760016853,
0.6648776759648305,
0.36251039456330314,
0.3479492487227466,
0.36032892904889136,
0.35825354939402965,
0.3652140945623148,
0.35702058696618694,
0.3357665025509389,
0.35910528738699476,
0.3427007353759514,
0.34856822640364327,
0.37832888011952154,
0.34193158789278555,
0.35641605769889595,
0.3448526126036418,
0.3601298674795317,
0.34371914770696416,
0.35507083830741926,
0.35928883722389243,
0.3761116965344845,
0.3747882834748884,
0.3368771464780037,
0.34942511673599835,
0.3455765848399854,
0.3532858548316179,
0.36141903268210585,
0.3498830917602961,
0.3618410934198679,
0.3438166358418366,
0.34449309768685416,
0.356864537860347,
0.34723529927268637,
0.3676745634890173,
0.3618693942594029,
0.34298588976218763,
0.3352566880165647,
0.3604452053811187,
0.3747103844651644,
0.3606845347991698,
0.35760695701012907,
0.35939319863236174,
0.3143066542562211,
0.0,
0.0
]
}
]
},
"profit": {
"monthly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
82241.71801566076,
698471.2893310541,
809776.0576551692,
905852.9974110408,
806949.604447975,
879519.9288410447,
826189.5344694187,
808316.6091934182,
906734.9758119395,
979581.009182293,
908955.4254592669
]
},
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2020,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
1135979.408899994,
964943.64602906,
995304.3674288283,
1024706.6108813051,
1103515.5129930207,
1015253.3387089209,
1031872.3701810606,
961556.9417143296,
960168.8140742977,
975513.6905591306,
940461.8968359237,
957659.4350654411
]
}
],
"weekly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
53940.84905653694,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
112362.51304952896,
88316.08623819001,
-13591.410108961667,
363463.5909494356,
230162.22721852647,
205764.7039970004,
181015.46405094466,
191425.28083589178,
185312.97173273505,
179535.2064339334,
209365.34755655692,
189140.77872531046,
192786.1297563088,
210319.9968558866,
174347.49981516943,
233383.52298594668,
177403.35738587088,
192778.39938264445,
206603.86815812724,
205930.40940254647,
197144.6390165437,
181545.0009244157,
209428.82504632138,
189043.93557342276,
174954.73107864038,
186139.80161511753,
154918.25249529246,
235388.5039071208,
184606.3008933945,
191768.82369324705,
196552.9806996637,
166520.89121735393,
240248.02746187564,
195047.01679875085,
231842.86053096992,
185437.38300792413,
200771.21331067267,
230667.93972635642,
224753.03475951828,
211027.61818081193,
210132.7742313298,
240756.1128576225,
210571.98628046684,
193553.70303329843,
0.0,
0.0
]
}
]
},
"revenue": {
"monthly": [
{
"hovertemplate": "Revenue: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
241548.76500916603,
2020021.2017193772,
2246722.762382407,
2577450.011491051,
2288409.5044913036,
2437570.250469525,
2372673.5456727156,
2280572.9875315665,
2546636.782767828,
2774799.1441469146,
2610548.1909645973
]
}
],
"weekly": [
{
"hovertemplate": "Revenue: %{y:$.3s}<br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
152990.15218077847,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
341815.1575488382,
276085.16923594667,
-20441.97090726295,
1002629.4318740314,
661482.1789769826,
571046.8613778194,
505271.9347990396,
524145.3812600044,
519054.0223673036,
534702.5539174988,
583019.3954535999,
551912.3806892863,
553080.0433114112,
555918.4294612729,
509890.0072076319,
654806.4205993534,
514432.40068988653,
535302.4472306541,
601083.3831528822,
579969.9304628688,
548707.9435582134,
482689.0591204212,
558792.3483215119,
561165.8064366985,
500693.0603984721,
538635.4567434222,
438506.80794771464,
651289.7291553597,
527622.8124217782,
529980.7765911351,
571679.6693633012,
483379.47069326247,
673219.1125022703,
561714.2531513739,
630565.4063498881,
512442.8480265313,
585362.8948114432,
688033.8199694896,
623542.8614506731,
563175.2599598169,
582594.3558914505,
673242.2514106827,
585909.7698058267,
615811.6616758438,
0.0,
0.0
]
}
]
}
},
"layout": {
"margin": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Margin Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickformat": ".1%",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Margin"
}
}
},
"profit": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Profit Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Profit"
}
}
},
"revenue": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Revenue Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Revenue"
}
}
}
}
};
new RevenueTrend(data);<html>
<head>
<title>My First Web Page</title>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js" crossorigin></script>
</head>
<body>
<div id="revenue_trend"></div>
<div class="control-row">
Periodicity:
<select id="revenue_trend_periodicity">
<option>monthly</option>
<option>weekly</option>
</select>
Measure:
<select id="revenue_trend_measure">
<option>revenue</option>
<option>profit</option>
<option>margin</option>
</select>
</div>
</body>
</html>
