Back

Time Chart - area, with series toggle

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(
                    settings = {
                        container: document.getElementById("demo"),
                        data: [
                            {
                                units: ["d"],
                                id: "ms",
                                preloaded: data1
                            },
                            {
                                units: ["d"],
                                id: "apple",
                                preloaded: data2
                            }
                        ],
                        valueAxisDefault: { title: "Value, $" },
                        series: [
                            {
                                name: "Apple Stock price, avg",
                                id: "series2",
                                type: "line",
                                data: {
                                    index: 1,
                                    aggregation: "avg",
                                    source: "apple"
                                },
                                style: {
                                    fillColor: "#a6b0bf",
                                    lineColor: "#a6b0bf"
                                }
                            },
                            {
                                name: "Microsoft Stock price, avg",
                                id: "series1",
                                type: "line",
                                data: {
                                    index: 1,
                                    aggregation: "avg",
                                    source: "ms"
                                },
                                style: {
                                    fillColor: "#53afda",
                                    lineColor: "#fff",
                                    lineWidth: 2
                                }
                            }
                        ],
                        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 },
                        legend: { enabled: true }
                    }
            );
        }
        // 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