[CLOSED] Adding line series tooltip dynamically.

Hi,

I would like to assign the tooltip property of the line series after the line series is rendered. I know I can configure the tip property of the series and it will work. but this is causing some javascript error when there is a mouse over the chart while it is rendering. So we want to be able to setup the tooltip after the chart have been added to the panel.
below is our code sample.

Code:

---

  var store = Ext.create('Ext.data.JsonStore', {
                                fields: result.result.Fields,
                                data: result.result.Data
                            });

                            var numAxes = {
                                type: 'Numeric',
                                position: 'left',
                                fields: result.result.Yfields,
                                title: result.result.YfieldLabel,
                                minimum: 0,
                                labelTitle: {
                                    "font": "bold 11px Tahoma"
                                }
                            };
                           
                            var chart = {
                                width: 800,
                                height: 600,
                                animate: true,                               
                                store: store,
                                xtype: "chart",
                                axes: [numAxes,
                        {
                            type: 'Category',
                            position: 'bottom',
                            fields: [result.result.Xfield],
                            title: result.result.XfieldLabel,
                            grid: true,
                            length: 100,
                            width: 100                       
                                           
                        }],

                                // Add the line Series
                                series: [

                                {
                                    type: 'line',
                                    highlight: {
                                        size: 7,
                                        radius: 7
                                    },                                 
                                    axis: 'left',
                                    xField: 'Name',
                                    yField: 'Value',
                                    listeners: {
                                        itemClick: function (item) {
                                            if (item.storeItem.raw.IsInitializingData || !(item.storeItem.data[item.series.yField])) {
                                                return;
                                            }
                                            item.storeItem.raw.ResultSetId = portlet.panelDefinition.SettingInfo.CurrentResultSetId;
                                            item.storeItem.raw.ResolutionType = "Open";
                                            NewWorkItemsLineChart.DataPointClicked(item, panelDefinition.MaximizeUrl, panelDefinition.Name, panelDefinition.Description);
                                        }
                                    },
                                    markerConfig: {
                                        type: 'cross',
                                        size: 4,
                                        radius: 4,
                                        'stroke-width': 0
                                    }
                                }
                                ]
                            }
                            chart = panel.add(chart);

----------->>>>>>>> below is my concern this is not working for assigning the tip

                            chart.series.items[0].tips = {
                                trackMouse: true,
                                width: 240,
                                height: 28,
                                anchorToTarget: false,
                                anchor: "top",
                                renderer: function (storeItem, item) {

                                    //custom rendering  ignore.
                                }
                            };

---

Hello!

Quote:

---

but this is causing some javascript error when there is a mouse over the chart while it is rendering.

---

Can you say what a problem do you have with adding tooltip via Ext.NET? Because, if there is a bug we can fix it.

Quote:

---

So we want to be able to setup the tooltip after the chart have been added to the panel.
below is our code sample.

---

As I see you manually create the chart using JS but I don't quite understand what a problem do you have with renderer? You want to change renderer function or something else?

Also, it can be useful to take a look at the following example and its source code from Sencha: http://docs.sencha.com/ext-js/4-2/ex...harts/Bar.html

I am doing the same thing that is done in the sample link that you sent . that is not my question. All the chat I have(bar chats, stack-bar chart) are working with tooltip defined inside the series. But for the line chart it throw error not all the time but inconsistently and mostly happens when the mouse moves over the panel during the rendering. i do not know how else to explain the issue.

Could we not go into a back and forth question. Can you please show me how to add the tooltip dynamically to the line series as i indicated earlier. that will resolve my issue. Thanks

You can use the following approach:

Code:

---

App.Chart1.series.items[0].tipConfig.renderer = function(storeItem,item){ this.setTitle('My values'); };
App.Chart1.redraw();

---