knockout-google-chart

by Guddu Kumar

HTML

<script src="http://omnipotent.net/jquery.sparkline/2.1/jquery.sparkline.js"></script>
<p>Equity at Age 65:</p>
<input type="radio" name="range" value="0%" data-bind="checked:rangeSelect" />
<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>
<br/>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<input type="hidden" id="sample_data" data-bind="value:dataGetter" />
<input type="hidden" id="boxdata" data-bind="value:boxData" />
<div class="box-stage"><span id="sparkline" class="canvas-placing"></span>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://omnipotent.net/jquery.sparkline/2.1/jquery.sparkline.js" type="text/javascript"></script>

</html>

JavaScript

function drawChart() {
    var sample_data = document.getElementById('sample_data').value;
    var data2 = eval("["+sample_data+"]");
    
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Age');
    data.addColumn('number', 'Savings');
    data.addRows(data2);


    var options = {
        hAxis: {title: 'Age', minValue: 0,maxValue:105},
        vAxis: {title:'Savings',minValue:0,maxValue:2500000, format:'\u00A4 ,##0.00'},
        width: 960, height: 300,
        colors: ['#4a82bd'],
        legend:'none',
        tooltip: {isHtml: true}


    };

    var formatter = new google.visualization.NumberFormat(
        {prefix: '$'});
    formatter.format(data, 1); // Apply formatter to second column

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            // create a simple HTML tooltip
            var age = dt.getFormattedValue(row, 0);
            var savings = dt.getFormattedValue(row, 1);
            return "Age:\t"+age+
                   "\nSavings:\t"+savings;
        }
    }]);

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(view,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(){
    debugger
        var range = self.rangeSelect();
        if(range=='0%'){
            return     "[25,0],"+
                       "[26,2738],"+
                       "[27,5834],"+
                       "[28,9278],"+
                       "[29,13191],"+
                       "[30,17592],"+
                       "[31,22288],"+
                       "[32,27418],"+
                      ...