use line chart and column chart to show two different data in one chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

use line chart and column chart to show two different data in one 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"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from   w  w  w.  java2 s. c  o  m
    $('#container').highcharts({
        chart: {
         alignTicks: false,
      },
      title: {
         text: 'Kirkjub?jarklaustur'
        },
        xAxis: {
         categories:['Leden', '?nor', 'B?ezen', 'Duben', 'Kv?ten', '?erven', '?ervenec', 'Srpen', 'Z???', '??jen', 'Listopad', 'Prosinec',],
          labels: {
             rotation: -45,
          }
      },
      yAxis:[
               {
               title: {
                  text: "Teplota (?C)"
               },
               gridLineWidth: 0,
                  min: -40,
                  max: 50,
                        tickInterval: 10
               },
             {
               title: {
                  text: "Sr?ky (mm)",
               },
               opposite: true,
               gridLineWidth: 0,
                    min: 0,
               max: 500,
                    tickInterval: 100
            },
      ],
      series: [
         {
            name: 'Min teplota',
            color: '#FF9999',
            zIndex: 1,
            data: [-3.0,-3.0,-1.0,1.0,4.0,7.0,8.0,8.0,6.0,3.0,0.0,-2.0,                           ],
            type: 'spline',
            yAxis: 0,
         },
         {
            name: 'Max teplota',
            color: '#8C0000',
             zIndex: 1,
            data: [2.0,2.0,4.0,6.0,10.0,13.0,15.0,14.0,11.0,7.0,4.0,2.0,                           ],
            type: 'spline',
            yAxis: 0,
         },
            {
            name: 'Sr?ky',
             color: '#265CFF',
            borderColor: '#222222',
            fillOpacity: 0.3,
            zIndex: 0,
            data: [   145,130,131,115,118,131,121,159,141,185,137,133],
            type: 'column',
            yAxis:
               1,
            }
       ]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; width: 500px"></div>  
   </body>
</html>

Related Tutorials