function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
function drawPlotlyChart(data1,plotType,nDims,nMeas,dimIdToPlot,drillNum, drillFilters){
var i=0;
var traces = [];
while(i<nMeas){
traces[i] = {
x: unpack(data1,Object.keys(data1[0])[drillNum]),
y: unpack(data1,Object.keys(data1[0])[nDims+i]),
type: plotType,
transforms: [
{
type: 'aggregate',
groups: unpack(data1,Object.keys(data1[0])[drillNum]),
aggregations: [{target: 'y', func: 'sum', enabled: true}]
}
]
};
i++;
}
if(drillFilters.length!=0){
for(var k=0;k<traces.length;k++){
for(i=0;i<drillFilters.length;i++){
traces[k].transforms.push(drillFilters[i]);
}
}
}
var layout = {barmode: 'group'};
var myPlot = document.getElementById('myDiv');
Plotly.newPlot('myDiv', traces, layout);
myPlot.on('plotly_click', function(clickData){
drillNum=drillNum+1;
if(drillNum>=nDims){
return;
}
var newFilter= {};
newFilter.type='filter';
newFilter.target=unpack(data1, Object.keys(data1[0])[drillNum-1]);
newFilter.operation="=";
newFilter.value=clickData.points[0].x;
dimIdToPlot = dimIdToPlot+1;
drillFilters.push(newFilter)
drawPlotlyChart(data1,plotType,nDims,nMeas,dimIdToPlot,drillNum,drillFilters);
})
}
var arrData =[["Dept","Year","Month","Buy","Sell"],["ABC","2017","Jan","10","10"],["ABC","2017","Feb","12","10"],["ABC","2017","Mar","16","10"],["ABC","2017","Apr","20","10"],["ABC","2017","May","10","10"],["ABC","2017","June","11","10"],["ABC","2017","July","120","10"],["ABC","2017","Aug","140","10"],["DEF","2017","Sep","100","10"],["DEF","2017","Oct","120","10"],["DEF","2017","Nov","120","10"],["DEF","2017","Dec","120","10"],["DEF","2018","Jan","120","10"],["DEF","2018","Feb","120","10"],["DEF","2018","Mar","120","10"],["DEF","2018","Apr","120","10"],["ABC","2018","May","120","10"],["ABC","2018","June","120","10"],["ABC","2018","July","20","10"],["ABC","2018","Aug","40","10"],["ABC","2018","Sep","120","10"],["ABC","2018","Oct","120","10"],["ABC","2018","Nov","120","10"],["ABC","2018","Dec","120","40"]];
var header=arrData[0];
var mainData=arrData.splice(1,arrData.length);
var data1=[];
mainData.forEach(function(row){var obj={};for(var i=0;i<header.length;i++){obj[header[i]]=row[i];}data1.push(obj);});
var ndims = 3;
var nmeas=2;
var plotType='bar';
var dimIdToPlot=0;
drawPlotlyChart(data1,plotType,ndims,nmeas,dimIdToPlot,0,[]);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>