Pass php variable in bar graph with highcharts

Question

I have a bar graph made with highcharts that display properly, data are from mysql table. I would like to pass value i mean : ($category['data'][] = $r['Assign_To']) in each bar as variable so that when i click on a bar this value contained in variable is taken to a new page in order to use it in that page. The exemple given in highcharts website doesn't fit me because i use data from table.

1- this is the graph

 $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            title: {
                text: 'EOP Postings Issues Chart',
                x: -20 //center
            },

             credits: {
        enabled: false
    },
            xAxis: {
                categories: []
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Requests'
                },
             },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            }, 

            series: []
        }

        $.getJSON("DataEobChart.php", function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];

            chart = new Highcharts.Chart(options);
        });
    });

DataEobChart.php

 $dbc = @mysqli_connect('', '', '', '');
$query = mysqli_query($dbc, "select *, count(Assign_To) as count,Assign_To from claims_follow_up.eob_posting where  Status='open'  group by Assign_To order by count desc");
 $category = array();
  $category['name'] = 'Month';
  $series1 = array();
  $series1['name'] = 'Number of issues assigned';
  while($r = mysqli_fetch_array($query)) {
  $category['data'][] = $r['Assign_To'];
 $series1['data'][] = $r['count'];

   }
 $result = array();
  array_push($result,$category);
   array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
 mysqli_close($dbc);

Can you provide an example of the JSON that is generated by your PHP file? Then it'll be easier to work with the HighChart code so it can use the JSON data. — Dr. Cool
– Dr. Cool, Commented Aug 18, 2016 at 21:42

Dr. Cool · Accepted Answer · 2016-08-18 23:24:12Z

1

Add a new section to your HighCharts definition called plotOptions containing this code:

        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (event) {
                            var index = event.point.index;
                            var Assign_To = options.xAxis.categories[index];
                            alert(Assign_To);
                            location.href = "NewPage.php?AssignTo=" + Assign_To;
                        }
                    }
                }
            }
        },

This provides a click event handler which will figure out which options.xAxis.categories[] item to use based on which bar was clicked. It will then alert the result and then take the user to a page called NewPage.php with a request string called AssignTo.

edited Aug 18, 2016 at 23:24

answered Aug 18, 2016 at 21:58

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

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

5 Comments

Diasline Over a year ago

this new section put me on the way to do it. There is only one issue when i click on bar i go to NewPage but the variable is not kept. Here is the url after clicking: localhost/bposssss/NewPage?AssignTo=undefined

Dr. Cool Over a year ago

You'll need to help me debug this. First, I fixed a small problem that prevented it from showing the value with the alert(). Try this new code. Also, checked the results of the debug console. Perhaps something is wrong with the options.xAxis.categories[index]. Play around with the console.log and tell me what you find.

Dr. Cool Over a year ago

Then play with the console.log. Change it to console.log(options). Do you see what you expect to see? If you drill down, can you find the data you want? Probably the path to the data you want isn't correct. That's what I mean... help me debug. Sorry, but I can't do it for you.

Diasline Over a year ago

Sorry if i ask this question, can u show me how to use console.log ?

Dr. Cool Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Pass php variable in bar graph with highcharts

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related