Update app.py

app.py

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