shieldui - Updating Shield UI Chart with values from textboxes on the page -


i using shield ui chart on page users can enter 3 values showed on chart. have button triggers event. here code:

<!doctype html> <html> <head> <link rel="stylesheet"  type="text/css"  href="http://www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css"> <script type="text/javascript"  src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>  <script> function myfunction() {     var containter = $("#chart").swidget();     var info = new array();     info[0]=parsefloat(document.getelementbyid("a").value);     info[1]=parsefloat(document.getelementbyid("b").value);     info[2]=parsefloat(document.getelementbyid("c").value);     containter.destroy();     $("#chart").shieldchart(         {             seriessettings: {                 line: {                     applyanimation: {                         duration: 0                     },                     pointmark: {                         enabled: false                     }                 }             },             tooltipsettings: {                 enabled: false             },             exportoptions:             {                 image: false,                 print: false             },              axisx: {                 min: 0,                 max: 5             },              primaryheader: {                 text: "chart"             },             dataseries: [                 {                     seriestype: 'bar',                     collectionalias: 'chart',                     data: [info[0],info[1],info[2]]                 }             ]         }         ); } </script> </head> <body>  <button onclick="myfunction()">refresh chart</button>     <table>         <tr>             <td>                 <div id="chart" style="width: 300px; height: 300px; margin: auto;"></div>             </td>         </tr>     </table> <p id="demo"></p>  <input type=text id="a" value='123'>value a</input> <input type=text id="b" value='23'>value b</input> <input type=text id="c" value='3'>value c</input> </body> </html> 

however there error prevents values being displayed. whole chart won’t show. might mistake?

the 1 error making can resolved in 2 ways: 1. can remove

 containter.destroy(); 

statement. not recreate existing chart, create new 1 each time button pressed.

  1. you keep above mentioned statement, need place code

    $(document).ready(function () { var info = new array(); info[0]=parsefloat(document.getelementbyid("a").value); info[1]=parsefloat(document.getelementbyid("b").value); info[2]=parsefloat(document.getelementbyid("c").value);
        $("#chart").shieldchart({         exportoptions:               {                   image: false,                   print: false               },         tooltipsettings: {             enabled: false         },         seriessettings: {             line: {                 applyanimation: {                     duration: 0                 },                 pointmark: {                     enabled: false                 }             }         },         axisx: {             min: 0,             max: 5         },          primaryheader: {             text: "chart"         },          dataseries: [             {                 seriestype: 'bar',                 collectionalias: 'chart',                 data: [info[0],info[1],info[2]]             }         ]     });  }); 

so have 1 chart destroy , recreate , able show data first time page loaded.


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -