[CLOSED] storeItem (the currently highlighted item) for charttips

**CarpFisher** · Jul 05, 2012, 3:44 PM

I have problem not able to find out the triggering element of the tips from chart, using the following code:

 
 <Tips ID="tipCore" runat="server" TrackMouse="true"  Width="580" Height="170" >                         
                                  <Loader ID="Loader1"  runat="server" DisableCaching="true" Mode="Frame" ShowMask="true">  <LoadMask ShowMask="true" />  </Loader>
                                   <Listeners>
                                        <BeforeShow Handler="#{DirectMethods}.UpdateAssetToolTips('I_WANT_TO_Get_THE_HIGHLIGHTED_CODE');"></BeforeShow>
                                    </Listeners>
                                  
                            </Tips>

If I use <Renderer> inside <Tips> I can get the storeItem and find out exactly what is highlighted. However I want to use a loader to load an URL when a chart element is highlighted. The Listeners did pass TriggerElement to the handler but that looks like it always equal to "true". Similar code works in gridview (using view.getRecord(this.triggerElement)) but I have no idea how to get the item under the charttips.

The following is the complete code that you can use to try it out. Thank you so much

<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>



<script runat="server">
   
    protected void Page_Load(object sender, EventArgs e)
    {
        strCoreCollectives.Data = new object[] {
            new {
                instCode="1234567890",
                instName="test12345678901234567890",
                amount=10000,
                instPerc=10        
            },
               new {
                  instCode="3234567890",
                instName="test32345678901234567890",
                amount=30000,
                instPerc=30        
                
            },
            
            new {
                  instCode="2234567890",
                instName="test22345678901234567890",
                amount=20000,
                instPerc=20        
                
            }
            
        };

        strCoreCollectives.DataBind(); 

    }
    
    [DirectMethod]
    public void UpdateAssetToolTips(string instrumentCode)
    {
        myChart.Series[0].Tips.LoadContent("A_DEFINED_PAGE?instrumentCode=" + instrumentCode, true);
    }
  
</script>

<!DOCTYPE html>

<html>

<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
     
    

               <ext:Panel ID="Panel1" runat="server" >
            <Items>
          <ext:Chart 
                    ID="myChart" 
                    runat="server"
                    StyleSpec="background:#fff;"                   
                    Shadow="true"
                    Animate="true"
                     Width="300"
                    Height="300"     
                       
                    >               
                             
                  
                    <Store>
                        <ext:Store ID="strCoreCollectives" runat="server" AutoDataBind="true">
                            <Model>
                               <ext:Model ID="Model12" runat="server"  IDProperty="instCode">
                                    <Fields>                   
                                                       
                                        <ext:ModelField Name="instCode"  />
                                        <ext:ModelField Name="instName"  />
                                        <ext:ModelField Name="amount" Type="Float"/>
                                        <ext:ModelField Name="instPerc" Type="Float"  />
                                                                      
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                      <Axes>
                      <ext:CategoryAxis 
                            Fields="instName"                            
                            Title="Instruments"
                            Position="Bottom"                               
                            >    
                            <LabelTitle FontSize="10"   >
                                
                            </LabelTitle>
                            <Label FontSize="8" >
                            
                                        <Rotate Degrees="270" />
                                       <Renderer Handler="return Ext.String.ellipsis(value, 15, false);"  />
                                    </Label>    </ext:CategoryAxis>
                                 
                        <ext:NumericAxis                             
                            Fields="amount"
                            Position="Left"
                            Grid="true"
                            Title="Amount" 
                            >
                                <LabelTitle FontSize="10" >
                                
                            </LabelTitle>
                            <Label FontSize="8" ></Label>
                            </ext:NumericAxis>
                                   
                </Axes>
                 <Series>
                       <ext:ColumnSeries                   
                            Highlight="true" 
                            XField="instName"
                            YField="amount"
                            Axes="Left" Column="true"
                        >
                         <Tips ID="tipCore" runat="server" TrackMouse="true"  Width="580" Height="170" >                         
                                  <Loader ID="Loader1"  runat="server" DisableCaching="true" Mode="Frame" ShowMask="true">  <LoadMask ShowMask="true" />  </Loader>
                                   <Listeners>
                                        <BeforeShow Handler="#{DirectMethods}.UpdateAssetToolTips('Get_HIGHLIGHTED_CODE');"></BeforeShow>
                                    </Listeners>
                                  
                            </Tips>
                       
                        </ext:ColumnSeries>
                         </Series>
                </ext:Chart>
     
            
            </Items>
        
        
        </ext:Panel>
         

    </form>
  </body>
</html>

**Daniil** · Jul 05, 2012, 8:59 PM

Hi,

It can be implemented this way.

Example

<Tips 
    runat="server" 
    TrackMouse="true" 
    Width="580" 
    Height="170">
    <Renderer Handler="this.on(
                            'show', 
                            function () {
                                this.load({
                                    url    : 'Test.aspx',
                                    params : {
                                        data : Ext.encode(storeItem.data)
                                    }
                                });
                            }, 
                            this, { 
                                single : true
                            });" />
    <Loader 
        runat="server" 
        Mode="Frame"
        Url="Test.aspx  "
        DisableCaching="true" 
        AutoLoad="false">
        <LoadMask ShowMask="true" />
    </Loader>
</Tips>

**CarpFisher** · Jul 06, 2012, 8:04 AM

Thank you so so so much. :) It works perfectly. If anyone else try to implement this, I've got a tiny problem of string the string from storeItem.get('PROPERTY'),
the string that I got back from the ajax parameter has extra double quote (") surrounded. You might need to remove that before anything with it. Use this:

.Replace("\"", "")

Just a curious Danii, while trying to figure out how to do this, I've tried going through all the chart and series object from the javascript side but didn't find a property to get the currently highlighted item of the chart, is that possible to get that without the Renderer event? (say I might need to know that at other moments.)

**Daniil** · Jul 06, 2012, 1:31 PM

Originally Posted by CarpFisher

If anyone else try to implement this, I've got a tiny problem of string the string from storeItem.get('PROPERTY'),
the string that I got back from the ajax parameter has extra double quote (") surrounded. You might need to remove that before anything with it. Use this:

.Replace("\"", "")

Well, I guess you just should not Ext.encode a simple string property.

Originally Posted by CarpFisher

Just a curious Danii, while trying to figure out how to do this, I've tried going through all the chart and series object from the javascript side but didn't find a property to get the currently highlighted item of the chart, is that possible to get that without the Renderer event? (say I might need to know that at other moments.)

Please investigate the showTip method of the Ext.chart.Tip class.
http://docs.sencha.com/ext-js/4-1/so...#Ext-chart-Tip

**mjad4u** · Nov 27, 2012, 7:23 AM

Hi,

I am also working on the similar page, i would like to know how to get Ext.encode(storeItem.data) data in test.aspx page. Please help.

**Daniil** · Nov 27, 2012, 12:06 PM

Hi @mjad4u,

Sorry, I don't understand the question. Please elaborate.

**mjad4u** · Nov 27, 2012, 12:29 PM

Hi Daniil,

I have a parent page having one chart on columnseries mouse move i would like to show tips window through the loader where i am loading child page 'Test.aspx'. the problem is how to retrieve the parameter value in 'Test.aspx' i can see params : { data : Ext.encode(storeItem.data) } }); is getting passed to the 'Test.aspx' but have no idea how to retrieve it in 'Test.aspx'.

Also possible can we pass the storeItem.get('Month') as a parameter.
exampe
1)

<ext:Parameter Name="VAL" Value="Ext.encode(storeItem.data)" Mode="Raw">

1)

<ext:Parameter Name="VAL" Value="storeItem.get('Month') " Mode="Raw">

Please help

Code example

<Series>
<ext:ColumnSeries Highlight="true" XField="instName" YField="amount" Axes="Left"
Column="true">
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="580" Height="170">
<Renderer Handler="this.on(function () {
this.load({ url : 'Test.aspx', 
params : { 
data : Ext.encode(storeItem.data) } }); },
this, { single : true });" />
<Loader ID="Loader1" runat="server" Mode="Frame" Url="Test.aspx" DisableCaching="true">
<LoadMask ShowMask="true" />
<Params>
<ext:Parameter Name="VAL" Value="Ext.encode(storeItem.data)" Mode="Raw">
</ext:Parameter>
</Params>
</Loader>
</Tips>
</ext:ColumnSeries>
</Series>

Originally Posted by Daniil

Hi @mjad4u,

Sorry, I don't understand the question. Please elaborate.

**Daniil** · Nov 29, 2012, 7:16 AM

The following works for me.

Tips

<Tips runat="server" Width="300" Height="100">
    <Renderer Handler="this.load({
                           params: {
                               data: Ext.encode(storeItem.data)
                           }                                    
                       });" />
    <Loader runat="server" Mode="Frame" Url="Test.aspx" AutoLoad="false" />
</Tips>

Child Page

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Form.Controls.Add(new Literal() { Text = this.Request["data"] });
    }
</script>
 
<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
    
    </form>
</body>
</html>

Thread: [CLOSED] storeItem (the currently highlighted item) for charttips

Thread Tools

Search Thread

Display

[CLOSED] storeItem (the currently highlighted item) for charttips

Ext.encode(storeItem.data)

Similar Threads

[CLOSED] DatePicker Day Highlighted in 2.x

DatePicker Day Highlighted

[CLOSED] DatePicker day highlighted

[CLOSED] Menu not close and remain highlighted after clicked

[CLOSED] selected row are partially highlighted on gridpanel

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] storeItem (the currently highlighted item) for charttips

[CLOSED] storeItem (the currently highlighted item) for charttips

Ext.encode(storeItem.data)

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us