Highcharts Demo

author(s): Torstein Hønsi

by KevinGabbert

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<button data-bind="click: addUser">Add Series</button>

JavaScript

$(function() {
    var chart = chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },

        title: {
            text: 'Body Weight',
            x: -20 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: {
            title: {
                text: 'Weight (lbs)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'}]
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'lbs';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'George',
            data: [185, 190, 185, 180]},
        {
            name: 'Bindu',
            data: [115, 110, 112, 115]},
        {
            name: 'Phil',
            data: [195, 190, 190, 185]}]
    });

/*
 * Reading class
 * containts health readings
 */

    function Reading(date, weight, glucose) {
        var self = this;

        self.date = ko.observable(date);
        self.weight = ko.observable(weight);
        self.glucose = ko.observable(glucose);
        self.readingId = ko.observable(0);

        self.formattedWeight = ko.computed(function() {
            var formatted = self.weight();

            return formatted + " lb"
        });
    }

/*
 * User class
 * contains a user name, date, and an array or readings
 */

    function User(name, date, readings) {
        var self = this;

        self.name = name;
        self.date = date;
        self.userId = ko.observable(0);
        self.readingsArray =...