Kival M
Reputation: 202
Why does my plotly plot not display in certain conditions with plotly.js
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>Upvotes: 2
Views: 1096
Answers (2)
Hamzah Al-Qadasi
Reputation: 9786
After long debugging, the problem is in the layout, going more deeply, it is with the type of x-axis which is months or weeks. The values of months and weeks are considered categorical values, not integer numbers. To solve this problem, please change each xaxis to the following configuration:
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"type":"category", //<------------ add this line
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
Output:
Upvotes: 1
mit
Reputation: 1340
I'm not sure why, but you can solve your problem by passing a new layout object every time you create a new chart (instead of re-using the existing layout object):
let i = structuredClone(this.data.layout[t]);
Upvotes: 1
Related Questions
- plotly.js Multiple plots created, only last one is working as intended
- plotly js Uncaught TypeError: myPlot.on is not a function
- Plotly graph not displaying
- Conditional formatting in Plotly
- Issue with Plotly
- Plotly graphs not at all rendering in my html webpage
- plotly.js - simple static graph is not show but the complicated one is
- plotly plot doesnt show up
- Unable to show chart with plotly
- Why plotly area graph is not displaying data properly?