Highcharts Demo

author(s): Torstein Hønsi

by jiggle

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<button data-bind="click:add">Add</button>

<button data-bind="click:select1">Select series1</button>
<!--<div id="container" style="height: 300px" data-bind="highchart: contributionsChart, series: contributionSeries"></div>-->
<div id="container2" style="height: 300px" data-bind="highchart: breakdownChart, series: breakdownSeries"></div>

JavaScript

$(function() {       
    ko.applyBindings(new ViewModel());
});

ko.bindingHandlers.highchart = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var valueUnwrapped = ko.unwrap(value);
        console.log ('update',element.id,valueUnwrapped);        
        if(allBindings.get('series')){
            var series = allBindings.get('series');
            var seriesUnwrapped = ko.unwrap(series);
            if(!$.isArray(seriesUnwrapped)){
                seriesUnwrapped = [seriesUnwrapped];
            }
            console.log('seriesUnwrapped',element.id,seriesUnwrapped)
            valueUnwrapped.series = seriesUnwrapped;
        }
        $(element).highcharts(valueUnwrapped);
        
    }
}

function ViewModel(){
    var self = this;
    
    var baseScenario = new ScenarioViewModel([10,20,20,20,20,20,50,20,20],0,100000);
    var scenario1 = new ScenarioViewModel([30,20,20,20,20,20,50,20,20],120000,100000)
    
    self.currentScenario=  ko.observable(baseScenario);
    self.scenarios = ko.observableArray([baseScenario,scenario1])

    self.contributionSeries = ko.computed(function(){
        return $.map(self.scenarios(), function(e){
            return e.createContributionSeries();
        });
    });
    
    self.breakdownSeries = ko.computed(function(){
        return self.currentScenario().createBreakdownSeries();
    });
    
    self.add = function(){
        var newScenario = new ScenarioViewModel([5,5,5,200,20,20,50,20,20],90000,100000)
        self.scenarios.push(newScenario);
        self.currentScenario(newScenario);            
    }
    
    self.select1 = function(){
         self.currentScenario(scenario1);   
    }
    
    self.contributionsChart =  {
            chart: {
                type: 'column',
                animation:false
            }
        };
    
    self.breakdownChart = ko.computed(function(){
        return {    
            chart: {
  ...