[CLOSED] Adding line series tooltip dynamically.

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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.

      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.
                                     }
                                 };
    Last edited by Daniil; Apr 09, 2013 at 4:13 AM. Reason: [CLOSED]
  2. #2
    Hello!

    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.

    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
  3. #3
    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
    Last edited by RCM; Apr 04, 2013 at 2:21 PM.
  4. #4
    You can use the following approach:

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

Similar Threads

  1. Replies: 13
    Last Post: Apr 26, 2016, 10:11 PM
  2. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM
  3. [CLOSED] Line series broken with javascript error
    By jchau in forum 2.x Premium Help
    Replies: 3
    Last Post: Mar 04, 2013, 10:04 AM
  4. Replies: 3
    Last Post: Jul 13, 2012, 10:28 AM
  5. [CLOSED] Dynamic Hyperlink adding HTML Line break after
    By rthiney in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 13, 2010, 2:09 PM

Posting Permissions