Dhruvi Shah
Dhruvi Shah

Reputation: 11

Infragistics igDataChart dynamic binding

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

Answers (0)

Related Questions