time series with null value in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

time series with null value in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  title: {// w w  w.jav a  2s.  c  o  m
    text: ''
  },
  xAxis: [{
    max: 11,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
  }],
  yAxis: [{
    min: 0,
    max: 50,
    labels: {
      format: '{value} %'
    },
    title: {
      enabled: false
    },
    opposite: true
  }, {
    title: {
      text: '',
    },
    labels: {
      formatter: function() {
        return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    }
  }, {
    min: 0,
    max: 50,
    title: {
      enabled: false
    },
    labels: {
      enabled: false
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  legend: {
    layout: 'horizontal',
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: -5,
    floating: true,
    backgroundColor: '#FFFFFF'
  },
  series: [{
    color: '#C8102E',
    name: 'Delivered',
    type: 'column',
    yAxis: 1,
    data: [4900, 300, 300],
    tooltip: {
      pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>' + '{point.y}' + '</b><br/>'
    }
  }, {
    color: '#AAAAAA',
    name: 'Open Rate',
    type: 'line',
    yAxis: 2,
    data: [5, 11, 3],
    lineWidth: 4,
    marker: {
      enabled: true,
      "symbol": "circle"
    },
    tooltip: {
      valueSuffix: ' %'
    }
  }, {
    color: '#5891c8',
    name: 'Clickthrough Rate',
    type: 'line',
    data: [30, 27, 22],
    lineWidth: 4,
    marker: {
      enabled: true,
      "symbol": "circle"
    },
    tooltip: {
      valueSuffix: ' %'
    }
  }]
});

      </script>  
   </body>
</html>

Related Tutorials