Time Chart - columns with negative values
JavaScript time chart example that displays column data with both positive and negative values.
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);