tooltip shows for spline and for scatter plot - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

tooltip shows for spline and for scatter plot

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(function(){//w w w .  ja v  a 2  s .co  m
// chart0 - shows spline plot with working tooltip
// chart1 - shows scatter plot with working tooltip, scroll down to see
var chart0 = new Highcharts.Chart({
    title: {
        text: 'Wind Speed'
    },
    chart: {
        renderTo: 'dataplot0',
        borderWidth: 1,
        defaultSeriesType: 'spline',
        zoomType: 'x'
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Wind Speed (m/s)'
        }
    },
    tooltip: {
        crosshairs: true,
        formatter: function () {
            return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + '</b> ' + this.series.name + ': ' + this.y + ' m/s';
        }
    },
    series: [{
        name: 'Wind Speed',
        data: [0.52, 0.778, 0.746, 0.594, 0.716, 0.793, 0.648, 0.828, 0.202, 0.066, 0.116, 0.116, 0.17, 0.195, 0.051, 0, 0.368, 2.365, 2.841, 2.693, 2.416, 2.541, 2.429, 2.888],
        pointStart: 1360893600000,
        pointInterval: 3600000
    }]
});
//
//
//
var chart1 = new Highcharts.Chart({
    title: {
        text: 'Wind Direction'
    },
    chart: {
        renderTo: 'dataplot1',
        borderWidth: 1,
        defaultSeriesType: 'scatter',
        zoomType: 'x'
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            marker: {
                radius: 3,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        tickInterval: 90,
        min: 0,
        max: 360,
        title: {
            text: 'Wind Direction (deg)'
        }
    },
    tooltip: {
        crosshairs: true,
        formatter: function () {
            return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' </b> ' + this.series.name + ': ' + this.y + ' deg';
        }
    },
    series: [{
        name: 'Wind Direction',
        data: [61.83, 59.3, 64.94, 42.37, 5.653, 14.92, 77.5, 67.31, 14.38, 294.7, 324.7, 170.5, 23.26, 33.8, 178.8, 0, 206.8, 223, 223.9, 221.5, 218.8, 208.1, 222.4, 228.7],
        pointStart: 1360893600000,
        pointInterval: 3600000
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="dataplot0" style="width: 350px; height: 200px"></div> 
      <div id="dataplot1" style="width: 350px; height: 200px"></div>  
   </body>
</html>

Related Tutorials