Both lines and columns.
Showing min max and average temperature.
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 TimeChart(
{
container: document.getElementById("demo"),
navigation :{
initialDisplayPeriod: "1350691200000 > 1368403200000",
initialDisplayUnit: "d"
},
data:
{
units:["h"],
url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
},
valueAxisDefault:{ title:"Temperature" },
series:[
{
name:"Average temperature",
id:"series1",
type:"columns",
data:{
index:1,
aggregation:"avg"
},
style:{
fillColor:"lightgreen",
lineColor:"olive",
lineWidth: 1,
padding:[2,2] // space around the columns
}
},
{
name:"Max temperature",
id:"maxTemp",
type:"line",
data:{
index:1,
aggregation:"max"
},
style:{
lineColor:"red",
lineWidth: 1
}
},
{
name:"Min temperature",
id:"minTemp",
type:"line",
data:{
index:1,
aggregation:"min"
},
style:{
lineColor:"blue",
lineWidth: 1
}
}
]
}
);