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>
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