I have created a Plotly chart in Python with a drop-down and exported the chart to JSON. Then storing that JSON in the database. After that render chart JSON in HTML. In HTML dropdown within a chart is not working means when I select any dropdown value chart is not changing according to that selection. Following is my Python Plotly chart code. Following is the code for Plotly
import pandas as pd
import plotly.express as px
import json
# Create the data table
data = {
'Country': ['United States', 'United States', 'United States', 'United States', 'United States', 'United States',
'United States', 'United States', 'United States', 'China', 'China', 'China', 'China', 'China', 'China',
'China', 'China', 'China', 'India', 'India', 'India', 'India', 'India', 'India', 'India', 'India',
'India', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia'],
'State': ['California', 'California', 'California', 'Texas', 'Texas', 'Texas', 'New York', 'New York', 'New York',
'Guangdong', 'Guangdong', 'Guangdong', 'Shandong', 'Shandong', 'Shandong', 'Henan', 'Henan', 'Henan',
'Uttar Pradesh', 'Uttar Pradesh', 'Uttar Pradesh', 'Maharashtra', 'Maharashtra', 'Maharashtra', 'Bihar',
'Bihar', 'Bihar', 'Jakarta', 'Jakarta', 'Jakarta', 'West Java', 'West Java', 'West Java'],
'Race': ['White', 'Hispanic', 'Asian', 'White', 'Hispanic', 'African-American', 'White', 'African-American', 'Asian',
'Han Chinese', 'Zhuang', 'Yao', 'Han Chinese', 'Hui', 'Manchu', 'Han Chinese', 'Uighur', 'Korean',
'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian',
'Mongoloid', 'Javanese', 'Sundanese', 'Betawi', 'Sundanese', 'Javanese', 'Betawi'],
'Population': [20000000, 10000000, 8000000, 15000000, 5000000, 3000000, 12000000, 8000000, 4000000, 100000000,
5000000, 3000000, 80000000, 6000000, 4000000, 75000000, 4000000, 3000000, 180000000, 120000000,
10000000, 100000000, 60000000, 5000000, 90000000, 75000000, 5000000, 10000000, 7000000, 4000000,
25000000, 10000000, 4000000],
'Weight %': [50, 25, 20, 60, 20, 12, 45, 30, 15, 90, 4.5, 2.5, 85, 6, 4, 88, 4.7, 3.5, 55, 37, 3, 60, 35, 3, 50,
40, 4, 40, 28, 16, 60, 25, 10]
}
df = pd.DataFrame(data)
# Create the treemap
fig = px.treemap(df, path=['Country', 'State', 'Race'], values='Population', color='Population', color_continuous_scale='RdBu', title='Population Treemap')
# Set the color bar title
fig.update_layout(coloraxis_colorbar_title='<b>Population</b>')
# Set the title
fig.update_layout(title={'text': '<b>Population by Race in Top States of Different Countries</b>', 'font': {'color': '#283347'}})
# Customize hover labels
fig.data[0].hovertemplate = '<b>%{label}</b><br>Population: %{value:,}<br>Weight %: %{customdata:.2f}%'
# Remove parent and ID fields from hover
fig.data[0].hovertemplate = fig.data[0].hovertemplate.replace('%{parent}<br>', '').replace('%{id}<br>', '')
# Display the treemap
# fig.show()
# Create dropdown options
dropdown_options = [
{'label': 'Group by Country', 'value': ['Country', 'State', 'Race']},
{'label': 'Group by Race', 'value': ['Race', 'Country', 'State']}
]
# Define a callback function to update the treemap based on dropdown selection
def update_treemap(selected_option):
fig.update_traces(path=selected_option)
# Add dropdown menu
update_menus = [
{
'buttons': [
{'method': 'relayout', 'label': option['label'], 'args': [{'treemap.path': option['value']}]}
for option in dropdown_options
],
'direction': 'down',
'showactive': True,
'x': 0.1,
'y': 1.07
}
]
fig.update_layout(updatemenus=update_menus)
# Save the chart data as JSON
chart_data_json = fig.to_json()
#store chart_data_json to postgres
Then Store the JSON output in RDBMS and get it to render on HTML. Following is the HTML file
<!DOCTYPE html>
<html>
<head>
<title>Plotly Chart</title>
<!-- Include plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Container for the chart -->
<div id="chart-container"></div>
<!-- Load and render the chart using JavaScript -->
<script>
var chartData = '{"data":[{"branchvalues":"total","customdata":[[8000000.0],[3000000.0],[8000000.0],[4000000.0],[4000000.0],[4000000.0],[75000000.0],[60000000.0],[120000000.0],[100000000.0],[75000000.0],[80000000.0],[10000000.0],[5000000.0],[6000000.0],[90000000.0],[100000000.0],[180000000.0],[10000000.0],[10000000.0],[3000000.0],[4000000.0],[5000000.0],[5000000.0],[10000000.0],[7000000.0],[25000000.0],[4000000.0],[20000000.0],[12000000.0],[15000000.0],[3000000.0],[5000000.0],[80882352.94117647],[14842105.263157895],[92907407.4074074],[68902439.02439025],[7857142.857142857],[82575757.57575758],[9333333.333333334],[71688888.8888889],[11260869.56521739],[151290322.58064517],[19000000.0],[79057142.85714285],[115155038.75968993],[15100000.0],[12317647.05882353]],"domain":{"x":[0.0,1.0],"y":[0.0,1.0]},"hovertemplate":"\\u003cb\\u003e%{label}\\u003c\\u002fb\\u003e\\u003cbr\\u003ePopulation: %{value:,}\\u003cbr\\u003eWeight %: %{customdata:.2f}%","ids":["United States\\u002fNew York\\u002fAfrican-American","United States\\u002fTexas\\u002fAfrican-American","United States\\u002fCalifornia\\u002fAsian","United States\\u002fNew York\\u002fAsian","Indonesia\\u002fJakarta\\u002fBetawi","Indonesia\\u002fWest Java\\u002fBetawi","India\\u002fBihar\\u002fDravidian","India\\u002fMaharashtra\\u002fDravidian","India\\u002fUttar Pradesh\\u002fDravidian","China\\u002fGuangdong\\u002fHan Chinese","China\\u002fHenan\\u002fHan Chinese","China\\u002fShandong\\u002fHan Chinese","United States\\u002fCalifornia\\u002fHispanic","United States\\u002fTexas\\u002fHispanic","China\\u002fShandong\\u002fHui","India\\u002fBihar\\u002fIndo-Aryan","India\\u002fMaharashtra\\u002fIndo-Aryan","India\\u002fUttar Pradesh\\u002fIndo-Aryan","Indonesia\\u002fJakarta\\u002fJavanese","Indonesia\\u002fWest Java\\u002fJavanese","China\\u002fHenan\\u002fKorean","China\\u002fShandong\\u002fManchu","India\\u002fBihar\\u002fMongoloid","India\\u002fMaharashtra\\u002fMongoloid","India\\u002fUttar Pradesh\\u002fMongoloid","Indonesia\\u002fJakarta\\u002fSundanese","Indonesia\\u002fWest Java\\u002fSundanese","China\\u002fHenan\\u002fUighur","United States\\u002fCalifornia\\u002fWhite","United States\\u002fNew York\\u002fWhite","United States\\u002fTexas\\u002fWhite","China\\u002fGuangdong\\u002fYao","China\\u002fGuangdong\\u002fZhuang","India\\u002fBihar","United States\\u002fCalifornia","China\\u002fGuangdong","China\\u002fHenan","Indonesia\\u002fJakarta","India\\u002fMaharashtra","United States\\u002fNew York","China\\u002fShandong","United States\\u002fTexas","India\\u002fUttar Pradesh","Indonesia\\u002fWest Java","China","India","Indonesia","United States"],"labels":["African-American","African-American","Asian","Asian","Betawi","Betawi","Dravidian","Dravidian","Dravidian","Han Chinese","Han Chinese","Han Chinese","Hispanic","Hispanic","Hui","Indo-Aryan","Indo-Aryan","Indo-Aryan","Javanese","Javanese","Korean","Manchu","Mongoloid","Mongoloid","Mongoloid","Sundanese","Sundanese","Uighur","White","White","White","Yao","Zhuang","Bihar","California","Guangdong","Henan","Jakarta","Maharashtra","New York","Shandong","Texas","Uttar Pradesh","West Java","China","India","Indonesia","United States"],"marker":{"coloraxis":"coloraxis","colors":[8000000.0,3000000.0,8000000.0,4000000.0,4000000.0,4000000.0,75000000.0,60000000.0,120000000.0,100000000.0,75000000.0,80000000.0,10000000.0,5000000.0,6000000.0,90000000.0,100000000.0,180000000.0,10000000.0,10000000.0,3000000.0,4000000.0,5000000.0,5000000.0,10000000.0,7000000.0,25000000.0,4000000.0,20000000.0,12000000.0,15000000.0,3000000.0,5000000.0,80882352.94117647,14842105.263157895,92907407.4074074,68902439.02439025,7857142.857142857,82575757.57575758,9333333.333333334,71688888.8888889,11260869.56521739,151290322.58064517,19000000.0,79057142.85714285,115155038.75968993,15100000.0,12317647.05882353]},"name":"","parents":["United States\\u002fNew York","United States\\u002fTexas","United States\\u002fCalifornia","United States\\u002fNew York","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","China\\u002fGuangdong","China\\u002fHenan","China\\u002fShandong","United States\\u002fCalifornia","United States\\u002fTexas","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","United States\\u002fCalifornia","United States\\u002fNew York","United States\\u002fTexas","China\\u002fGuangdong","China\\u002fGuangdong","India","United States","China","China","Indonesia","India","United States","China","United States","India","Indonesia","","","",""],"values":[8000000,3000000,8000000,4000000,4000000,4000000,75000000,60000000,120000000,100000000,75000000,80000000,10000000,5000000,6000000,90000000,100000000,180000000,10000000,10000000,3000000,4000000,5000000,5000000,10000000,7000000,25000000,4000000,20000000,12000000,15000000,3000000,5000000,170000000,38000000,108000000,82000000,21000000,165000000,24000000,90000000,23000000,310000000,39000000,280000000,645000000,60000000,85000000],"type":"treemap"}],"layout":{"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"coloraxis":{"colorbar":{"title":{"text":"\\u003cb\\u003ePopulation\\u003c\\u002fb\\u003e"}},"colorscale":[[0.0,"rgb(103,0,31)"],[0.1,"rgb(178,24,43)"],[0.2,"rgb(214,96,77)"],[0.3,"rgb(244,165,130)"],[0.4,"rgb(253,219,199)"],[0.5,"rgb(247,247,247)"],[0.6,"rgb(209,229,240)"],[0.7,"rgb(146,197,222)"],[0.8,"rgb(67,147,195)"],[0.9,"rgb(33,102,172)"],[1.0,"rgb(5,48,97)"]]},"legend":{"tracegroupgap":0},"title":{"text":"\\u003cb\\u003ePopulation by Race in Top States of Different Countries\\u003c\\u002fb\\u003e","font":{"color":"#283347"}},"updatemenus":[{"buttons":[{"args":[{"treemap.path":["Country","State","Race"]}],"label":"Group by Country","method":"relayout"},{"args":[{"treemap.path":["Race","Country","State"]}],"label":"Group by Race","method":"relayout"}],"direction":"down","showactive":true,"x":0.1,"y":1.07}]}}';
chartData = JSON.parse(chartData);
// Render the chart using plotly.js
Plotly.newPlot('chart-container', chartData.data, chartData.layout);
</script>
</body>
</html>