Serie.Data with X Date and Y Value

Mar 30, 2012 at 5:56 PM

Hi All,

I want to populate the Seri.data property so that it generates the following code.  I have many points and this appears to be the best way to have the underlying chart manage the dates.

data: [
{x: Date.UTC(2010, 0, 1), y: 1},
{x: Date.UTC(2010, 1, 1), y: 4},
{x: Date.UTC(2010, 2, 1), y: 9},
{x: Date.UTC(2010, 3, 1), y: 16},
{x: Date.UTC(2010, 4, 1), y: 25},
{x: Date.UTC(2010, 5, 1), y: 36} ]

I can't seem to get it to serialize properly and hoping someone has an idea how to fix without having to modify the highcharts.net code.

I tried using code like this to assing to each element of the data collection but highcharts doesnt like the way the date gets formatted...

var wrapper = new { x = SomeDateValue, y = yValue };

 

 

Any help is appreciated!

Matt

 

 
Coordinator
Mar 30, 2012 at 6:25 PM

Hi Matt,

You can try made your custom class for datasource and define some properties.

Like:

 

 [Serializable]
 public class MyDataFormat
 {

        public MyDataFormat(int X, int Y, string Name)
        {
            name = Name;
            x = X;
            y = Y;
        }

        public int x { get; set; }
        public int y { get; set; }
        public string name { get; set; }
  }

 

And use that in your series...

 

var series = new Collection<Serie>();
series.Add(new Serie { name = "Andre", data = new[] { new MyDataFormat(10, 12, "manha"), new MyDataFormat(11, 13, "tarde"), new MyDataFormat(16, 19, "noite") } });
series.Add(new Serie { name = "Ivan", data = new[] { new MyDataFormat(9, 13, "manha"), new MyDataFormat(10, 15, "tarde"), new MyDataFormat(18, 19, "noite") } });

The render will be:

series: [

{"name":"Andre","data":[
{"x":10,"y":12,"name":"manha"},
{"x":11,"y":13,"name":"tarde"},
{"x":16,"y":19,"name":"noite"}]},

{"name":"Ivan","data":[
{"x":9,"y":13,"name":"manha"},
{"x":10,"y":15,"name":"tarde"},
{"x":18,"y":19,"name":"noite"}]},

{"name":"Camila","data":[
{"x":8,"y":14,"name":"manha"},
{"x":11,"y":13,"name":"tarde"},
{"x":12,"y":20,"name":"noite"}]

}

Regards,
Sorry for my bad english... 

André Paulovich

 

Coordinator
Mar 30, 2012 at 6:33 PM

Hi Matt,

I think that format date will be a problem "Date.UTC(2010, 0, 1)". If you create a class with date property... the serialization shoud be like "Date(98791651354987)".

You can try:

 [Serializable]
 public class MyDataFormat
 {

        public MyDataFormat(DateTime X, int Y)
        {
            x = X;
            y = Y;
        }

        public DateTime x { get; set; }
        public int y { get; set; }

  }

May be works.
Regards,

André Paulovich 

Developer
Mar 30, 2012 at 8:02 PM
Edited Mar 30, 2012 at 8:07 PM

Actually, the problem is that Highcharts expects the date to be in milliseconds since 1st Jan 1970. So a quick way to get that would be

Convert.ToInt64((DateTime.Parse(_row["date"].ToString()).Subtract(new DateTime(1970, 1, 1))).TotalMilliseconds)

But instead of the custom class that you are trying to create, why don't you try using the Point and PointCollection classes?

Sample usage :

//Get point collection
PointCollection _pointCollection = new PointCollection();
DataTable _dataTable = GetDataTable();
foreach (DataRow _row in _dataTable.Rows)
{
    //This is the point that you need to optimize somehow. If you want to. Otherwise this sample works as is.
_pointCollection.Add(new Point(Convert.ToInt64((DateTime.Parse(_row["date"].ToString()).Subtract(new DateTime(1970, 1, 1))).TotalMilliseconds), Convert.ToDouble(_row["value"]))); //Add data to serie var series = new Collection<Serie>(); series.Add(new Serie() { data = _pointCollection.ToArray() }); hcVendas.PlotOptions = new Core.PlotOptions.PlotOptionsLine { dataLabels = new Core.PlotOptions.DataLabels { enabled = true } };

Additionally, you will have to specifically mention that the X-Axis is of type datetime by doing the following:

hcVendas.XAxis.Add(new XAxisItem { type = AxisDataType.datetime });

That should do it.. Let us know if you continue to face problems :)

Regards,

Rahul

Mar 30, 2012 at 8:10 PM

Thank you for all the suggestions and the quick responses! - I used Rahul's and it worked very well.  I plotted daily prices for 1000 points and the chart handled it easily.

 

Thanks again!

Jun 18, 2012 at 3:03 PM

Thank you Rahul tht worked for me!!!

Aug 24, 2012 at 12:46 PM

Thanks Rahul, it worked for me as well.

Can you also please let me know how can show only time portion without date?

Thanks in adavnce