Back

Columns and area

Time series chart where each series are displayed as a different chart type - 'columns', 'line', and area (enabled by using 'line' and defining a 'fillColor').

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 

        var t = new ZoomCharts.TimeChart({
            //theme: TimeChart.themes.round,
            container: document.getElementById("demo"),
            data: {
                dataFunction: function (from, to, unit, success, error) {
                    $.get("/dvsl/data/time-chart/bitcoin-" + unit + ".json", null, function (data) {
                        success(data);
                    });
                },
                units: ["M", "d", "h", "y"],
                timestampInSeconds: true
            },
            interaction: {
                zooming: { sensitivity: 5 },
                resizing: { enabled: false },
                scrolling: { limitFrom: "oldestDataRounded", limitTo: "newestDataRounded" }
            },
            timeAxis: { maxUnitWidth: 200 },
            valueAxis: { secondary: { enabled: true, side: "right", position: "outside" } },
            stacks: { a: { type: "based" } },
            series: [
                {
                    type: "columns",
                    name: "Turnover, USD",
                    data: { aggregation: "max", index: 3 },
                    valueAxis: "secondary",
                    style: {
                        fillColor: "rgba(153,204,0,1)",
                        depth: 3,
                        gradient: 0.9
                    }
                },
                {
                    type: "line",
                    name: "Low",
                    stack: "a",
                    data: { aggregation: "min", index: 2 },
                    style: {
                        lineColor: "#CCCC33",
                        smoothing: true,
                        width: 3
                    }
                },
                {
                    type: "line",
                    name: "High",
                    stack: "a",
                    data: { aggregation: "max", index: 1 },
                    style: {
                        lineColor: "#CC3333",
                        fillColor: "rgba(255,51,0,0.5)",
                        smoothing: true,
                        width: 3
                    }
                }
            ],
            toolbar: {
                displayPeriod: false,
                logScale: false,
                export: true
            },
            area: {
                displayUnits: [
                    { unit: "1 m", name: "minute" },
                    { unit: "1 h", name: "hour" },
                    { unit: "1 d", name: "day" },
                    { unit: "1 w", name: "week" },
                    { unit: "1 M", name: "month" },
                    { unit: "1 y", name: "year" }
                ]
            },
            navigation: {
                initialDisplayUnit: "y"
            }
        });

Data

Data 
//No separate data for this example