StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORedraw chart by passing new data to Data Table in Google Chart using javascript
text
Body
copied!<p>Hi Guys I was wondering if I can pass my hidden input value to supply data in Google Chart, I have a few radio buttons designed to change the data to be stored in the hidden input, I've checked on this and my code for changing the data seems to work but the chart doesn't get redrawn. How can I trigger something like a redraw function.Thanks.</p> <pre><code>google.setOnLoadCallback(drawChart); function drawChart() { var sample_data = document.getElementById('sample_data').value; var data2 = eval("["+sample_data+"]"); var data = new google.visualization.arrayToDataTable(data2); var options = { hAxis: {title: 'Age', minValue: 0,maxValue:105}, vAxis: {title:'Savings', minValue: 0,maxValue:2500000}, width: 960, height: 300, colors: ['#4a82bd'], legend:'none' }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } drawChart(); function ViewModel() { var self =this; self.rangeSelect = ko.observable('0%'); self.dataGetter = ko.computed(function(){ var range = self.rangeSelect(); if(range=='0%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2738],"+ "[27,5834],"+ "[28,9278],"+ "[29,13191],"+ "[30,17592],"+ "[31,22288],"+ "[32,27418],"+ "[33,32993],"+ "[34,38954],"+ "[35,45304],"+ "[36,52127],"+ "[37,59254],"+ "[38,66663],"+ "[39,74535],"+ "[40,83148],"+ "[41,91537],"+ "[42,100823],"+ "[43,110002],"+ "[44,119837],"+ "[45,129897],"+ "[46,141052],"+ "[47,152166],"+ "[48,163757],"+ "[49,175561],"+ "[50,188520],"+ "[51,200952],"+ "[52,214325],"+ "[53,228245],"+ "[54,243532],"+ "[55,259149],"+ "[56,274371],"+ "[57,290571],"+ "[58,307564],"+ "[59,322976],"+ "[60,340957],"+ "[61,358337],"+ "[62,375345],"+ "[63,392495],"+ "[64,410609],"+ "[65,428638],"+ "[66,400252],"+ "[67,370044],"+ "[68,340162],"+ "[69,306514],"+ "[70,274417],"+ "[71,239492],"+ "[72,205637],"+ "[73,169858],"+ "[74,133103],"+ "[75,97019],"+ "[76,58116],"+ "[77,19529],"+ "[78,0],"+ "[79,0],"+ "[80,0],"+ "[81,0],"+ "[82,0],"+ "[83,0],"+ "[84,0],"+ "[85,0],"+ "[86,0],"+ "[87,0],"+ "[88,0],"+ "[89,0]"; } if(range=='30%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2763],"+ "[27,5903],"+ "[28,9425],"+ "[28,13446],"+ "[30,17979],"+ "[31,22878],"+ "[32,28219],"+ "[33,34039],"+ "[34,40228],"+ "[35,46859],"+ "[36,54017],"+ "[37,61553],"+ "[38,69396],"+ "[39,77845],"+ "[40,86793],"+ "[41,95891],"+ "[42,105723],"+ "[43,115624],"+ "[44,126388],"+ "[45,137413],"+ "[46,149463],"+ "[47,161610],"+ "[48,174637],"+ "[49,188323],"+ "[50,201752],"+ "[51,216495],"+ "[52,232232],"+ "[53,249291],"+ "[54,266171],"+ "[55,284657],"+ "[56,303552],"+ "[57,322324],"+ "[58,342561],"+ "[59,360749],"+ "[60,384075],"+ "[61,407563],"+ "[62,430104],"+ "[63,452547],"+ "[64,478876],"+ "[65,502663],"+ "[66,482031],"+ "[67,460505],"+ "[68,436020],"+ "[69,410875],"+ "[70,385,525],"+ "[71,357512],"+ "[72,331003],"+ "[73,302766],"+ "[74,270112],"+ "[75,239441],"+ "[76,204458],"+ "[77,170147],"+ "[78,135332],"+ "[79,99096],"+ "[80,60097],"+ "[81,20800],"+ "[82,0],"+ "[83,0],"+ "[84,0],"+ "[85,0],"+ "[86,0],"+ "[87,0],"+ "[88,0],"+ "[89,0]"; } if(range=='40%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2770],"+ "[27,5923],"+ "[28,9475],"+ "[29,13352],"+ "[30,18098],"+ "[31,23072],"+ "[32,28500],"+ "[33,34380],"+ "[34,40634],"+ "[35,47414],"+ "[36,54661],"+ "[37,62364],"+ "[38,70244],"+ "[39,78957],"+ "[40,88011],"+ "[41,97367],"+ "[42,107449],"+ "[43,117533],"+ "[44,128446],"+ "[45,139854],"+ "[46,152196],"+ "[47,164734],"+ "[48,178446],"+ "[49,192185],"+ "[50,206185],"+ "[51,221798],"+ "[52,237983],"+ "[53,256007],"+ "[54,273350],"+ "[55,293178],"+ "[56,312529],"+ "[57,333228],"+ "[58,354387],"+ "[59,374656],"+ "[60,397386],"+ "[61,422795],"+ "[62,447954],"+ "[63,474574],"+ "[64,502022],"+ "[65,528116],"+ "[66,508208],"+ "[67,489122],"+ "[68,469393],"+ "[69,446790],"+ "[70,425620],"+ "[71,399269],"+ "[72,374341],"+ "[73,347950],"+ "[74,320046],"+ "[75,289477],"+ "[76,259481],"+ "[77,226566],"+ "[78,195239],"+ "[79,161137],"+ "[80,124524],"+ "[81,87936],"+ "[82,49105],"+ "[83,9223],"+ "[84,0],"+ "[85,0],"+ "[86,0],"+ "[87,0],"+ "[88,0],"+ "[89,0]"; } if(range=='50%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2777],"+ "[27,5945],"+ "[28,9525],"+ "[29,13621],"+ "[30,18246],"+ "[31,23263],"+ "[32,28752],"+ "[33,34709],"+ "[34,41703],"+ "[35,47927],"+ "[36,55348],"+ "[37,63149],"+ "[38,71133],"+ "[39,79953],"+ "[40,89218],"+ "[41,98820],"+ "[42,109074],"+ "[43,119427],"+ "[44,130599],"+ "[45,142195],"+ "[46,154751],"+ "[47,167842],"+ "[48,182056],"+ "[49,195975],"+ "[50,210944],"+ "[51,227013],"+ "[52,243238],"+ "[53,262412],"+ "[54,280982],"+ "[55,301273],"+ "[56,321808],"+ "[57,344012],"+ "[58,365755],"+ "[59,386597],"+ "[60,411162],"+ "[61,438555],"+ "[62,463823],"+ "[63,494641],"+ "[64,523299],"+ "[65,551297],"+ "[66,537169],"+ "[67,516997],"+ "[68,502759],"+ "[69,483642],"+ "[70,462924],"+ "[71,439222],"+ "[72,417198],"+ "[73,391691],"+ "[74,367612],"+ "[75,341845],"+ "[76,312223],"+ "[77,282649],"+ "[78,249556],"+ "[79,220004],"+ "[80,186632],"+ "[81,152438],"+ "[82,114808],"+ "[83,77722],"+ "[84,38624],"+ "[85,0],"+ "[86,0],"+ "[87,0],"+ "[88,0],"+ "[89,0]"; } if(range=='60%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2786],"+ "[27,5971],"+ "[28,9570],"+ "[28,13704],"+ "[30,18373],"+ "[31,23443],"+ "[32,28982],"+ "[33,35048],"+ "[34,41489],"+ "[35,48454],"+ "[36,55997],"+ "[37,63928],"+ "[38,72082],"+ "[39,81085],"+ "[40,90335],"+ "[41,100141],"+ "[42,110564],"+ "[43,121448],"+ "[44,132626],"+ "[45,144297],"+ "[46,157620],"+ "[47,171060],"+ "[48,185356],"+ "[49,199957],"+ "[50,215204],"+ "[51,231915],"+ "[52,249507],"+ "[53,268765],"+ "[54,288130],"+ "[55,308893],"+ "[56,330782],"+ "[57,354500],"+ "[58,378065],"+ "[59,399396],"+ "[60,425435],"+ "[61,455705],"+ "[62,481828],"+ "[63,513748],"+ "[64,545058],"+ "[65,574577],"+ "[66,564651],"+ "[67,548752],"+ "[68,536922],"+ "[69,517938],"+ "[70,500535],"+ "[71,478030],"+ "[72,458729],"+ "[73,437272],"+ "[74,415832],"+ "[75,393035],"+ "[76,367364],"+ "[77,336848],"+ "[78,306959],"+ "[79,279837],"+ "[80,248487],"+ "[81,213600],"+ "[82,181529],"+ "[83,147792],"+ "[84,112113],"+ "[85,76294],"+ "[86,39301],"+ "[87,104],"+ "[88,0],"+ "[89,0]"; ; } if(range=='70%'){ return "['Age','Savings'],"+ "[25,0],"+ "[26,2794],"+ "[27,5993],"+ "[28,9618],"+ "[29,13779],"+ "[30,18504],"+ "[31,23631],"+ "[32,29320],"+ "[33,35387],"+ "[34,41911],"+ "[35,48993],"+ "[36,56634],"+ "[37,64692],"+ "[38,72983],"+ "[39,82101],"+ "[40,91570],"+ "[41,101540],"+ "[42,112196],"+ "[43,123369],"+ "[44,134976],"+ "[45,146856],"+ "[46,160860],"+ "[47,174187],"+ "[48,189197],"+ "[49,204699],"+ "[50,220890],"+ "[51,237571],"+ "[52,256558],"+ "[53,276256],"+ "[54,296966],"+ "[55,318733],"+ "[56,342416],"+ "[57,366487],"+ "[58,391413],"+ "[59,415809],"+ "[60,443588],"+ "[61,474867],"+ "[62,503044],"+ "[63,534527],"+ "[64,570607],"+ "[65,601668],"+ "[66,595372],"+ "[67,583042],"+ "[68,574661],"+ "[69,559823],"+ "[70,543853],"+ "[71,526871],"+ "[72,506862],"+ "[73,492386],"+ "[74,472854],"+ "[75,451655],"+ "[76,429040],"+ "[77,403881],"+ "[78,380852],"+ "[79,353785],"+ "[80,326895],"+ "[81,296793],"+ "[82,269441],"+ "[83,240067],"+ "[84,205984],"+ "[85,176523],"+ "[86,143190],"+ "[87,105151],"+ "[88,69312],"+ "[89,33088],"; } }); } //Activate knockout.js ko.applyBindings(new ViewModel()); </code></pre> <p>here's my fiddle btw <a href="http://jsfiddle.net/a_miguel6687/aL73X/6/" rel="nofollow">http://jsfiddle.net/a_miguel6687/aL73X/6/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload