PDA

View Full Version : [CLOSED] Missing Months on Line Chart



PriceRightHTML5team
May 07, 2014, 7:12 AM
Hello Ext Team,

Below is my code:

//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 string Name { get; set; }

public static ExpandoObject[] GetRecords()
{
List<GrpColumns> list = new List<GrpColumns>();

list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Aug-2013", Value = null });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Sept-2013", Value = null });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "1", Country = "Albania", Name = "Oct-2013", Value = 5.5 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Nov-2013", Value = 1.1 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Aug-2013", Value = 5.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Sept-2013", Value = 6.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Oct-2013", Value = 7.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Nov-2013", Value = 7.5 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Aug-2013", Value = 8.1 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Sept-2013", Value = 6.2 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Oct-2013", Value = 5.3 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Nov-2013", Value = 4.4 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Aug-2013", Value = 9.7 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Sept-2013", Value = 2.8 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Oct-2013", Value = 5.9 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "1", Country = "India", Name = "Nov-2013", Value = 2.6 });

var data = list.GroupBy(d => d.Name);
var dataList = new List<ExpandoObject>();
foreach (var item in data)
{
var exp = new ExpandoObject();
(exp as IDictionary<String, Object>).Add("Name", item.Key);
foreach (var val in item)
{
(exp as IDictionary<String, Object>).Add(val.Country, val.Value);
}
(exp as IDictionary<String, Object>).Add("Data", item);
dataList.Add(exp);
}

return dataList.ToArray();
}

}

//Controller

public ActionResult Index()
{
//var chartDataList = getMockChartData();
return View();
}

//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.st ripRe, ''), 10) : false;"
}
});
});
store.Model.Add(model);
store.DataBound += store_DataBound;

return store;
}

void store_DataBound(object sender, EventArgs e)
{
(sender as Store).Reader.Clear();
}

private SeriesCollection CreateChartSeries1(List<string> cdata)
{
SeriesCollection absSeries = new SeriesCollection();
absSeries = new SeriesCollection();
string toolTip = "";
foreach (var row in cdata)
{
var spriteType = SpriteType.Diamond;
if(row=="Albania" || row=="France")
spriteType = SpriteType.Cross;
absSeries.Add(
Html.X().LineSeries()
.Axis(Position.Left)
.XField("Name")
.YField(row)
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = spriteType, Size = 5, Radius = 5, StrokeWidth = 0 })


);


}

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 = 610,
Shadow = true
};

chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Bottom };
List<string> listName = GetColumnNames();
var store = CreateStore(listName);

//store.DataSource = dt;
store.DataSource = result;
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 = 1.0,
Maximum = 10.0015665
};

numericAxis.Position = Position.Left;
categoryAxis.Position = Position.Bottom;

chtGrafico.Axes.Add(numericAxis);
chtGrafico.Axes.Add(categoryAxis);

SeriesCollection series = new SeriesCollection();
series = CreateChartSeries1(listName);

foreach (var ser in series)
{
chtGrafico.Series.Add(ser);
}

var npvLabel = new Sprite { Type = SpriteType.Text, Text = "NPV = 2.2", X = 82, Y = 640, ZIndex = 7001, Font = "normal 12px Arial", Fill = "#000", SpriteID = "lblNetPresetValue" };
chtGrafico.Items.Add(npvLabel);

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("Albania");
lst.Add("Mexico");
lst.Add("France");
lst.Add("India");

return lst;

}//end of function for creating column names

private DataTable GenerateData(IList<GrpColumns> result)
{
List<string> countryList = new List<string>();
countryList.Add("Albania");
countryList.Add("Mexico");
countryList.Add("France");
countryList.Add("India");

DataTable dt = new DataTable();
var countryColumn = new DataColumn("Name");
dt.Columns.Add(countryColumn);
int colCount = 1;
foreach (var rec in countryList)
{
int dtRowsCount = 0;
var dataList = result.Where(c => c.Country == rec);


var CountryName = rec; //For Scenario 1
var countyCol = new DataColumn(CountryName, typeof(GrpColumns));
dt.Columns.Add(CountryName);
if (colCount == 1)
{
foreach (var item in dataList)
{
var dataRow = dt.NewRow();
dataRow["Name"] = item.Name;
dataRow[CountryName] = new GrpColumns() { Name = item.Name, Country = CountryName, IsScheduled = item.IsScheduled, Value = item.Value };
dt.Rows.Add(dataRow);
}
}
else
{

foreach (var data in dataList)
{
dt.Rows[dtRowsCount][colCount] = new GrpColumns() { Name = data.Name, Country = CountryName, IsScheduled = data.IsScheduled, Value = data.Value };
dtRowsCount++;
}
}
colCount++;

}

return dt;
}

}
<div">



@( Html.X().Container().ID("RevenueTrendContainer").Padding(5).Border(true)
.Items(
Html.X().TabPanel()
.ID("RevenueGraphTab")
.ActiveTabIndex(0)
.MinHeight(655)
.Plain(true)
.Margin(0).StyleSpec("padding-bottom:7px;")
.Items
(
Html.X().Panel()
.Margin(0).Padding(5)
.Title("Cumulative")
.Height(700)
.ID("CumulativePanel")
.Items(
Html.X().Container()
.ID("container_MultiScenarioPriceTrend")
.Height(550)
.DefaultAnchor("100%").Layout(LayoutType.Fit)
.Control(item => this.Initchart(item))

)
)//Tab Panel

)
)
</div>

The issue is the graph is not getting plotted for months "Aug-2013" and "Sept-2013". Attahced is the screenshot
http://forums.ext.net/attachment.php?attachmentid=10561&stc=1

Can you please let me know what is wrong.

Thanks

Daniil
May 07, 2014, 1:51 PM
Hi @PriceRightHTML5team,

Hard to say what is going wrong. I need to run the code, but I cannot because of compile errors.

PriceRightHTML5team
May 08, 2014, 4:09 AM
Hi @PriceRightHTML5team,

Hard to say what is going wrong. I need to run the code, but I cannot because of compile errors.

Can u tell me what are the compile errors. Will send u the updated sample code

geoffrey.mcgill
May 08, 2014, 4:33 AM
Can u tell me what are the compile errors. Will send u the updated sample code

Try running your code in a new project. That should help you narrow down where the compiler errors are being thrown.

PriceRightHTML5team
May 08, 2014, 4:50 AM
Try running your code in a new project. That should help you narrow down where the compiler errors are being thrown.

I guess i was missing one class. Please find the updated model:

//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 string Name { get; set; }

public static ExpandoObject[] GetRecords()
{
List<GrpColumns> list = new List<GrpColumns>();

list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Aug-2013", Value = null });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Sept-2013", Value = null });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "1", Country = "Albania", Name = "Oct-2013", Value = 5.5 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Nov-2013", Value = 1.1 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Aug-2013", Value = 5.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Sept-2013", Value = 6.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Oct-2013", Value = 7.7 });
list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Nov-2013", Value = 7.5 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Aug-2013", Value = 8.1 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Sept-2013", Value = 6.2 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Oct-2013", Value = 5.3 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Nov-2013", Value = 4.4 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Aug-2013", Value = 9.7 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Sept-2013", Value = 2.8 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Oct-2013", Value = 5.9 });
list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "1", Country = "India", Name = "Nov-2013", Value = 2.6 });

var data = list.GroupBy(d => d.Name);
var dataList = new List<ExpandoObject>();
foreach (var item in data)
{
var exp = new ExpandoObject();
(exp as IDictionary<String, Object>).Add("Name", item.Key);
foreach (var val in item)
{
(exp as IDictionary<String, Object>).Add(val.Country, val.Value);
}
(exp as IDictionary<String, Object>).Add("Data", item);
dataList.Add(exp);
}

return dataList.ToArray();
}

}
public class GrpColumns
{
public string Country { get; set; }
public string IsScheduled { get; set; }
public string Name { get; set; }
public double? Value { get; set; }
public string IsProvisional { get; set; }
}

if ExpandoObject is throwing compile error .Please add "using System.Dynamic;" namespace to the project.

Let me know if its still not running

Daniil
May 08, 2014, 5:29 AM
Now I can run it, thanks.

Some Chart points is out of scope because of

Minimum = 1.0,

If you set it to

Minimum = 0,
it should render all the points.

PriceRightHTML5team
May 08, 2014, 6:45 AM
Thanks for the Reply.

But we need minimum and maximum on Numeric Axis,since if we don't provide and we have values range from say: 1.8 and 2.8 then the chart gets displayed as shown below (Note: this is a different chart):

10581

This chart is not more readable.

I understand since some of the datapoints has null value and hence due to minimum attribute its not getting displayed. Is there any work around. Since we need to show the months that has null values as well.

Thanks

Daniil
May 08, 2014, 6:55 AM
Please try this setting for the NumericAxis.

Constrain = false