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
145
igDataChart scatterLine series with DataTime x data
posted

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:

  • double y value, call it 'Value' for reference
  • datetime x value, call it 'Date' for reference

The chart should shows the following series sharing the same X-axis:

  • multiple scatter line series
  • singel scatter polygon series 

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 targetTypeobject 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
Parents
No Data
Reply
  • 1080
    Verified Answer
    Offline posted

    Hi,

    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

Children