I am attempting to create stacked columns in an MVC4 project wherein I would like to have multiple stacked series per given day along the xAxis. The YAxis is a numerical value. The goal is to show the combined resource usage of an individual for a given point in time. I've created the following model to represent the data:
public class PercentUtilizedModel { public DateTime Day { get; set; } public string TeamMember { get; set; } public string PercentUtilized { get; set; } public string ProjectName { get; set; }}
And a view model that will return the data to the Infragistics DataChart as a list:public class PMViewModel { public IEnumerable<PercentUtilizedModel> PercentUtilized { get; set; } public IEnumerable<ReleaseModel> Releases { get; set; } }
To test the ability to generate the stacked chart, I'm using the following mock data:List<PercentUtilizedModel> Data = new List<PercentUtilizedModel> { new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Sylvester", PercentUtilized = "25", ProjectName = "Project A" }, new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Sylvester", PercentUtilized = "50", ProjectName = "Project B" }, new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Sylvester", PercentUtilized = "25", ProjectName = "Project C" }, new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Tweety", PercentUtilized = "50", ProjectName = "Project A" }, new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Tweety", PercentUtilized = "50", ProjectName = "Project B" } };
So in this example, I would want the chart to display 3 segments of a stack for Sylvester over a point on the xAxis representing today's date, followed by a 2 segment stacked series for Tweety. Can this viewmodel be charted like I am describing as is, or do I need to manipulate the data before attempting to create the chart? I have not been able to think of a way to build the fragments for a dynamic number of potential PercentUtilized values falling on the same Day. My starting point is: @(Html.Infragistics().DataChart(Model.PercentUtilized.AsQueryable()) .ID("chart1") .Axes(axes => { axes.CategoryX("catX").Label(x => x.Day).LabelAngle(45).LabelExtent(100); axes.NumericY("numY").MaximumValue(1500).MinimumValue(0).Interval(100); }) .Series(series =>{ series.StackedColumn("parent") .XAxis("catX") .YAxis("numY") .Series((build) =>{ build.Fragment("TeamMember").Title("PercentUtilized").ValueMemberPath("PercentUtilized"); }); }) .DataBind() .Render() )
Hello ChifDagrif ,
Let me know if you encounter any issues or have any questions. I’d be glad to help.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Understood. I think I am going to abandon use of the custom HTML helpers in favor of the Jquery definitions due to the additional flexibility.
Hello Chris ,
Do you mean using a custom HTML helper?
In general the MVC wrapper generates html and java script so you could technically manually generate the script runtime and create multiple series in the jquery definition of the chart via an Html helper.
You could also define the chart entirely client side and based on the data source create the series runtime on the client. For example you could loop trough the data source and based on the values there build an array with the series definition on the client side and set that for the series property of the chart.
If you’re interested in the client side API of the chart you can refer to its documentation here:
http://help.infragistics.com/jQuery/2013.1/ui.igDataChart#options
The properties of the clients side API are similar to the ones the MVC wrapper uses.
Let me know if you have any questions.
Thanks, Maya. In my case the total count of percent utilized values will vary on a daily basis. I should be able to dynamically create the code that builds the number of fragments by creating the jQuery version of the control instantiation code server side in a loop. Am I wrong to assume that it would not be possible to dynamically generate an HTML Helper version of the control?
Thank you for posting in our forum.
To add a new stack segment you need to add a new fragment to the series which will need to be bound to a field from the same data record.
So for example if you want to have a stack with 3 values for Sylvester and a stack with 2 values for Tweety you would need to have 3 fragments in the Series each bound to a separate value from the related data record. Due to the current format of the data :
new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Tweety", PercentUtilized = "50", ProjectName = "Project A" }
You can have only 1 stack since there’s only one value per item.
If you want the chart to display a stack of 3 items you would need to have 3 values for example:
new PercentUtilizedModel(){ Day=DateTime.Today, TeamMember = "Sylvester", ProjectName = "Project A", PercentUtilizedValue = 25, PercentUtilizedValue1=50, PercentUtilizedValue2=75 }
And define 2 more Fragments:
.Series((build) =>
{
build.Fragment("PercentUtilized").Title("PercentUtilized").ValueMemberPath("PercentUtilizedValue");
build.Fragment("PercentUtilizedValue1").Title("PercentUtilizedValue1").ValueMemberPath("PercentUtilizedValue1");
build.Fragment("PercentUtilizedValue2").Title("PercentUtilizedValue2").ValueMemberPath("PercentUtilizedValue2");
});
In that case the example item with the 3 values would create 3 stacked items for the team member Sylvester on the current date.
So in this case you would need to group your current model’s items by the team member so the record with the team member would contain all the values you would like to display as stacked over the group label.
Let me know if you have any questions or concerns.