PDA

View Full Version : [CLOSED] Change legend of Bar Chart



PriceRightHTML5team
Oct 16, 2013, 6:09 AM
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


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;
}

}

//MVC VIEW CODE


@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('MeanEstimate dPrice'),'0.000'));";
}
else
{
handler = "this.setTitle(storeItem.get('CountryName')+',Price :" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MeanEstimate dPrice'),'0.000'));";
handler = @"
if (item.yField == 'MeanEstimatedPrice')
this.setTitle('Median,'+storeItem.get('CountryName ')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MeanEstimate dPrice'),'0.000'));" +
"else if (item.yField == 'MaxEstimatedPrice')" +
"this.setTitle('90th Percentile,'+storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MaxEstimated Price'),'0.000'));" +
"else this.setTitle('10th Percentile,'+storeItem.get('CountryName')+',Price:" + currDesc + " '+ Ext.util.Format.number(storeItem.get('MinEstimated Price'),'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>

//JavaScript function to override the legend


<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>

It does change the legend but there are no bar's generated as shown below

7048

But if we remove the Javscript override function we get the bars..

How can i change just the legend texts.. Thanks in advance

Daniil
Oct 16, 2013, 10:35 AM
Hi @PriceRightHTML5team,

How about just to set up Title for a BarSeries?

Title="I am used in Legend"

PriceRightHTML5team
Oct 16, 2013, 10:44 AM
Hi @PriceRightHTML5team,

How about just to set up Title for a BarSeries?

Title="I am used in Legend"

Sorry...Actually i am not getting the point on what your are trying to convey.

Can you please elaborate ..Thanks

Daniil
Oct 16, 2013, 11:00 AM
Sorry, for a ColumnSeries.

Html.X().ColumnSeries().Title("I am used in Legend")

Is it not an option for you?

PriceRightHTML5team
Oct 16, 2013, 11:20 AM
Sorry, for a ColumnSeries.

Html.X().ColumnSeries().Title("I am used in Legend")

Is it not an option for you?

That does change the legend but since it is a grouped bar chart.How do i assign separate title for different cols. like:

For MeanEstimatedPrice to Median
For MaxEstimatedPrice to 90 th Percentile
For MinEstimatedPrice to 10 th Percentile

Daniil
Oct 16, 2013, 11:26 AM
This way:

Html.X().ColumnSeries().Titles(new string[] { "title1", "title2", "title3" })

PriceRightHTML5team
Oct 16, 2013, 11:32 AM
This way:

Html.X().ColumnSeries().Titles(new string[] { "title1", "title2", "title3" })

Perfect!!!!!!!!!!!!!

Thanks a ton