CODEWITHSUNDEEP
highcharts
Kabir
Kabir

Reputation: 2156

How to get id for every data point in highchart

Actually i am using the Highstock library and I am generating a graph with line chart (Data Grouping) with using PHP and MySQL. I am using a JSON format to plot the chart.

I have around 50,000 records to plot chart and I need to show id in popup when I click on data point.

I use my JSON string like this

[
[1345575960000,303.38,1],
[1345575960000,303.32,2],
[1345575960000,303.25,3],
[1345575960000,303.17,4],
[1345575960000,303.09,5],
[1345575960000,303.01,6]
]

in javascript i am using 

$.getJSON('data/jsonp.php?filename='+ name +'.json&callback=?', function(data) {

var jsonData = [],
dataLength = data.length;

for (j = 0; j < dataLength; j++) {
    jsonData.push([
        data[j][0], // x value
        data[j][1], // y value
        data[j][2] // id
    ]);
}

seriesOptions[i] = {
    name: name,
    data: jsonData,
    events:
        {
            click: function(event)
            {
                chart.showLoading('Loading data...');
                // HOW TO GET HERE THE ID (This is third value in JSON array)
                chart.hideLoading();
            }
        }
    };
seriesCounter++;
if (seriesCounter == names.length) {
      createChart();
}

});

Can anyone help me show the ID in Chart.

Thanks in Advance.

Upvotes: 0

Views: 3215

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Take look at example which contains 60000 points and ids are displayed correctly.

http://jsfiddle.net/Rpkqa/

 series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = 0; i <= 60000; i++) {
                data.push({
                    id: 'iddd' + i,
                    x: time + i * 1000,
                    y: Math.round(Math.random() * 100)
                });
            }
            return data;
        })()
    }]

tooltip: 

 tooltip:{
        formatter:function(){
            console.log(this);

            return 'point: '+this.y + ' ID: '+this.points[0].point.id;
        }
    },

Upvotes: 2

SteveP
SteveP

Reputation: 19093

You need to specify your points differently. Try this:

[
    {x:1345575960000,y:303.38,id:1},
    {x:1345575960000,y:303.32,id:2}
]

You should then be able refer to this.id in the evnt handler.

Upvotes: 1

Related Questions