Back

Highlighting missing data points

Separate series shows values when there is no data. A fixed hidden value axis is used to ensure it fills entire chart height.

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 

    var t = new TimeChart(
            {
                container: document.getElementById("demo"),
                navigation:{
                    initialDisplayPeriod:"1349136000000 > 1364342400000",
                    initialDisplayUnit: "2 h"
                },
                data:
                {
                    units:["h"],
                    url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
                },
                valueAxisDefault: {
                    title:"Temperature"
                },
                valueAxis:{
                    "v1":{
                        enabled: false,
                        minValue: 0,
                        maxValue: 1
                    }
                },
                series:[
                    {
                        name:"Temperature",
                        id:"temp",
                        type:"line",
                        data:{
                            index:1,
                            aggregation:"avg"
                        },
                        style:{
                            lineColor:"green",
                            lineWidth: 1
                        }
                    },
                    {
                        name:"Missing data",
                        id:"missing",
                        type:"columns",
                        showInLegend: false,
                        valueAxis: "v1", //Hidden value axis
                        data:{
                            index:1,
                            aggregation:"first",
                            aggregatedValueFunction:function(value){return value != null ? 0: 1}
                        },
                        style:{
                            fillColor: "salmon",
                            lineColor:null,
                            padding:[0,0]
                        }
                    }
                ]
            }
    );

Data

Data 
//Data too large to output
Download Data