Oct 18, 2013, 11:28 PM
Sorry, I couldn't reproduce. I tried the following View:
@using System.Data
@functions
{
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;
}
}
}
@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;
}
}
@Html.X().ResourceManager()
<script>
Ext.override(Ext.chart.LegendItem, {
onMouseDown: function () {
var me = this,
index = me.yFieldIndex;
if (!me.hiddenSeries) {
me.series.hideAll(index);
if (me._connectedSeries != undefined)
Ext.Array.forEach(me._connectedSeries, function (item) { item.hideAll(); });
me.label.setAttributes({
opacity: 0.5
}, true);
} else {
me.series.showAll(index);
if (me._connectedSeries != undefined)
Ext.Array.forEach(me._connectedSeries, function (item) { item.showAll(); });
me.label.setAttributes({
opacity: 1
}, true);
}
me.hiddenSeries = !me.hiddenSeries;
me.legend.chart.redraw();
}
});
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;
me.removeItems();
for (i = 0, li = seriesItems.length; i < li; i++) {
series = seriesItems[i];
if (series.yField[series.yField.length - 1] == '2')
series.showInLegend = false;
if (series.showInLegend) {
var connectedSeries = [];
if (series.yField[series.yField.length - 1] == '1') {
series.title = series.yField.substring(0, series.yField.length - 1);
connectedSeries = seriesItems.filter(function (item) {
if (item.yField == series.yField.substring(0, series.yField.length - 1) + '2') {
return item;
}
});
}
fields = [].concat(series.yField);
for (j = 0, lj = fields.length; j < lj; j++) {
item = me.createLegendItem(series, j);
items.push(item);
}
item._connectedSeries = connectedSeries;
}
}
me.alignItems();
}
});
</script>
@(Html.X().Container()
.ID("container_MultiScenarioPriceTrend")
.Height(400)
.DefaultAnchor("100%")
.Layout(LayoutType.Fit)
.Control(item => this.Initchart(item))
)