HighChart Bubble and Date / Tooltip

Question

I want to create a BubbleChart with HighChart, with dates on X Axes, with a custom Tooltip.

Here's my code :

        public ActionResult BubbleChart(int id)
    {
        Project p = db.Projects.Find(id);
        Series Serie1 = new Series();
        List<object> obj1= new List<object>();
        foreach (Info info in p.Infos)
        {
            object a = new object[] {  info.Date, p.Amount, Amount/100 };
            obj1.Add(a);
        }
        Serie1.Data = new DotNet.Highcharts.Helpers.Data(obj1.ToArray());
        Serie1.Name = "Name1";
                    Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { Type = ChartTypes.Bubble, ZoomType = ZoomTypes.Xy, Width = 600, Height = 400 })
            .SetTitle(new Title { Text = "ProjectInfo" + p.Name })
            .SetXAxis(new XAxis { Type = AxisTypes.Datetime,  Title = new XAxisTitle { Text = "Date" } })
            .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount" } })
            .SetSeries(new[]
            {
                Serie1
            }).SetTooltip(new Tooltip
            {
                HeaderFormat = "<span style=\"font-size:11px\">{series.name}</span><br>",
                PointFormat = "<span style=\"color:{point.color}\">Date</span>: <b>{point.x}</b><br/><span style=\"color:{point.color}\">Amount</span>: <b>{point.y:.2f}</b>"
            });

        return View(chart);
    }

This Code shows in tooltip : "Date:14002943820497398" but not the date I want, how to fix it ?

My second question is about adding datas in the tooltip (name of project, description, etc...) How can I Do that ?

Thanks

Answer 1

Highcharts expects time as timestamps in milliseconds but you are sending time in microseconds .this value 14002943820497398 is in microsecond. send as millisecond it will resolve your issue.

for custom data in tooltip you should fill your data in series :

data: [ { y : 10, customData: 'something' },
{ y : 12, customData: 'something' },
{ y : 14, customData: 'something' } ]

and in formatter function of tooltip

 tooltip: {
 formatter: function() {
           return 'Addition info: <b>'+ this.point.customData+'</b>';
 }
}