How to get Clicked series name when clicking on dojox.charting.Chart?

Question

i'm trying to create a chart using dojo. I choose a StackedColumns chart. I want to make it interactive. When a user clicks on a graph columns, an hyperlink should be invoked. But to create hyperlink'url, I need the series name. Is there any way to get Series Name when user clicks on a column? I've been searching for days but i didn't found any solution. Here is my code:

<div id="chartNode" style="width: 1024px; height: 768px;"></div>
<div id="legend"></div>

<script type="text/javascript">

require(['dojox/charting/Chart',
'dojox/charting/themes/PrimaryColors',
'dojox/charting/plot2d/StackedColumns',
'dojox/charting/plot2d/Grid',
'dojox/charting/widget/Legend',
'dojox/charting/action2d/Tooltip',
'dojox/charting/action2d/Magnify',
'dojox/charting/action2d/Highlight',
'dojo/store/Observable',
'dojo/store/Memory',
'dojox/charting/StoreSeries',
'dojox/charting/axis2d/Default',
'dojo/domReady!'], function(Chart, theme, StackedColumns,Grid,Legend,Tooltip,Magnify,Highlight,Observable,Memory,StoreSeries){

var myData = [{id:1,value:1,site:'1'},
                            {id:2,value:2,site:'1'},
                            {id:3,value:6,site:'1'},
                            {id:4,value:4,site:'1'},
                            {id:5,value:5,site:'1'},
                            {id:6,value:1,site:'2'},
                            {id:7,value:3,site:'2'},
                            {id:8,value:1,site:'2'},
                            {id:9,value:2,site:'2'},
                            {id:10,value:7,site:'2'}];


var myStore = new Observable(new Memory({
data: { identifier: 'id',
                items: myData
            }
}));

var serie_1 = new StoreSeries(myStore, { query: { site: 1 } }, 'value');
var serie_2 = new StoreSeries(myStore, { query: { site: 2 } }, 'value');

var myChart = new Chart('chartNode');
myChart.setTheme(theme);
myChart.addAxis('x', { fixLower: 'minor', 
           fixUpper: 'minor', 
           natural: true,
           rotation: 90
});

myChart.addAxis('y', {vertical: true,fixLower: 'major',fixUpper: 'major',minorTicks: true,includeZero: true});
myChart.addPlot('myPlot', { type: 'StackedColumns', gap: 5, minBarSize: 8});                                    

myChart.addSeries('Serie 1',serie_1,{ stroke: { color: 'red' }, fill: 'lightpink' });
myChart.addSeries('Serie 2',serie_2,{ stroke: { color: 'blue' }, fill: 'lightblue' });

var highlight = new Highlight(myChart, 'myPlot');

myChart.render();

var legend = new Legend({ chart: myChart }, 'legend');

myChart.connectToPlot('myPlot',function(evt) {
// React to click event
    if(type == 'onclick') {
    var msg = 'x:'+evt.x+';y:'+evt.y+';index: '+evt.index+';value: '+evt.run.data[evt.index];
    alert(msg);
    //How to get series informations when onclick event fires???

    }
    var tip = new Tooltip(myChart,'myPlot',{text:function(evt){return evt.run.data[evt.index];}});

}); 

});

</script>

Answer 1

I tried this in a stacked bar and works well:

chart.connectToPlot("default", function(evt) {var type  = evt.type; if(type=="onclick") console.log(evt.run.name);})

evt.run.name provides the series name based on the column you clicked

Answer 2

Great! Thank you Noelia!

I have used it for a pie chart. You can get the index number of the slice with the parameter evt.index.