Highcharts Demo

author(s): Torstein Hønsi

by Rambabu Pudi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

var orderData = JSON.parse('{"title":"Orders","data":[{"totalOrder":46,"chartType":"pie","pageLink":"../../jda/SCPOWeb-fulfillment/DynamicNavServlet?dynamicNavAction=dynamicNavNavigate&dynamicNavTransform=ORDEREXCEPTION_TO_ORDEREXCEPTION&dynamicNavKeyCollector=com.manu.scpoweb.fulfillment.ui.orderoptreview.utils.DBUtils&dynamicNavFramework=webworks&dynamicNavTargetListingName=Fulfillment+Flexible+Editor&dynamicNavTargetInstanceName=Order+Review+Exception+FE&FW_SYS_ID=null&dynamicNavTargetOwner=%24PUBLIC&dynamicNavSourceListingName=Dashboard&todoSearchName=BSK_NONPROMPT_NETWORK~P~Non-Prompted&Category=Setup","graphData":[{"count":1,"status":"Calendar","pageLink":null},{"count":45,"status":"UOMConversion","pageLink":null}]}]}');
   var title = orderData.title;
      var link = orderData.pageLink;

      var chartType = orderData.data[0].chartType;
      var totalOrder = orderData.data[0].totalOrder;

      orderData = orderData.data[0].graphData;
      var chartData = [];
     
     chartData.push([orderData[0].status, orderData[0].count]);
     
     chartData.push([orderData[1].status, orderData[1].count]);
     
       
      var titleObj =  {
        verticalAlign: 'middle',
        x: -90,
        y: 0,
        style: {
          fontSize: '12px',
        },
        text: `some text`,
      };

      var  legendObj =  {
        align: 'center',
    
    };

Highcharts.chart('container', {
    plotOptions: {
          pie: {
            shadow: false,

          },
          series: {
            cursor: 'pointer',
            events: {
              click: function(){
              debugger;
              alert("asdfsdf");
              {
    console.log('href location ', this.linkMap[event.point.name]);
    window.location.href = this.linkMap[event.point.name];
  }

              },
            },
          },
        },
        credits: false,
        chart: {
          type: chartType || 'pie',
          height: 220,
        },
        title: titleObj,
    ...