CODEWITHSUNDEEP
javascripthighcharts
Bharat
Bharat

Reputation: 3010

Highcharts Spline lines not showing up

I am trying to plot a spline graph with the following data:

[
    {
        "name": "Version 1.0",
        "data": [
            "10/9/2014, 11:47:03 AM",
            170.023
        ]
    },
    {
        "name": "Version 1.1",
        "data": [
            "10/8/2014, 1:00:00 AM",
            1967.02,
            [
                "10/9/2014, 11:00:19 AM",
                167.023
            ],
            [
                "10/9/2014, 9:34:49 PM",
                1974.03
            ],
            [
                "10/9/2014, 9:45:33 PM",
                1983.02
            ],
            [
                "10/9/2014, 10:36:10 PM",
                1989.03
            ],
            [
                "10/10/2014, 3:05:37 AM",
                1972.02
            ],
            [
                "10/10/2014, 5:01:43 AM",
                1980.02
            ],
            [
                "10/10/2014, 8:37:18 AM",
                16.0215
            ],
            [
                "10/10/2014, 2:37:44 PM",
                1994.02
            ]
        ]
    }
]

Here is a JSFiddle of it: http://jsfiddle.net/rknLa2sa/3/

The points are correctly plotted but they are not connected with a line. How do I make these points be connected on the graph? Also how do I make the dates I have in the data array show up on the x-axis as well as the tool-tip.

Upvotes: 0

Views: 1752

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Instead of using Date.UTC() you can map your points using new Date(..).getTime(). Example: http://jsfiddle.net/rknLa2sa/10/

        data: [
            ["10/8/2014, 1:00:00 AM", 1967.02],
            ["10/9/2014, 11:00:19 AM", 167.023],
            ["10/9/2014, 9:34:49 PM", 1974.03],
            ["10/9/2014, 9:45:33 PM", 1983.02],
            ["10/9/2014, 10:36:10 PM", 1989.03],
            ["10/10/2014, 3:05:37 AM", 1972.02],
            ["10/10/2014, 5:01:43 AM", 1980.02],
            ["10/10/2014, 8:37:18 AM", 16.0215],
            ["10/10/2014, 2:37:44 PM", 1994.02]
        ].map(function (e) {
            return [new Date(e[0]).getTime(), e[1]];
        })

Upvotes: 1

user2314737
user2314737

Reputation: 29407

You have forgotten some brackets in your data around

"10/8/2014, 1:00:00 AM",
            1967.02,

http://jsfiddle.net/rknLa2sa/4/

In order to show label you could preprocess your data and convert the dates to UTC format

like this

 [
   Date.UTC(2014, 8, 10, 10),
   167.023
 ],

http://jsfiddle.net/rknLa2sa/7/

Upvotes: 2

Related Questions