Default select first bar of viz column graph when page loads in sapui5 - sapui5

Question

I have used viz chart library. I have given some drill down functionality on the column graph. For that I have to select any column of the graph to see the detail for the selected part (in the same page).
Now I want to select my first column/bar of the column graph automatically. It means when I go to the graph page, the first bar should be selected as default and the detail of the selected bar should be there.
Please help me guys.
Code:
View:
<viz:ui5.Column id="chart" selectData="goToDaily" width="auto">
<viz:plotArea>
<viz:ui5.types.VerticalBar colorPalette="#FFCC00"/>
</viz:plotArea>
<viz:title>
<viz:ui5.types.Title text="Monthly">
</viz:ui5.types.Title>
</viz:title>
<viz:dataset>
<viz:ui5.data.FlattenedDataset id="fds1" >
<viz:dimensions>
<viz:ui5.data.DimensionDefinition id="dim" axis="1" name="Month" value="{name}">
</viz:ui5.data.DimensionDefinition>
</viz:dimensions>
<viz:measures>
<viz:ui5.data.MeasureDefinition id="mea" name="Values" value="{value}">
</viz:ui5.data.MeasureDefinition >
</viz:measures>
</viz:ui5.data.FlattenedDataset>
</viz:dataset>
</viz:ui5.Column>
Controller:
Oninit:
JSONmodel = new sap.ui.model.json.JSONModel();
data1 = [ {
name : "Jan",
value : 100,
},
{
name : "Feb",
value : 150,
},
{
name : "March",
value :120,
},
{
name : "April",
value : 200,
}
];
JSONmodel.setData(data1);
sap.ui.getCore().byId("idPage3--chart").setModel(JSONmodel);
Select Data for Chart:
goToDaily:function(evt){
sap.ui.getCore().byId("idPage3--chart").selection({ctx:[{dii_a1:1}]});
}
I have tried to select month Feb as default selection, but not able to select it.
Regards,
Niket Talati

Answer 1

There are quite a few things incorrect in your code
You have specified an event handler for selectData but this is obviously only triggered when you first "select data". You never fire an event for data selection in your code, so the event handler will only be triggered if you click on a column manually
It seems you tried to fire the event from the event handler (which is the other way around, see previous point), but you have never implemented the fireSelectData method.
In addition, the signature of the map you tried to select is incorrect. According to the API (which is ill-formatted, I know) you need to send a whole lot more, something like this:
// ...snip...
var oSelection = {
data : [
{
target : oRect,
data : [
{
ctx : {
path : {
dii_a1 : 0,
dii_a2 : 0,
mg : 0,
mi : 0
},
type : "Measure"
},
val : 100
}
]
}
],
name : "selectData"
};
oYourChart.fireSelectData(oSelection);
// ...snip...
If you need to get an element by it's Id when using XMLViews, you should use this.getView().byId("chart") instead
Hope the above helps!