Use highcharts to add series and click

HighchartAfter loading the time, add the series to the chart and use the addseries method. This keyword indicates the Chart project. A parameter, time, and transfer function. This includes jquery or mootools based on the Basic highgcharts chart library you selected. With event. Options, you can operate the series options passed through addseries and return false to prevent the series from being added.

$(function () {    // create the chart    $(‘#container‘).highcharts({        chart: {            events: {                click: function(event) {                    var label = this.renderer.label(                            ‘x: ‘+ Highcharts.numberFormat(event.xAxis[0].value, 2) +‘, y: ‘+ Highcharts.numberFormat(event.yAxis[0].value, 2),                            event.xAxis[0].axis.toPixels(event.xAxis[0].value),                            event.yAxis[0].axis.toPixels(event.yAxis[0].value)                        )                        .attr({                            fill: Highcharts.getOptions().colors[0],                            padding: 10,                            r: 5,                            zIndex: 8                        })                        .css({                            color: ‘#FFFFFF‘                        })                        .add();                     setTimeout(function () {                        label.fadeOut();                    }, 1000);                }            }               },                 series: [{            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]               }]    });});

:

Click)

It appears when you draw the background. This keyword indicates the Chart project. A parameter, time, and transfer function. This includes jquery or mootools based on the Basic highgcharts chart library you selected.

Click information can be drawn through event. xaxis and event. yaxis. These are all arrays containing the dimension axis, and each axis value is clicked. When the main axis is event. xaxis [0] and event. yaxis [0], remember that from 970-01-01 00:00:00, the unit of the Data timeline is milliseconds.

click: function(e) {console.log(Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S‘, e.xAxis[0].value),e.yAxis[0].value)}

Try:

Code 1:

$(function () {    // create the chart    $(‘#container‘).highcharts({        chart: {            events: {                addSeries: function() {                    var label = this.renderer.label(‘A series was added, about to redraw chart‘, 100, 120)                        .attr({                            fill: Highcharts.getOptions().colors[0],                            padding: 10,                            r: 5,                            zIndex: 8                        })                        .css({                            color: ‘#FFFFFF‘                        })                        .add();                     setTimeout(function () {                        label.fadeOut();                    }, 1000);                }            }        },         xAxis: {            categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]        },         series: [{            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        }]    });      // activate the button    $(‘#button‘).click(function() {        var chart = $(‘#container‘).highcharts();         chart.addSeries({            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]        });         $(this).attr(‘disabled‘, true);    });});

1:

Click Add series:

> Download highcharts