Update app.py

app.py

@@ -70,7 +70,61 @@ if text:
         #st.markdown("<br>", unsafe_allow_html=True)
         st.success(result)
 import streamlit.components.v1 as components
-html_string = ' <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>'
+html_string = '''
+ <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>
+'''
 components.html(html_string)
 
 #st.components.v1.html()