Diasline Diasline - 3 months ago 30
MySQL Question

Pass php variable in bar graph with highcharts

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);
});
});



  1. 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);


Answer

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.