Dec 17, 2012, 7:37 AM
[CLOSED] Legend doesn't appear in a pie chart created programmatically
Hi,
I created a pie chart but the legend doesn't appear this is the code below :
I created a pie chart but the legend doesn't appear this is the code below :
public class ChartData
{
public string Name { get; set; }
public double Data { get; set; }
}
public ActionResult Graph()
{
return View();
}
public StoreResult GenerateGraphData()
{
StoreResult store = new StoreResult();
List<ChartData> charts = new List<ChartData>();
Random random = new Random();
for (int i = 1; i <= 6; i++)
{
ChartData chart = new ChartData();
chart.Name = SetName()[i % 6];
chart.Data = i;
charts.Add(chart);
}
store.Data = charts;
return store;
}
private static String[] SetName()
{
String[] tab = new String[10];
tab[0] = "name 1";
tab[1] = "name 2";
tab[2] = "name 3";
tab[3] = "name 4";
tab[4] = "name 5";
tab[5] = "name 6";
return tab;
}
public Chart GeneratePieChart()
{
Chart chart = new Chart();
chart.ID = "Chart1";
chart.Animate = true;
chart.Shadow = true;
chart.InsetPadding = 60;
chart.Html = "</br><center><b>Pie Chart Example</b></center>";
chart.Theme = "Base:gradients";
chart.Legend = true;
ChartLegend cl = new ChartLegend();
cl.Position = LegendPosition.Top;
cl.Visible = true;
chart.LegendConfig = cl;
Store store = new Store();
store.ID = "Store1";
store.AutoDataBind = true;
Model model = new Model();
ModelField modelField = new ModelField();
modelField.Name = "Name";
ModelField modelField0 = new ModelField();
modelField0.Name = "Data";
model.Fields.Add(modelField);
model.Fields.Add(modelField0);
store.Model.Add(model);
AjaxProxy ajaxProxy = new AjaxProxy();
ajaxProxy.Url = "/Home/GenerateGraphData";
JsonReader jsonReader = new JsonReader();
jsonReader.Root = "data";
ajaxProxy.Reader.Add(jsonReader);
store.Proxy.Add(ajaxProxy);
PieSeries pieSeries = new PieSeries();
pieSeries.AngleField = "Data";
pieSeries.ShowInLegend = true;
pieSeries.Highlight = true;
pieSeries.HighlightSegmentMargin = 20;
ChartTip tip = new ChartTip();
tip.Width = 140;
tip.Height = 28;
tip.TrackMouse = true;
tip.Renderer.Fn = "tipRenderer";
pieSeries.Tips = tip;
SeriesLabel label = new SeriesLabel();
String[] tab = { "Data", "Name" };
label.Field = tab;
label.Display = SeriesLabelDisplay.Rotate;
label.Contrast = true;
label.Font = "18px Arial";
pieSeries.Label = label;
chart.Series.Add(pieSeries);
chart.Store.Add(store);
return chart;
}
public ContentResult LoadChart(String containerID)
{
ContentResult contentResult = new ContentResult();
contentResult.Content = string.Format("<script>{0}</script>", GeneratePieChart().ToScript(RenderMode.AddTo, containerID));
return contentResult;
}<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Graph</title>
<script type="text/javascript">
function tipRenderer(storeItem, item) {
var total = 0;
App.Chart1.getStore().each(function (rec) {
total += rec.get('Data');
});
this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data') / total * 100) + '%');
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<div>
<ext:Panel ID="_pnl" runat="server" Title="Graph" Layout="FitLayout" Height="550">
<Loader ID="Loader1" runat="server" Url="/ViewEngine/LoadChart" DisableCaching="true"
Mode="Html" Scripts="true">
<Params>
<ext:Parameter Name="containerID" Value="#{_pnl}" Mode="Value" />
</Params>
</Loader>
</ext:Panel>
</div>
</body>
</html>
Last edited by Daniil; Dec 19, 2012 at 2:31 PM.
Reason: [CLOSED]
