Back

Time Chart - clustered columns

Microsoft and Apple stock prices, years 2004 - 2014

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS
//No CSS for this example 

JavaScript

JavaScript

    function success(data1,data2){
        data1.dataLimitFrom = 0;
        data1.dataLimitTo = 0;
        for (var i in data1.values) {
            if (data1.dataLimitFrom == 0) {
                data1.dataLimitFrom = data1.values[i][0];
            }
            data1.dataLimitFrom = data1.dataLimitFrom > data1.values[i][0] ? data1.values[i][0] : data1.dataLimitFrom;
            data1.dataLimitTo = data1.dataLimitTo < data1.values[i][0] ? data1.values[i][0] : data1.dataLimitTo;
        }
        data2.dataLimitFrom = 0;
        data2.dataLimitTo = 0;
        for (var i in data2.values) {
            if (data2.dataLimitFrom == 0) {
                data2.dataLimitFrom = data2.values[i][0];
            }
            data2.dataLimitFrom = data2.dataLimitFrom > data2.values[i][0] ? data2.values[i][0] : data2.dataLimitFrom;
            data2.dataLimitTo = data2.dataLimitTo < data2.values[i][0] ? data2.values[i][0] : data2.dataLimitTo;
        }
        t = new TimeChart(
                {
                    container: document.getElementById("demo"),
                    data:[
                        {
                            units:["d"],
                            id: "ms",
                            preloaded: data1
                        },
                        {
                            units:["d"],
                            id: "apple",
                            preloaded: data2
                        }
                    ],
                    valueAxisDefault: { title: "Value, $" },
                    series:[
                        {
                            name:"Microsoft Stock price, avg",
                            id:"series1",
                            type:"columns",
                            data:{
                                index:1,
                                aggregation:"avg",
                                source:"ms"
                            },
                            style:{
                                fillColor:"#53afda"
                            }
                        },
                        {
                            name:"Apple Stock price, avg",
                            id:"series2",
                            type:"columns",
                            data:{
                                index:1,
                                aggregation:"avg",
                                source:"apple"
                            },
                            style:{
                                fillColor:"#a6b0bf"
                            }
                        }

                    ],
                    navigation: {
                        initialDisplayUnit: "1 y",
                        initialDisplayPeriod: "10 y",
                        initialDisplayAnchor: "newestData"
                    },
                    area: {
                        displayUnits: [
                            {name: "day", unit: "1 d"},
                            {name: "month", unit: "1 M"},
                            {name: "year", unit: "1 y"},
                            {name: "10 years", unit: "10 y"}
                        ]
                    },
                    currentTime: {enabled: false}
                }
        );
    }
    // using a custom library to load CSV data
    loadCSV("/dvsl/data/time-chart/microsoft-stock-prices.csv", "d", [
        {type: "date", format:"([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3,2,1], process: [null, null, null, function(a){return 2000+parseInt(a);}]}, 
        {type: "decimal"},
        {type: "decimal"}
    ], "\t",function(data1){
        loadCSV("/dvsl/data/time-chart/apple-stock-prices.csv", "d", [
            {type: "date", format:"([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3,2,1], process: [null, null,null, function(a){return 2000+parseInt(a);}]}, 
            {type: "decimal"},
            {type: "decimal"}
        ], "\t",function(data2){
            success(data1,data2);
        });
    });

Data

Data
//Data too large to output
Download Data