Oct 16, 2013, 6:09 AM
[CLOSED] Change legend of Bar Chart
Hi Ext Team,
I need to change the legend text of the bar chart to:
For MeanEstimatedPrice to Median
For MaxEstimatedPrice to 90 th Percentile
For MinEstimatedPrice to 10 th Percentile
Below is the test case:
//Model
But if we remove the Javscript override function we get the bars..
How can i change just the legend texts.. Thanks in advance
I need to change the legend text of the bar chart to:
For MeanEstimatedPrice to Median
For MaxEstimatedPrice to 90 th Percentile
For MinEstimatedPrice to 10 th Percentile
Below is the test case:
//Model
public class TestClass
{
public double? MeanEstimatedPrice { get; set; }
public double? MaxEstimatedPrice { get; set; }
public double? MinEstimatedPrice { get; set; }
public string CountryName { get; set; }
public static List<TestClass> GetRecords()
{
List<TestClass> list = new List<TestClass>();
list.Add(new TestClass() { MeanEstimatedPrice = 11, MaxEstimatedPrice = 12, MinEstimatedPrice = 10, CountryName = "Albania" });
list.Add(new TestClass() { MeanEstimatedPrice = 11, MaxEstimatedPrice = 12, MinEstimatedPrice = 10, CountryName = "Lativia" });
list.Add(new TestClass() { MeanEstimatedPrice = 11, MaxEstimatedPrice = 12, MinEstimatedPrice = 10, CountryName = "France" });
return list;
}
}@functions
{
string currDesc = string.Empty;
bool isAllCombined = false;
string CategoryTitle = string.Empty;
bool IsLocalCurrency = false;
string NumericAxisTitle = string.Empty;
double minValue;
private Store CreateStore(bool isMonteCarlo)
{
Store store = new Store();
store.ID = "StoreGSnapShot1";
var model = new Model();
if (isMonteCarlo)
{
model.Fields.Add(new ModelField("CountryName", ModelFieldType.String));
model.Fields.Add(new ModelField("MeanEstimatedPrice", ModelFieldType.String));
model.Fields.Add(new ModelField("MaxEstimatedPrice", ModelFieldType.String));
model.Fields.Add(new ModelField("MinEstimatedPrice", ModelFieldType.String));
}
store.Model.Add(model);
return store;
}
private void Initchart(Container pnlGrafico)
{
var result = TestClass.GetRecords();
Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
{
ID = "SnapShotChart",
Animate = true,
Height = 300,
Shadow = true,
};
var isMonteCarlo = true;
CategoryTitle = "Countries";
chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Bottom };
var store = CreateStore(isMonteCarlo);
store.DataSource = result;
chtGrafico.Store.Add(store);
minValue = result.Min(x => x.MeanEstimatedPrice.Value);
minValue = Math.Round(minValue, 2);
var maxValue = result.Max(x => x.MeanEstimatedPrice.Value);
//if (minValue > 0.1)
minValue = 0;
string handlerTips = "";
handlerTips = " var stringValue = '" + currDesc + " '+ Ext.util.Format.number(value, '0.0000'); return stringValue;";
AxisLabel l = new AxisLabel();
l.Renderer.Handler = handlerTips;
List<string> listName = new List<string>();
if (isMonteCarlo)
{
listName.Add("MeanEstimatedPrice");
listName.Add("MaxEstimatedPrice");
listName.Add("MinEstimatedPrice");
NumericAxis numericAxis = new NumericAxis()
{
Fields = listName.ToArray(),
Grid = true,
Title = NumericAxisTitle,
Minimum = minValue
};
if (maxValue < 0.1)
numericAxis.Maximum = maxValue;
chtGrafico.Axes.Add(numericAxis);
}
CategoryAxis categoryAxis = new CategoryAxis()
{
Fields = new string[] { "CountryName" },
Title = CategoryTitle,
Position = Position.Bottom
};
chtGrafico.Axes.Add(categoryAxis);
var series = CreateChartSeries1(result, isMonteCarlo, listName, isAllCombined);
foreach (var ser in series)
{
chtGrafico.Series.Add(ser);
}
//Add Chart Title Label
Label lblChartTitle = new Label()
{
Text = Model.ChartTitle,
StyleSpec = "font: bold 18px Arial;"
};
pnlGrafico.Items.Add(lblChartTitle);
//Add Chart
pnlGrafico.Items.Add(chtGrafico);
}
private SeriesCollection CreateChartSeries1(List<TestClass> list, bool isMonteCarlo, List<String> llist, bool isAllCombined)
{
SeriesCollection absSeries = new SeriesCollection();
absSeries = new SeriesCollection();
string handler = string.Empty;
if (isMonteCarlo)
{
if (isAllCombined)
{
handler = "this.setTitle('All Combined,Price:" + currDesc + "' + Ext.util.Format.number(storeItem.get('MeanEstimatedPrice'),'0.000'));";
}
else
{
handler = "this.setTitle(storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MeanEstimatedPrice'),'0.000'));";
handler = @"
if (item.yField == 'MeanEstimatedPrice')
this.setTitle('Median,'+storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MeanEstimatedPrice'),'0.000'));" +
"else if (item.yField == 'MaxEstimatedPrice')" +
"this.setTitle('90th Percentile,'+storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MaxEstimatedPrice'),'0.000'));" +
"else this.setTitle('10th Percentile,'+storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MinEstimatedPrice'),'0.000')); ";
}
absSeries.Add(
Html.X().ColumnSeries()
.Axis(Position.Left)
.XField("CountryName")
.YField(llist.ToArray())
.Highlight(true)
.Tips(Html.X().ChartTip()
.TrackMouse(true)
.Width(280)
.Height(28)
.Renderer(r => r.Handler = handler)
)
.Label(new SeriesLabel()
{
Display = SeriesLabelDisplay.None,
Field = llist.ToArray(), //new[] { "MeanEstimatedPrice" },
Orientation = Orientation.Horizontal,
Color = "#333E",
TextAnchor = "middle"
})
);
}
return absSeries;
}
}
<div>
@(Html.X().Container()
.ID("container_SnapShot")
.Height(550)
.DefaultAnchor("100%")
.Layout(LayoutType.Fit)
.Control(item => this.Initchart(item))
)
@( Html.X().Container().ID("NodataContainer").Items())
@* //X.Label(Model.ChartTitle).ID("lblSnapShotNoData").StyleSpec("font: bold 18px Arial;").Hidden(true).Text("No data found")))*@
</div><script type="text/javascript">
Ext.override(Ext.chart.Legend, {
createItems: function () {
var me = this,
seriesItems = me.chart.series.items,
items = me.items,
fields, i, li, j, lj, series, item;
var tempVar = '';;
var trimmedField = '';
me.removeItems();
for (i = 0, li = seriesItems.length; i < li; i++) {
series = seriesItems[i];
if (series.yField.length > 1 && series.yField[0] == 'MeanEstimatedPrice') {
if (series.yField[0] == 'MeanEstimatedPrice') {
series.yField[0] = 'Median';
}
if (series.yField[1] == 'MaxEstimatedPrice') {
series.yField[0] = '90th Percentile';
}
if (series.yField[1] == 'MinEstimatedPrice') {
series.yField[0] = '10th Percentile';
}
}
if (series.showInLegend) {
fields = [].concat(series.yField);
for (j = 0, lj = fields.length; j < lj; j++) {
item = me.createLegendItem(series, j);
items.push(item);
}
}
}
me.alignItems();
}
});
</script>But if we remove the Javscript override function we get the bars..
How can i change just the legend texts.. Thanks in advance
Last edited by Daniil; Oct 16, 2013 at 12:25 PM.
Reason: [CLOSED]
Originally Posted by Daniil
