Well, in the case of data being populated by json file, you will have to apply a "on('click', function(i,row){
}" to you Morris graph.
The best thing is first to call the following console function "console.log(i, row); ", and see the value in the console windows (in your debugger development tool such as "Firebug") as you click on the graph.
For Morris Donuts, you will then have 'row.label' corresponding to label ('restocking' above) and 'row.value' ('8' above) of the part where you have clicked.
Having that information, you can , for example, upload a data-table depending on the label (row.label) you have clicked on :
DONUT
$.getJSON("http://localhost/boot/get_repartition_order_status_today_morris_donut.php?type=graph", function (json)
{
var DonutGraph = new Morris.Donut({
element: 'morris-donut-chart',
data: json,
}).on('click',function(i,row){
tbtoday_orders_by_status =
$('#tbtoday_orders_by_status').DataTable();
tbtoday_orders_by_status.ajax.url( "http://localhost/boot/get_repartition_order_status_today_morris_donut.php?type=table&status=" + row.label).load();
$("#hour_day_activity").html(getActualHour());
});
setInterval(function() {
updateLiveDonutGraph();
}, delay);
});
The best thing is first to show data-table with all the data (no -filter at all) as an initialization of the table (that's the reason of using ajax.url(..).load right above):
var tbtoday_orders_by_status = $('#tbtoday_orders_by_status').dataTable( {
"language": {
"url": "http://localhost/boot/js/DataTables.French.json"
},
"ajax": {
"url": "http://localhost/boot/get_repartition_order_status_today_morris_donut.php?type=table",
"dataSrc": ""
},
"columns": [
{ "data": "purchase_serial_number" },
{ "data": "purchase_creation_date" },
{ "data": "lastmod" },
{ "data": "status" }
]
} );
For bar and line Morris graph, this will be quite similar:
BAR $.getJSON("http://localhost/boot/get_nb_commande_statut_fraud_5_jours_glissants_bar.php", function (json) {
var BarGraph = new Morris.Bar({
element: 'graph_bar',
data: json,
xkey: 'date_purchase',
ykeys: ['y0', 'y40', 'y80','y90','y100'],
labels: ['0', '40', '80','90','100']
}).on('click',function(i,row){
alert("Element no " + i + " : date " + row.date_purchase + " - nb order waiting to be analysed (0) :" + row.y0
+ " - nb order waiting for justification (40) :" + row.y40
+ " - nb order confirmed fraud (80) :" + row.y80
+ " - nb order cancelled (90) :" + row.y90
+ " - nb order accepted (100) :" + row.y100
);
console.log(i, row);
});
setInterval(function() { updateLiveBarGraph(BarGraph); }, delay);
});
LINE $.getJSON("http://localhost/boot/get_montant_commande_par_type_30_jours_glissants_line.php", function (json) {
var LineGraph = new Morris.Line({
element: 'graph_line',
data: json,
xkey: 'date',
ykeys: ['annulation', 'geste_co','expedie'],
labels: ['Annulations', 'Gestes commerciaux',"Commande non annulées"]
}).on('click',function(i,row){
alert("Element no " + i + ": " + row.date
+ " - cancelled amount :" + row.annulation
+ " - goodwill gesture amount :" + row.geste_co
+ " - shipped amount :" + row.expedie
);
console.log(i, row);
});
setInterval(function() { updateLiveLineGraph(LineGraph); }, delay);
});
