Reputation: 11
I have a igdatagrid column chart in my application . The requirement is to update the chart as per the change in data. the chart also has Customtooltip on the bars which can be seen on hover . now when the data changes ,chart is rendered if tooltip is not used but when i use tooltip it shows error . initially while loading my page everything works fine but after updating the datasource it shows some error this is my javascript code
$("#chart").igDataChart({
width: "98%",
height: "350px",
dataSource: jsonObj,
title: "Sector Comparison",
windowResponse: "immediate",
axes: [{
name: "xAxis",
type: "categoryX",
label: "xValue",
labelTopMargin: 5,
gap: 5
}, {
name: "yAxis",
type: "numericY",
minimumValue: 0,
maximumValue: 109,
labelLocation: "outsideRight",
majorStrokeThickness: 2,
majorStroke: "#0856a7",
minorStroke: 'black',
minorInterval: 10,
interval: 50,
formatLabel: function (value) {
if (value == 50) {
return "Medium value";
}
},
}, {
name: "yAxis1",
type: "numericY",
title: "Rank",
minimumValue: 0,
maximumValue: 109,
labelLocation: "outsideLeft",
interval: 10,
formatLabel: function (value) {
return value;
},
}],
series: [{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
showTooltip: true,
remove: true,
isCustomCategoryStyleAllowed: true,
}],
assigningCategoryStyle: function (e, ui) {
var startIndex = ui.startIndex;
var endIndex = ui.endIndex;
var items =ui.getItems(startIndex,endIndex);
var color = ui.fill;
for (var i = 0; i < items.length; i++) {
if (items[i].color) {
color = items[i].color;
}
}
ui.fill = color;
}
this is the code i write while binding tooltip initially
//get
var series = $("#chart").igDataChart("option", "series");
series[0].tooltipTemplate;
//Set
$("#chart").igDataChart("option", "series",
[{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
showTooltip: true,
isCustomCategoryStyleAllowed: true,
tooltipTemplate: "CustomTooltipTemplate",
}]
);
"CustomTooltipTemplate" is my custom tooltip template that works completely fine initially
when i get the new data after which i try to update chart with tooltip series[0].tooltipTemplate; show error in console as Cannot read property 'tooltipTemplate' of undefined and if i don't use custom template and just use property showTooltip Cannot read property 'updateToolTip' of undefined is shown , is there any way i can use custom tootltip and dataSource dynamically.
i used to update the datasource i,e jsonObj . i found the solution . on updation of chart i overwrite the series and assign datasource to the chart and renderseries as below and it works
$("#chart").igDataChart({
series: [{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
isCustomCategoryStyleAllowed: true,
}],
});
$("#chart").igDataChart("option", "dataSource", jsonObj);
$("#chart").igDataChart("renderSeries", "xAxis", false);
$("#chart").igDataChart("renderSeries", "yAxis", false);
$("#chart").igDataChart("renderSeries", "yAxis1", false);
Upvotes: 1
Views: 420