Line chart with zoom support - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Line chart with zoom support

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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> 
   </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: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    "chart":{/*from  w ww  .  j  av a2  s  .  co m*/
        "renderTo":"",
        "zoomType":"xy",
        "alignTicks":false,
        "animation":false,
        "height":600,
        "type":"line",
        "backgroundColor":"#fff",
        "resetZoomButton":{
            "theme":{
                "fill":"white",
                "stroke":"silver",
                "r":0,
                "states":{
                    "hover":{
                        "fill":"#7ac142",
                        "style":{
                            "color":"white"
                        }
                    }
                }
            }
        },
        "options3d":"",
        "panning":true,
        "panKey":"shift"
    },
    title: {
        text: 'Step line types, with null values in the series'
    },
    xAxis:{
        tickmarkPlacement: 'on',
        "align":"left",
        "categories":[
        "0:00",
        "1:00",
        "2:00",
        "3:00",
        "4:00",
        "5:00",
        "6:00",
        "7:00",
        "8:00",
        "9:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00"
        ],
        "title":{
        "text":"",
        "style":{
        "color":"#3E576F",
        "font-family":"Verdana",
        "font-size":"12px"
    }
}
                 },
                 "series":[
                 {
                 "data":[
                 72.2,
                 71.5,
                 71.7,
                 71.2,
                 73.6,
                 73.5,
                 72,
                 71.4,
                 69.7,
                 70.8,
                 70.9,
                 71.3,
                 72,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null
                 ],
                 "name":"The Data",
                 "color":"#1AC8ED"
                 },
                 ],
                 });

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

Related Tutorials