Combining Column charts and line charts with the same same data in the same container - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Combining Column charts and line charts with the same same data in the same container

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {//from   w  w w.ja  v  a2  s.  co  m
   min-width: 300px;
   max-width: 800px;
   height: 300px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
const json = {
  "boundaries": {
    "boundary": [{
      "boundaryId": "55083021003",
      "boundaryType": "USA_CITY",
      "boundaryRef": "C1"
    }]
  },
  "themes": [{
    "AssaultCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Assault Crime",
        "description": "Assault Crime for 2013",
        "count": 18901
      }, {
        "name": "2014 Assault Crime",
        "description": "Assault Crime for 2014",
        "count": 17707
      }]
    }
  }, {
    "BurglaryCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Burglary Crime",
        "description": "Burglary Crime for 2013",
        "count": 17743
      }, {
        "name": "2014 Burglary Crime",
        "description": "Burglary Crime for 2014",
        "count": 14242
      }]
    }
  }]
}
const cats = {}
const series = json.themes.map((o) => {
   const key = Object.keys(o)[0]
   return {
     name: key,
    data: o[key].individualValueVariable.map((o) => {
       cats[o.name] = 1
       return { category: o.name, y: o.count }
    })
  }
})

const categories = Object.keys(cats)
// Chart options
const options = {
   chart: {type: 'column'},
   xAxis: {categories: categories},
  series: series
}
// Create chart
const chart = Highcharts.chart('container', options)
console.log(series, categories)
    }

      </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"></div>  
   </body>
</html>

Related Tutorials