Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
135
DataChart not Displaying Data Points
posted

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 Quantity
X Axis is Week
Would 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:

EventName ProductName Week Quantity Total
Event 1 General Admission Ticket 46 1 31.2
Event 1 General Admission Ticket 47 165 5148
Event 1 General Admission Ticket 48 36 1123.2

Current Rending of Chart

Do data points are showing.. Please advise. Thanks again!

Parents
  • 640
    Verified Answer
    Offline posted

    Hello Richard,

    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.

    Regards,
    Viktor Kombov
    Entry Level Software Developer
    Infragistics, Inc.

    igDataChart.zip

Reply Children