Area with custom background image
Historical temperature data in Paris
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.gradient,
data:
{
units:["d"],
preloaded: data
},
valueAxisDefault:{ title:"Temperature, C" },
series:[
{
name:"Minimum",
id:"series3",
type:"line",
stack: "default",
data:{
index:3,
aggregation:"min"
},
style:{
lineColor:"rgb(120,120,255)",
lineWidth: 2,
smoothing: true
}
},
{
name:"Maximum",
id:"series2",
type:"line",
stack: "default",
data:{
index:2,
aggregation:"max"
},
style:{
lineColor:"rgb(255,120,120)",
fillGradient:[[20,"rgba(255,0,0,0.7)"], [-20, "rgba(0,0,255,0.4)"]],
lineWidth: 2,
smoothing: true
}
}
],
stacks: {
"default": {type: "based", separateNegativeValues: true}
},
navigation: {
initialDisplayUnit: "1 M",
initialDisplayPeriod: "3 y",
initialDisplayAnchor: "newestData"
},
area: {
style: {image: "/dvsl/doc/time-chart/images/paris.jpg"}
},
currentTime: {enabled: false},
info: {aggregations: ["avg"]}
}
);
}
// 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);}}},
{type: "decimal"},
{type: "decimal"},
{type: "decimal"}], "\t", success);