Oct 11, 2013, 6:06 AM
Ok...Here's is the entire running test case
Model
also please let me know if you face any issues running the test case
Model
public class TestClass
{
public string ScenarioName { get; set; }
public string Country { get; set; }
public string Date { get; set; }
public double Value { get; set; }
public static List<TestClass> GetRecords()
{
List<TestClass> list = new List<TestClass>();
list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Aug-2013", Value = 1.1 });
list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Sept-2013", Value = 2.1 });
list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Oct-2013", Value = 3.1 });
list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Nov-2013", Value = 4.1 });
list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Aug-2013", Value = 1.7 });
list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Sept-2013", Value = 2.7 });
list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Oct-2013", Value = 3.7 });
list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Nov-2013", Value = 4.7 });
list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Aug-2013", Value = 1.1 });
list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Sept-2013", Value = 1.2 });
list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Oct-2013", Value = 1.3 });
list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Nov-2013", Value = 1.4 });
list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Aug-2013", Value = 1.7});
list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Sept-2013", Value = 1.8 });
list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Oct-2013", Value = 1.9 });
list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Nov-2013", Value = 2 });
return list;
}
}
//View@functions{
private Store CreateStore(List<string> listName)
{
Store store = new Store();
store.ID = "MultiPT";
var model = new Model();
model.Fields.Add(new ModelField("Name", ModelFieldType.String));
listName.ForEach(column =>
{
model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
Convert =
{
Handler = @"
if (typeof value === 'number') {
return value;
}
return value !== undefined && value !== null && value !== '' ?
parseFloat(String(value).replace(Ext.data.Types.stripRe, ''), 10) : false;"
}
});
});
store.Model.Add(model);
return store;
}//end of create store
private SeriesCollection CreateChartSeries1(DataTable dt, List<string> cdata)
{
SeriesCollection absSeries = new SeriesCollection();
absSeries = new SeriesCollection();
string toolTip = "";
foreach (var row in cdata)
{
toolTip = "this.setTitle(storeItem.get('Name') + ' ,'+ storeItem.get('" + row + "'));";
if (row.Contains("1"))
{
absSeries.Add(
Html.X().LineSeries()
.Axis(Position.Left)
.XField("Name")
.YField(row)
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = SpriteType.Diamond, Size = 5, Radius = 5, StrokeWidth = 0 })
.Tips(Html.X().ChartTip()
.TrackMouse(true)
.Width(80)
.Height(28)
.Renderer(r => r.Handler = toolTip)
)
);
}
else if (row.Contains("2"))
{
absSeries.Add(
Html.X().LineSeries()
.Axis(Position.Left)
.XField("Name")
.YField(row)
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = SpriteType.Cross, Size = 5, Radius = 5, StrokeWidth = 0 })
.Tips(Html.X().ChartTip()
.TrackMouse(true)
.Width(80)
.Height(28)
.Renderer(r => r.Handler = toolTip)
)
);
}
}
return absSeries;
}//end of create chart series
private void Initchart(Container pnlGrafico)
{
var result = TestClass.GetRecords();
var dt = GenerateData(result);
Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
{
ID = "LineChart",
Animate = true,
Height = 300,
Shadow = true
};
chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Right };
List<string> listName = GetColumnNames();
var store = CreateStore(listName);
store.DataSource = dt;
chtGrafico.Store.Add(store);
CategoryAxis categoryAxis = new CategoryAxis()
{
Fields = new string[] { "Name" }
};
string handlerTips = " var stringValue = EUR Ext.util.Format.number(value, '0.0000'); return stringValue;";
AxisLabel l = new AxisLabel();
l.Renderer.Handler = handlerTips;
NumericAxis numericAxis = new NumericAxis()
{
Fields = listName.ToArray(),
GridConfig = new AxisGrid()
{
Odd = new SpriteAttributes() { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 }
},
Title = "Price for Pack",
Minimum = 0.0
};
numericAxis.Position = Position.Left;
categoryAxis.Position = Position.Bottom;
chtGrafico.Axes.Add(numericAxis);
chtGrafico.Axes.Add(categoryAxis);
SeriesCollection series = new SeriesCollection();
series = CreateChartSeries1(dt, listName);
foreach (var ser in series)
{
chtGrafico.Series.Add(ser);
}
pnlGrafico.Items.Add(chtGrafico);
}
public List<string> GetColumnNames()
{
List<string> lst = new List<string>();
//Here we add ColumnNames to the list i.e. 'Albania1','Albania2','France1','France2'
lst.Add("Albania1");
lst.Add("Albania2");
lst.Add("France1");
lst.Add("France2");
return lst;
}//end of function for creating column names
private DataTable GenerateData(IList<TestClass> result)
{
List<string> countryList = new List<string>();
countryList.Add("Albania");
countryList.Add("France");
DataTable dt = new DataTable();
var countryColumn = new DataColumn("Name");
dt.Columns.Add(countryColumn);
int colCount = 1;
foreach (var rec in countryList)
{
int dtRowsCount = 0;
int dtRowsCount1 = 0;
var dataList = result.Where(s => s.ScenarioName == "A");
var CountryName = rec + "1"; //For Scenario 1
var countyCol = new DataColumn(CountryName);
dt.Columns.Add(CountryName);
if (colCount == 1)
{
foreach (var item in dataList)
{
var dataRow = dt.NewRow();
dataRow["Name"] = item.Date;
dataRow[CountryName] = item.Value;
dt.Rows.Add(dataRow);
}
}
else
{
foreach (var data in dataList)
{
dt.Rows[dtRowsCount][colCount] = data.Value;
dtRowsCount++;
}
}
colCount++;
//Second Scenario
var dataList1 = result.Where(s => s.ScenarioName == "B");
var CountryName1 = rec + "2"; //For Scenario 2
var countyCol1 = new DataColumn(CountryName);
dt.Columns.Add(CountryName1);
foreach (var data in dataList1)
{
dt.Rows[dtRowsCount1][colCount] = data.Value;
dtRowsCount1++;
}
colCount++;
}
return dt;
}
}
<div style="margin-top: -34%">
@(Html.X().Container()
.ID("container_MultiScenarioPriceTrend")
.Height(400)
.DefaultAnchor("100%")
.Layout(LayoutType.Fit)
.Control(item => this.Initchart(item))
)
</div>
Javascript Function:<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.indexOf("1") != -1 || series.yField.indexOf("2") != -1) {
trimmedField = series.yField.substring(0, series.yField.length - 1);
if (tempVar != trimmedField) {
tempVar = trimmedField;
var a = series;
a.yField = tempVar;
if (a.showInLegend) {
fields = [].concat(a.yField);
for (j = 0, lj = fields.length; j < lj; j++) {
item = me.createLegendItem(a, j);
items.push(item);
}
}
}
trimmedField = '';
}
}
me.alignItems();
}
});
</script>
So when you tun this code in the legend box we see "Albania" and "France" but no line series.If we remove the override script we see the line seriesalso please let me know if you face any issues running the test case
Last edited by PriceRightHTML5team; Oct 11, 2013 at 6:17 AM.