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
  • 460
    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

Reply Children
  • 460
    Offline posted in reply to John Station

    Hello John,

    I have been looking into your question and the first approach provided won't work and the igDataChart won't render because the FormatLabel property takes a function as a parameter, not a string. What I provided you with was simply a visual display of the given format you want I was also provided you with a link where you can find the specifics of the igDataChart FormatLabel property and see that it accepts a function and how to compose your function.

    However, what I could provide as additional clarifications is that you can pass a function directly to the FormatLabel property parameters in the igDataChart initialization or pass a function name to initialize in a script tag after the igDataChart and have that function return the format you want.

    As for example if you pass a function directly it will look like this:

    axis.CategoryX("xAxis")
.Label(item => item.Date)
.Title("Week Of")
.FormatLabel("function (item) {return item.Date.getUTCMonth() + 1) + '/' + item.Date.getUTCDate() + '/' + item.Date.getFullYear();}");

    And if you pass in a name of a function it will look like this:

    axis.CategoryX("xAxis")
.Label(item => item.Date)
.Title("Week Of")
.FormatLabel("dateFunction");

    <script>
     function dateFunction(item) {
         return (item.Date.getUTCMonth() + 1) + '/' + item.Date.getUTCDate() + '/' +    item.Date.getFullYear())
         }
</script>

    You can create your function and compose it as you want according to your custom logic and according to the given date format.

    Please test it on your side and let me know how it behaves.

    If you require any further assistance on the matter, please let me know.

    Thank you for your cooperation.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics