Back

Time Chart - columns with negative values

Historical temperature data in Paris

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(data) {
        data.dataLimitFrom = 0;
        data.dataLimitTo = 0;
        for (var i in data.values) {
            if (data.dataLimitFrom == 0) {
                data.dataLimitFrom = data.values[i][0];
            }
            data.dataLimitFrom = data.dataLimitFrom > data.values[i][0] ? data.values[i][0] : data.dataLimitFrom;
            data.dataLimitTo = data.dataLimitTo < data.values[i][0] ? data.values[i][0] : data.dataLimitTo;
        }
        t = new TimeChart(
            {
                container: document.getElementById("demo"),
                theme: TimeChart.themes.round,
                data:
                {
                    units: ["d"],
                    preloaded: data
                },
                valueAxisDefault: { title: "Temperature, °C" },
                series: [
                    {
                        name: "Minimum",
                        id: "series3",
                        type: "columns",
                        data: {
                            index: 3,
                            aggregation: "min"
                        },
                        style: {
                            fillColor: "#37bee0",
                            lineColor: "#37bee0",
                            lineWidth: 1,
                            depth: 2,
                            padding: [2, 2] // space around the columns
                        }
                    },
                    {
                        name: "Average",
                        id: "series1",
                        type: "columns",
                        data: {
                            index: 1,
                            aggregation: "avg"
                        },
                        style: {
                            fillColor: "#aea682",
                            lineColor: "#aea682",
                            lineWidth: 1,
                            depth: 2,
                            padding: [2, 2] // space around the columns
                        }
                    },
                    {
                        name: "Maximum",
                        id: "series2",
                        type: "columns",
                        data: {
                            index: 2,
                            aggregation: "max"
                        },
                        style: {
                            fillColor: "#ffb30f",
                            lineColor: "#ffb30f",
                            lineWidth: 1,
                            depth: 2,
                            padding: [2, 2] // space around the columns
                        }
                    }
                ],
                navigation: {
                    initialDisplayUnit: "1 M",
                    initialDisplayPeriod: "3 y",
                    initialDisplayAnchor: "newestData"
                },
                currentTime: { enabled: false }
            }
        );
    }
    // using a custom library to load CSV data
    loadCSV("/dvsl/data/time-chart/paris.csv", "d", [
        { type: "date", format: "([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3, 2, 1], process: { "3": function (input) { return 2000 + parseInt(input, 10); } } },
        { type: "decimal" },
        { type: "decimal" },
        { type: "decimal" }], "\t", success);

Data

Data
//Data too large to output
Download Data