knockout-google-chart

by a_miguel6687

HTML

<p>Equity at Age 65:</p>
<input type="radio" name="range" value="0%" data-bind="checked:rangeSelect" checked/><label>0%</label>
<br/>
<input type="radio" name="range" value="30%" data-bind="checked:rangeSelect"/><label>30%</label>
<br/>
<input type="radio" name="range" value="40%" data-bind="checked:rangeSelect"/><label>40%</label>
<br/>
<input type="radio" name="range" value="50%" data-bind="checked:rangeSelect"/><label>50%</label>
<br/>
<input type="radio" name="range" value="60%" data-bind="checked:rangeSelect"/><label>60%</label>
<br/>
<input type="radio" name="range" value="70%" data-bind="checked:rangeSelect"/><label>70%</label>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<input type="hidden" id="sample_data"data-bind="value:dataGetter"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

</html>

JavaScript

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);



}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function buffer(){
    setTimeout(function () {drawChart();}, 100);
}


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],"+
                      ...