Hi,
I am familiar with XamDataChart in WPF application but now we are busy with code immigration to a web application (ASP.Net MVC).
The nature of data is:
The chart should shows the following series sharing the same X-axis:
I would like to use igDataChart (Ignite UI for JQuery) but could not find a relevant example/code. Moreover, some of XamDataChart tricks are not working in igDataChart,
For example, I used to create ScatterLineSeries for XamDataChart as follows which works fine:
var series1 = new ScatterLineSeries { Title = deviceName, ItemsSource = Points, XMemberPath = "Date.Ticks", YMemberPath = "Value" };and used an IValueConvertor implementation in DataTemplate for NumericXAxix label that returns only short time string:
public class TicksToShortTimeConverter : IValueConverter { #region IValueConverter Members object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo culture) { return new DateTime(Convert.ToInt64(value)).ToShortTimeString(); } #endregion }Can I get a similar example/ code that provides the same behavior for igDatachart?Regards,Souhad
I am glad that you managed to achieve your requirement.
Thanks for sharing your approach. I believe that this will be helpful in case other members of our community are facing the same situation.
Thank you for using Infragistics components.
Hi Martin,
Thank you very much for your answer, it works. Additionally, because my Date in Data is actually a .NET DateTime object that is sent back from the controller to the View as a JSON object, I change it to return the total milliseconds instead (according to gilfink.medium.com/quick-tip-converting-json-serialized-net-datetime-to-javascript-date-b55b68240a97) as follows:
var baseDate = new DateTime(1970, 1, 1); var chartPoint = new Point { Value = float.Parse(point.Value, NumberStyles.Float, Thread.CurrentThread.CurrentCulture.NumberFormat), TimeStampTotalMillisecond = new TimeSpan(point.TimeStamp.Ticks - baseDate.Ticks).TotalMilliseconds };
Thank you for posting in our community.
I have created and attached a small sample demonstrating how to create a composite chart with polygon and line series. For more information, you can take a look at the following online samples:
and our help topic for the igDataChart control.
To return only a short time string for the NumericXAxix, the formatLabel option can be used:
............. axes: [ { type: "numericX", name: "xAxis", label: "Time", formatLabel: function (item) { var date = new Date(item); return date.toLocaleTimeString(); } }, .............
Please review the sample and if this is not an accurate demonstration of what you are trying to achieve, please feel free to modify and send it back to me.
Looking forward to hearing from you.
0741.Sample.zip