Javascript variable not working inside of highcharts

Question

I am trying to show high charts pie chart dynamically, i pass exact value format into data index in high chart but it doesn't show anything in chart, if i give what a variable have a value directly it's working fine, but passing variable directly it show empty pie chart,

Here is my javascript code,

function get_product_chart_by_filter()
   {
      var product_year_raw = $('#top_least_pro_year_filt').val();
      var pro_top_least = $('#top_least_pro_filt').val();
      var next_year = '';
      var product_year = '';
      var pro_top_res = '';
      if (product_year_raw.length == 4) {
         next_year = parseInt(product_year_raw) + 1;
         product_year = product_year_raw+'-'+next_year;
      }
      else {
         product_year = product_year_raw;
      }
      if (pro_top_least == 1) {
         $('#pro_top_or_least').empty().html('Top ');
      }
      else {
         $('#pro_top_or_least').empty().html('Least ');
      }
      $.ajax({
         type:"POST",
         url:baseurl+'Dashboard/product_dashboard_dynamic',
         data:{'year':product_year,'top_or_least':pro_top_least},
         cache: false,
         dataType: "html",
         success: function(result){

            pro_top_res = JSON.parse(result);
            var data_series = '';
            for (var i = pro_top_res.length - 1; i >= 0; i--) {
                data_series += "['"+pro_top_res[i].product_name+"',"+Number(pro_top_res[i].product_order_count)+"],";
            } 
            data_series = data_series.replace(/,\s*$/, "");
           // Output of 'data_series' variable = ['Basmathi',6],['null',6],['Basmathi',6],['Basmathi',20],['Basmathi',21] 

            Highcharts.chart('top_5_products_container', {
             chart: {
                 plotBackgroundColor: null,
                 plotBorderWidth: 0,
                 plotShadow: false
             },
             credits:false,
             title: {
                 text: 'Products',
                 align: 'center',
                 verticalAlign: 'middle',
                 y: 60
             },
             tooltip: {
                 pointFormat: '{series.name}: <b>{point:y}</b>'
             },
             accessibility: {
                 point: {
                     valueSuffix: '%'
                 }
             },
             plotOptions: {
                 pie: {
                     dataLabels: {
                         enabled: true,
                         distance: -50,
                         style: {
                             fontWeight: 'bold',
                             color: 'white'
                         }
                     },
                     startAngle: -90,
                     endAngle: 90,
                     center: ['50%', '75%'],
                     size: '110%'
                 }
             },
             series: [{
                 type: 'pie',
                 name: 'Product',
                 innerSize: '50%',
                 data: [data_series]
             }]
         });

         }
      });

   }

Here is my server side code,

public function product_dashboard_dynamic()
    {
        $dashboard_settings_info = get_dashboard_settings_info();
        $top_or_least = $this->input->post('top_or_least');
        $raw_yr = $this->input->post('year');
        $exp_yr = explode('-', $raw_yr);
        $yr1 = $exp_yr[0];
        $yr2 = $exp_yr[1];
        $top_least_count = $dashboard_settings_info->max_product_count;
        $get_top_least_product = $this->Dashboard_model->get_top_least_product($top_or_least,$yr1,$yr2,$top_least_count);
        echo json_encode($get_top_least_product);
    }

Anyone can assist me?

should that be a string or an array in the loop? I'd have thought it might be better to work with an array and perform whatever translations are required on that ? I refer to data_series +=... — Professor Abronsius
– Professor Abronsius, Commented Jun 17, 2020 at 6:31

Professor Abronsius · Accepted Answer · 2020-06-17 06:41:39Z

1

My thought is that it has something to do with the use of a concatenated string rather than an array so you could perhaps try... though I have not used highcharts before

Change

var data_series = '';
for (var i = pro_top_res.length - 1; i >= 0; i--) {
    data_series += "['"+pro_top_res[i].product_name+"',"+Number(pro_top_res[i].product_order_count)+"],";
}

to:

var data_series = [];
for( var i = pro_top_res.length - 1; i >= 0; i-- ) {
    var obj=pro_top_res[i];

    data_series.push( [ obj.product_name, parseInt( obj.product_order_count ) ] );
}

remove

data_series = data_series.replace(/,\s*$/, "");

Finally modify the configuration to accomodate new input data as an array

'series': [{
    'type': 'pie',
    'name': 'Product',
    'innerSize': '50%',
    'data':data_series
}]

answered Jun 17, 2020 at 6:41

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eibs Over a year ago

Yes sir @Professor Abronsius, You gave a exact solution for me

Professor Abronsius Over a year ago

Great - I glad that it helped.. good luck with the remaining pieces of your app

Collectives™ on Stack Overflow

Javascript variable not working inside of highcharts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related