Hello,
I am wanting to plot simple sales quantity by week which I have done with the window forms chart controls.I am now wanting to do this with the web controls. My VS project is an ASP.NET MVC using Razor project.Y Axis is QuantityX Axis is WeekWould Like to display the event name and product name in the chart some how.
I have copied off some of the examples from the website but my data will not plot on the chart. I am providing a screen capture of current output and also the data and code. Would appreciate any help. Thanks!Existing Code including commented out code @(Html.Infragistics().DataChart<eMerchantSystem.Orders.Reports.Models.OrderWeeklySale>() .ID("uicEvents") .Width("100%") .AlignsGridLinesToPixels(true) .Height("400px") .Width("800px") .VerticalZoomable(true) .HorizontalZoomable(true) .Legend(legend => legend.ID("legend")) .OverviewPlusDetailPaneVisibility(Visibility.Collapsed) .Title("Weekley Sales") .Axes(axis => { axis.CategoryX("Week").Label(item => item.Week).LabelLocation(AxisLabelsLocation.OutsideBottom).Interval(1).LabelLocation(AxisLabelsLocation.OutsideBottom).MinorStrokeThickness(1); axis.NumericY("Quantity").MinimumValue(0).MaximumValue(500).LabelLocation(AxisLabelsLocation.OutsideLeft); //axis.NumericY("TotalLoans").MinimumValue(0).MaximumValue(100).StrokeThickness(10).LabelLocation(AxisLabelsLocation.OutsideRight); axis.CategoryX("xAxis").Title("Week").Label(item => item.Week); axis.NumericY("yAxis").Title("Quantity").Label(item => item.Quantity); }) //.Series(series => //{ // series.Column("Sum").Title("Sales").Brush("#87AB3D").ShowTooltip(true).TooltipTemplate("Sum") // .XAxis("Week").YAxis("Quantity").ValueMemberPath(item => item.Quantity) // .Legend(legend => legend.ID("legend")).ShowTooltip(true).TooltipTemplate("Total Sales by Week").ShowTooltip(true); // //series.Spline("total").Title("Total Sales") // //.XAxis("MonthName").YAxis("TotalLoans").Thickness(3).ValueMemberPath(item => item.Total) // //.Legend(legend => legend.ID("legend2")).ShowTooltip(true).TooltipTemplate("Number of Loans"); //}) .Series(series => { series.Line("series1") .ValueMemberPath(item => item.Quantity) .Title("Quantity") .XAxis("xAxis") .YAxis("yAxis") .ShowTooltip(true); //series.Line("series2") //.ValueMemberPath(item => item.ItemTotal) //.Title("Upper Limit") //.XAxis("xAxis") //.YAxis("yAxis") //.ShowTooltip(false); }) .DataBind() .Render() )
Data:
Current Rending of Chart
Do data points are showing.. Please advise. Thanks again!
Hello Richard,
I believe you will find the following documentation regarding how to add a legend to igDataChart very helpful:
- Adding igDataChart - in this topic is explained how to add a legend using jQuery and how to add it in MVC.
- Data Chart - Using ASP.NET MVC sample - here you can find a demonstration how to use this feature.
Please let me know if you have any further question and concerns.
Regards,Viktor KombovEntry Level Software DeveloperInfragistics, Inc.
Hello again. I am making good headway now but I am also having troubles adding a legend to the chart with out using jQuery. Can you provide me the necessary example or link to read more about this. It seems like all to documentation is in jQuery. Thanks again.
Thank you for posting in our community.
If I understand correctly, your requirement is to be able to display the values of more than one property of a record. Please correct me if I am wrong. Otherwise, what I would suggest you is to use the Tooltip template feature, which will enable you to display all the properties of a record, using the jQuery templating syntax:
<script id="tooltipTemplate" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Event: </span><span style="font-weight: bold">${item.EventName}</span><br /> <span>Product:</span> <span style="font-weight: bold">${item.ProductName}</span><br /> <span>Quantity</span>: <span style="font-weight: bold">${item.Quantity}</span> </div> </script> @(Html.Infragistics().DataChart(Model.Products.AsQueryable()) ... .Series(series => { series.Line("series1") .ValueMemberPath(item => item.Quantity) .Title("Quantity") .XAxis("xAxis") .YAxis("yAxis") .ShowTooltip(true) .TooltipTemplate("tooltipTemplate); ... .DataBind() .Render()
Attached you will find an example that I have prepared in order to demonstrate how to use this feature. Please test it on your side and let me know whether you find it helpful.
Additionally, I believe you will find the following documentation regarding how to use the Tooltip feature very helpful.
- Tooltips section of igDataChart overview topic
- The Series Tooltips example Please do not hesitate to contact me if you need any further assistance with this matter.
igDataChart.zip