PDA

View Full Version : [CLOSED] click CategoryAxis bottom label



gs_user
Feb 06, 2013, 4:20 AM
Is possible to get 「Name and Data1 」,when i click buttom label?

5559



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Charts - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.x-panel {
margin-bottom : 20px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Charts Example</h1>

<p>Displaying multiple charts and mixed charts with mouse over and click interaction.</p>

<ext:Panel ID="Panel3"
runat="server"
Width="600"
Height="300"
Title="Ext.Net Visits Trends, 2007/2008 (Simple styling)"
Layout="FitLayout">
<Items>
<ext:Chart ID="Chart3" runat="server" InsetPadding="30">
<Store>
<ext:Store ID="Store3"
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Gradients>
<ext:Gradient GradientID="bar-gradient" Angle="90">
<Stops>
<ext:GradientStop Offset="0" Color="#99BBE8" />
<ext:GradientStop Offset="70" Color="#77AECE" />
<ext:GradientStop Offset="100" Color="#77AECE" />
</Stops>
</ext:Gradient>
</Gradients>

<Axes>
<ext:NumericAxis Minimum="0" Maximum="100" Fields="Data1" Grid="true">
<Label Font="10px Arial">
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</ext:NumericAxis>

<ext:CategoryAxis Position="Bottom" Fields="Name" Grid="true">
<Label Font="11px Arial">
<Renderer Handler="return value.substr(0, 3);" />
</Label>
</ext:CategoryAxis>
</Axes>

<Series>
<ext:ColumnSeries Axis="Left" XField="Name" YField="Data1">
<Style Fill="url(#bar-gradient)" StrokeWidth="3" />
</ext:ColumnSeries>

<ext:LineSeries Axis="Left" XField="Name" YField="Data2">
<Listeners>
<ItemMouseUp Handler="Ext.net.Notification.show({title:'Item Selected', html:item.value[1] + ' visits on ' + Ext.Date.monthNames[item.value[0]]});" />
</Listeners>

<Tips ID="Tips3" runat="server" TrackMouse="true" Width="110" Height="25">
<Renderer Handler="this.setTitle(storeItem.get('Data2') + ' visits in ' + storeItem.get('Name').substr(0, 3));"></Renderer>
</Tips>

<Style Fill="#18428E" Stroke="#18428E" StrokeWidth="3" />

<MarkerConfig
Type="Circle"
Size="4"
Radius="4"
StrokeWidth="0"
Fill="#18428E"
Stroke="#18428E"
/>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

Daniil
Feb 06, 2013, 12:25 PM
Hi @gs_user,

I don't think it is possible. Labels have no direct relationship with series.

But I can suggest an alternative. Please try to set up this for the Chart.

<Plugins>
<ext:VerticalMarker />
</Plugins>

It will allow a user to see the values associated to the labels.