Mar 02, 2015, 4:23 PM
[CLOSED] Cartesian Chart's Highlight
On the following sample, bar is highlighted when it's hovered
Thanks in advance.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this._pnl.ViewModel = new
{
stores = new
{
priceData = new
{
fields = new string[] { "month", "price" },
data = new object[]
{
new { month = "Jan", price = 28 },
new { month = "Feb", price = 25 },
new { month = "Mar", price = 21 },
new { month = "Apr", price = 18 },
new { month = "May", price = 18 },
new { month = "Jun", price = 17 },
new { month = "Jul", price = 16 },
new { month = "Aug", price = 16 },
new { month = "Sep", price = 16 },
new { month = "Oct", price = 16 },
new { month = "Nov", price = 15 },
new { month = "Dec", price = 15 }
}
}
}
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel ID="_pnl" runat="server" Height="400" Title="Bar Chart" Layout="FitLayout">
<Items>
<ext:CartesianChart runat="server" Animation="false" BindString="{priceData}">
<AnimationConfig Duration="500" Easing="EaseOut" />
<Axes>
<ext:NumericAxis Position="Left" Grid="true" Fields="month" />
<ext:CategoryAxis Position="Bottom" />
</Axes>
<Series>
<ext:BarSeries XField="month" YField="price">
<StyleSpec>
<ext:SeriesSprite Opacity="0.8" MinGapWidth="10" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="rgba(249, 204, 157, 1.0)" StrokeStyle="black" LineWidth="2" />
</HighlightConfig>
<Tooltip runat="server" TrackMouse="true" StyleSpec="background: #fff">
<Renderer Handler="this.setHtml(storeItem.get('price'));" />
</Tooltip>
<Label Field="price" Display="InsideEnd" />
</ext:BarSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html><ext:CartesianChart runat="server" Animation="false" BindString="{priceData}">
<AnimationConfig Duration="500" Easing="EaseOut" />
<Axes>
<ext:NumericAxis Position="Left" Grid="true" Fields="month" />
<ext:CategoryAxis Position="Bottom" />
</Axes>
<Series>
<ext:BarSeries XField="month" YField="price">
<StyleSpec>
<ext:SeriesSprite Opacity="0.8" MinGapWidth="10" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="rgba(249, 204, 157, 1.0)" StrokeStyle="black" LineWidth="2" />
</HighlightConfig>
<Label Field="price" Display="InsideEnd" />
</ext:BarSeries>
</Series>
</ext:CartesianChart>Thanks in advance.
Last edited by Daniil; Mar 03, 2015 at 11:08 AM.
Reason: [CLOSED]
