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>
<select data-bind="value:chartType"><option value="line">line</option><option value="column">column</option></select>
<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) {
        console.log(valueAccessor);
        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',seriesUnwrapped)
            
            //set the xAxis titles, only add the second title if different from the base
            valueUnwrapped.xAxis={
                categories: [valueUnwrapped.baseSeriesTitle, valueUnwrapped.baseSeriesTitle!=seriesUnwrapped[0].name ? seriesUnwrapped[0].name:'']
            }            
            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)
    
    //overwrite the baseScenario name, with Base Scenario for the series title
    baseScenario.name = "Base Scenario";
    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...