Forums Ignite UI for ASP.NET MVC
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
Close
John Station
40
Format Label with Date Values in igDataChart for ASP.NET MCV Razor
posted

I have spent several hours (several!) trying to find a answer to what should be a very very simple thing to accomplish.
I am trying out the igDataChart by displaying some sales numbers by the first date of a week. I cannot find how to display the x axis date value is this format MM/dd/yy. The charte is displaying the date as long hand as possible. I am extremely frustrated  that there is no help for such a simple common thing. Please end my frustration and provide me with a resolution to this simple matter.. The following is part of my my cart code in ASP.NET MCV Razor. The cart displays the correct data but the x axis labels are a joke

             @(Html.Infragistics().DataChart(Model.OrderWeeklySales.AsQueryable())
                        .ID("chart")
                        .AlignsGridLinesToPixels(true)
                        .VerticalZoomable(true)
                        .HorizontalZoomable(true)
                        .OverviewPlusDetailPaneVisibility(Visibility.Collapsed)
                        .Legend(legend => legend.ID("dataLegend"))
                        .Height("400px")
                        .Width("100%")
                        //.Width("900px")
                        .Title("Weekley Sales by Product")
                        .Subtitle("")

                        .Axes(axis =>
                        {
                            axis
                            .CategoryX("xAxis")
                            //.Label(item => item.Week)
                            //.Label(item => Convert.ToDateTime(String.Format("{0:MM/dd/yy}", item.FirstDateOfWeek)).Date.ToString())
                            //.Label(item => String.Format(item.FirstDateOfWeek.ToString(), "MM/dd/yy"))
                            .Label(item => item.FirstDateOfWeek)
                            //.Label(item => String.Format("{0:MM/dd}", item.FirstDateOfWeek))
                            //.FormatLabel("MM/dd/yy")
                            //.FormatLabel(String.Format("{0:MM/dd/yy}", Model.FirstDateOfWeek))
                            .Title("Week Of")
                            //.LabelAngle(45)
                            //.TitleAngle(90)
                            .LabelLocation(AxisLabelsLocation.OutsideBottom)
                            .Interval(1).LabelLocation(AxisLabelsLocation.OutsideBottom)
                            .StrokeThickness(2)
                            .MajorStroke("#f4f4f4")
                            .MinorStrokeThickness(1);


                            axis
                            .NumericY("yAxis")
                            //.MinimumValue(0)
                            //.MaximumValue(100)
                            .Title("Quantity Sold");
                        })

Parents
No Data
Reply
  • 440
    Offline posted

    Hello John,

    I have been looking into your question and requirements could be achieved at the application level from to the model.

    What I suggest as a first approach is to use the FormatLabel accessor of the Axes property of the igDataChart, as after you determine who will be the label, you can use the FormatLabel to give it the format in which you want it to be visualized.

    .Axes(axis =>
            {
                axis.CategoryX("xAxis")
                .Label(item => item.Date)
                .FormatLabel("MM/dd/yy");
)}

    As a second approach is to use DisplayFor in the datetime property model itself, then you have to either define the format via the DisplayFormat attribute or use a custom display template and also DisplayFormatString in it.

    [DisplayFormat(DataFormatString = "{0:MM/dd/yy}")]
public DateTime? FirstDateOfWeek { get; set; }

    The other approach that you can use is when you set the xAxis category label is to use the ToString() method, giving it the given format in which you want the date to be visualized.

    .Axes(axis =>
         {
             axis.CategoryX("xAxis")
             .Label(item => item.Date.ToString("MM/dd/yy"))
             .Title("Week Of");
         })

    Another approach similar to the second one is to have another string property for example FormattedDate and in the controller before binding the chart data take the date property format it and assign it to this new helper property then set the xAxis label again be the FormattedDate property containing the formatted date.

    .Axes(axes =>
             {
                 axes.CategoryX("xAxis")
                     .Label(item => item.FormattedDate);
             })

    Please test these approaches on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to provide your own sample. Best practice is to provide a complete sample of the controller, the model you are using and all the code from the view so that I can reproduce it, take a detailed look and do a full investigation of this described behavior.

    Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior. 

    Thank you for your cooperation.  

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Children