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"); })
Keeping the aforementioned things in mind will help you choose the finest motherboard for your office or business needs. Making this decision will guarantee that the company gets the best motherboard for the money. A motherboard is a crucial part of any company, therefore picking one out carefully is essential. gorilla tag
When it comes to finding the best motherboard for office and company work, it is important to take all the above factors into consideration. Doing so will ensure that the business can benefit from the most efficient and cost-effective motherboard available. A motherboard is an important component of any business, and it should be chosen with care. https://justmotherboard.com/best-rgb-motherboard/
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
Well I had already tried your option 1 and it did not work as the chart did not render for some reason. I tried option 2 and it did not work either. I was avoiding option 3 because I did not think it was necessary but that was the only resolution. Can you tell me why option 1 did not work? A am including the entire grid markup... I would like to get option 1 working... Please advise further...
@using Infragistics.Web.Mvc@model eMerchant.Reports.Models.OrderWeeklySale<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div style="color: #44ACD6"> <span>Event: </span><span style="font-weight: bold">@Model.EventName</span><br /> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 justify-content-center"> @(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.FirstDateOfWeekDisplay) //.FormatLabel("MM/dd/yy") .Title("Week Of") .LabelAngle(90) //.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"); }) .Series(series => { if (Model.Product1HasData == true) { //series.Line("series1") //series.Column("series1") //series.Spline("series1") //series.Point("series1") series.Line("series1") .ValueMemberPath(item => item.Quantity1) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title(Model.ProductName1) .XAxis("xAxis") .MarkerType(MarkerType.Circle) .MarkerBrush("#f0e723") .MarkerOutline("#ffc200") .YAxis("yAxis") .ShowTooltip(true) .Brush("#ffc200") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) .TrendLineBrush("#000000") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate1"); } if (Model.Product2HasData == true) { //series.Line("series2") //series.Column("series2") //series.Spline("series2") //series.Point("series2") series.Line("series2") .ValueMemberPath(item => item.Quantity2) .Legend(legend => { legend.LegendType(LegendType.Item); }) .Title(Model.ProductName2) .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) .Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate2"); } if (Model.Product3HasData == true) { //series.Line("series3") //series.Column("series3") //series.Spline("series3") //series.Point("series3") series.Line("series3") .ValueMemberPath(item => item.Quantity3) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title(Model.ProductName3) .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate3"); } if (Model.Product4HasData == true) { //series.Line("series4") //series.Column("series4") //series.Spline("series4") //series.Point("series4") series.Line("series4") .ValueMemberPath(item => item.Quantity4) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title(Model.ProductName4) .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate4"); } if (Model.Product5HasData == true) { //series.Line("series5") //series.Column("series5") //series.Spline("series5") //series.Point("series5") series.Line("series5") .ValueMemberPath(item => item.Quantity5) .Legend(legend => { legend.LegendType(LegendType.Item); legend.ID("dataLegend"); }) .Title(Model.ProductName5) .XAxis("xAxis") .MarkerType(MarkerType.Circle) //.MarkerBrush("red") //.MarkerOutline("blue") .YAxis("yAxis") .ShowTooltip(true) //.Brush("green") .Thickness(2) .IsDropShadowEnabled(false) .ShadowBlur(40) //.ShadowColor("grey") .ShowTooltip(true) .TrendLineType(TrendLineType.None) .TrendLineThickness(1) //.TrendLineBrush("orange") .IsTransitionInEnabled(true) .TransitionDuration(2000) .TransitionInMode(CategoryTransitionInMode.AccordionFromLeft) .TooltipTemplate("Total Sales by Week") .Legend(legend => legend.ID("dataLegend")) .LegendItemVisibility(Visibility.Visible) .TooltipTemplate("tooltipTemplate5"); } }) .WindowResponse(WindowResponse.Immediate) .DataBind() .Render() ) </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="dataLegend"></div> <div id="columnChart"></div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <input id="exportBtn" onclick="ExportImage()" value="Export as image" type="button" class="btn button01" /> </div> </div> </div></div><!-- Format the Chart & Legend--><script type="text/javascript"> $(function () { $("#chart").igDataChart({ chartType: "column", dataSource: data, legend: { element: "theLegend" } }); }); $("#dataLegend").igDataLegend({ target: $("#chartContainer").igDataChart(), headerText: "My Custom Data Legend Header", summaryType: "total", summaryTitleText: "Grand Total" });</script><!-- Custom Tooltip Template --><script id="tooltipTemplate1" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName1} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity1}</span> </div></script><script id="tooltipTemplate2" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName2} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity2}</span> </div></script><script id="tooltipTemplate3" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName3} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity3}</span> </div></script><script id="tooltipTemplate4" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName4} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity4}</span> </div></script><script id="tooltipTemplate5" type="text/x-jquery-tmpl"> <div style="color: #44ACD6"> <span>Week: </span><span>${item.Week}</span><br /> ${item.ProductName5} Total Quantity Week ${item.Week}: <span style="font-weight: bold">${item.Quantity5}</span> </div></script><!-- Export the Chart to a File --><script type="text/javascript"> function ExportImage() { var img = $('#chart').igDataChart("exportImage", $('#chart').width(), $('#chart').height()); // atob to base64_decode the data-URI var image_data = atob(img.src.split(',')[1]); // Use typed arrays to convert the binary data to a Blob var arraybuffer = new ArrayBuffer(image_data.length); var view = new Uint8Array(arraybuffer); for (var i = 0; i < image_data.length; i++) { view[i] = image_data.charCodeAt(i) & 0xff; } var blob = new Blob([arraybuffer], { type: 'image/jpeg' }); saveAs(blob, "img.jpg"); };</script>
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.