HighChart气泡和日期/工具提示

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>';
 }
}