add a category ID to Charts Category - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

add a category ID to Charts Category

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//  www. ja  v  a  2  s .  co m
objData={}
objData[0]= {
"category":["January","February","March","April","May","June","July","August"],
"score":[48,25,0,80,71,100,100,44],
"id":["01","02","03","04","05","06","07","08"],
"year":"2016",
"Y":"2016",
"minimum":[60,60,60,60,60,60,60,60]
};
            $(function () {
                $('#chart').highcharts({credits: {
                        enabled: false
                    },
                    title: {text: 'Company Performance', x: -20},
                    subtitle: {text: 'For the year of' + objData[0].year, x: -20},
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function () {
                                        data = {
                                        month: objData[0].id[this.x],
                                        year: objData[0].Y
                                        };
                                       console.log( objData[0].id[this.x]);
                                    }
                                }
                            }
                        }
                    },
                    xAxis: {categories: objData[0].category},
                    yAxis: {title: {text: 'Percentage'}, plotLines: [{value: 0, width: 1, color: '#808080'}]},
                    tooltip: {valueSuffix: '%'},
                    legend: {layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0},
                    series: [{name: 'Min Score', color: '#A30000', data: objData[0].minimum}, {name: 'Score', color: '#10AEDE', data: objData[0].score}],
                });
            });
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="chart" style="height: 400px; width: 500px"></div>  
   </body>
</html>

Related Tutorials