Sep 11, 2017, 3:57 PM
[FIXED] [#1543] [4.5.0] Problem in chart with legend text is long
Hi,
see my example, if the Titles of LineSeries is long and the width of chart is short the javascript goes in loop.
Thank you
Jimmy
see my example, if the Titles of LineSeries is long and the width of chart is short the javascript goes in loop.
Thank you
Jimmy
<%@ Page Language="C#" %>
<script runat="server">
private List<object> GenerateData()
{
List<object> data = new List<object>();
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
DateTime date = DateTime.Today;
for (int i = 0; i < 15; i++)
{
data.Add(new
{
Date = date.AddDays(i),
Data1 = Math.Round(random.NextDouble() * 10),
Data2 = Math.Round(random.NextDouble() * 100)
});
}
return data;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Chart1.GetStore().DataSource = this.GenerateData();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Title="Line Chart"
Width="200"
Height="400"
Layout="FitLayout">
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server"
Animate="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:TimeAxis
Title="Date"
Fields="Date"
Position="Bottom"
DateFormat="MMM dd"
FromDate="<%# DateTime.Today %>"
ToDate="<%# DateTime.Today.AddDays(14) %>"
AutoDataBind="true" />
<ext:NumericAxis
Title="Data (blue)"
Fields="Data1"
Position="Left"
Maximum="10">
<TitleConfig FillStyle="#115fa6" />
<Label FillStyle="#115fa6" />
</ext:NumericAxis>
<ext:NumericAxis
Title="Data (green)"
Fields="Data2"
Position="Right"
Maximum="100">
<TitleConfig FillStyle="#94ae0a" />
<Label FillStyle="#94ae0a" />
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries
Titles="Blue Line lorem ipsum lorem ipsum"
XField="Date"
YField="Data1"
Smooth="3">
<HighlightConfig>
<ext:CircleSprite Radius="7" />
</HighlightConfig>
<Marker>
<ext:CircleSprite Radius="4" LineWidth="0" />
</Marker>
</ext:LineSeries>
<ext:LineSeries
Titles="Green Line"
XField="Date"
YField="Data2"
Smooth="3">
<HighlightConfig>
<ext:CircleSprite Radius="7" />
</HighlightConfig>
<Marker>
<ext:CircleSprite Radius="4" LineWidth="0" />
</Marker>
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker runat="server">
<XLabelRenderer Handler="return Ext.util.Format.date(value, 'M d');" />
</ext:VerticalMarker>
</Plugins>
<LegendConfig runat="server" Dock="Bottom" />
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by fabricio.murta; Sep 13, 2017 at 12:39 AM.
