Highcharts Ajax Loaded Data Clickable Points Chart Example

Keywords : Load data into chart using highcharts with example, Implement chart with clickable points using highcharts with example, Highcharts load chart data with ajax and clickable points example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Ajax loaded data, clickable points chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
           
            var chartitle = {
                text: 'Daily visits at www.highcharts.com'
            }
            var chartsubtitle = {
                text: 'Source: Google Analytics'
            }
            var chartxaxis = {
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            }
            var chartyaxis = [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }]
            var chartooltip = {
                shared: true,
                crosshairs: true
            }
            var chartlegend = {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            }
            var chartplotoptions = {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: e.pageX || e.clientX,
                                        y: e.pageY || e.clientY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                        this.y + ' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            }
            var chartseries = [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
                $('#container').highcharts({
                    data: {
                        csv: csv
                    },
                    title: chartitle,
                    subtitle: chartsubtitle,
                    xAxis: chartxaxis,
                    yAxis: chartyaxis,
                    tooltip: chartooltip,
                    legend: chartlegend,
                    plotOptions: chartplotoptions,
                    series: chartseries
                });
            });
          
        });
    </script>
 
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts Ajax Loaded Data Clickable Points Chart Example

Example

Result