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.
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
Post a Comment