Line chart with dashed lines for forecast data
Dashed lines indicate forecast data. This was achieved by using two different series and applying different style properties to each. 'lineDash' array defines the dashing pattern; [3,10] means that 3 width units are line and 10 are blank, and repeat.
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 dataTill = 1370044800000;
var t = new TimeChart(
{
container: document.getElementById("demo"),
data:
{
units:["h"],
url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
},
valueAxisDefault:{ title:"Temperature" },
series:[
{
name:"Measured tempareture",
id:"series1",
type:"line",
data:{
index: 1,
aggregation:"avg",
aggregatedValueFunction:function(value, time){return time < dataTill ? value: null;}
},
style:{
lineColor: "orange",
lineWidth: 2,
marker:{
shape:"circle"
}
}
},
{
name:"Forecast tempareture",
id:"series2",
type:"line",
data:{
index: 1,
aggregation:"avg"
},
style:{
lineColor: "orange",
lineDash:[3,10]
}
}
]
}
);