Highcharts Ajax Loaded Data & Clickable Points Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to use highcharts library to load data from Ajax and implement clickable points on a chart with examples.

Highcharts Ajax Loaded Chart Example

Following is the example of creating a chart by loading the data from Ajax and implementing the clickable points on a chart to show the detailed information about particular point using highcharts library.

 

<html>

<head>

    <title>Highcharts Ajax Loaded Data, Clickable Points Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.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 src="https://code.highcharts.com/modules/export-data.js"></script>

    <!-- Additional files for the Highslide popup effect -->

    <script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>

    <script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

    <script type="text/javascript">

    $(function() {

    Highcharts.chart('container', {

    chart: {

        scrollablePlotArea: {

            minWidth: 700

        }

    },

    data: {

        csvURL: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/analytics.csv',

        beforeParse: function (csv) {

            return csv.replace(/\n\n/g, '\n');

        }

    },

    title: {

        text: 'Daily Sessions at Highcharts.com'

    },

    subtitle: {

        text: 'Source: Google Analytics'

    },

    xAxis: {

        tickInterval: 7 * 24 * 3600 * 1000, // one week

        tickWidth: 0,

        gridLineWidth: 1,

        labels: {

            align: 'left',

            x: 3,

            y: -3

        }

    },

    yAxis: [{ // 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

    }],

    legend: {

        align: 'left',

        verticalAlign: 'top',

        borderWidth: 0

    },

    tooltip: {

        shared: true,

        crosshairs: true

    },

    plotOptions: {

        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 + ' sessions',

                            width: 200

                        });

                    }

                }

            },

            marker: {

                lineWidth: 1

            }

        }

    },

    series: [{

        name: 'All sessions',

        lineWidth: 4,

        marker: {

            radius: 4

        }

    }, {

        name: 'New users'

    }]

   });

});

  </script>

</head>

<body>

    <div id="container" style="width: 100%; height: 400px;">

    </div>

</body>

</html>

If you observe the above example, we are loading the chart details from .csv URL using Ajax and implemented the clickable points on the chart using highcharts library with required properties.

 

When we execute the above highcharts example, we will get the result like as shown below.

 

Highcharts Ajax Loaded Data & Clickable Points Chart Example Result

 

This is how we can load the chart data from Ajax and implement the clickable points on a chart with required properties using highcharts library.