PDA

View Full Version : [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_Ge t_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_HIGHLIGH TED_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
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.



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/source/Tip3.html#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>



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>