Update app.py

app.py

@@ -70,19 +70,60 @@ if text:
         #st.markdown("<br>", unsafe_allow_html=True)
         st.success(result)
 
-import matplotlib.pyplot as plt
-
-# Pie chart, where the slices will be ordered and plotted counter-clockwise:
-labels = 'Frogs', 'Hogs', 'Dogs', 'Logs'
-sizes = [15, 30, 45, 10]
-explode = (0, 0.1, 0, 0)  # only "explode" the 2nd slice (i.e. 'Hogs')
-
-fig1, ax1 = plt.subplots()
-ax1.pie(sizes, explode=explode, labels=labels, autopct='%1.1f%%',
-        shadow=True, startangle=90)
-ax1.axis('equal')  # Equal aspect ratio ensures that pie is drawn as a circle.
-
-st.pyplot(fig1)
+st.markdown(''' <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script> 
+        <div style="width: 500px; height: 500px">
+            <canvas id="myChart"></canvas>
+          </div>
+          <script type="text/javascript">
+            var data = {
+   datasets: [{
+     data: [.88, .1, .02, .01, .002],
+     backgroundColor: [
+       "#F7464A",
+       "#46BFBD",
+       "#FDB45C",
+       "#555555",
+       "#CCCCCC"
+     ]
+   }],
+   labels: [
+     "Red",
+     "Green",
+     "Yellow",
+     "WHAT", 
+     "YOOOO"  
+ ]
+ };
+ 
+ $(document).ready(
+   function() {
+     var canvas = document.getElementById("myChart");
+     var ctx = canvas.getContext("2d");
+     var myNewChart = new Chart(ctx, {
+       type: 'pie',
+       data: data
+     });
+ 
+     canvas.onclick = function(evt) {
+       var activePoints = myNewChart.getElementsAtEvent(evt);
+       if (activePoints[0]) {
+         var chartData = activePoints[0]['_chart'].config.data;
+         var idx = activePoints[0]['_index'];
+ 
+         var label = chartData.labels[idx];
+         var value = chartData.datasets[0].data[idx];
+         
+         var url = "http://example.com/?label=" + label + "&value=" + value;
+         console.log(url);
+         alert(url);
+       }
+     };
+   }
+ );
+ 
+         </script>
+''')
 #    description = '<table style="border: collapse; padding-top: 1px;"><tr><div style="height: 62px;"></div></tr><tr><p style="border-width: medium; border-color: #aa5e70; border-radius: 10px;padding-top: 1px;padding-left: 20px;background:#20212a;font-family:Courier New; color: white;font-size: 36px; font-weight: boldest;">'+result+'</p></tr><table>'
 #    st.markdown(description, unsafe_allow_html=True)