How to show realtime data on Highchart

Question

I am trying to show realtime transactions using Highchart. I am using JavaScript's EventSource class to fetch the data once the URL passed to it is updated. I am following this example from Highchart - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/

I have done some few tweaks to reflect what I want but when I load the page, and data is sent from the URL, I get this error on my console -

(index):1 GET http://myurl/analytics-api/v1.0/payments-stream net::ERR_ABORTED 504 (Gateway Time-out)
(index):1 Access to resource at 'http://myurl/analytics-api/v1.0/payments-stream' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my code:

Highcharts.chart('liveTrans', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    var es = new EventSource('http://myurl/analytics-api/v1.0/payments-stream')
                    es.onmessage = function(e) {
                        var obj = JSON.parse(e.data);
                        var amount = obj.amount;
                        var jDate = Date.parse(obj.timestamp)
                        series.addPoint([jDate, amount], true, true)
                        console.log('added')
                    };

                }
            }
        },

        time: {
            useUTC: false
        },

        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: []
    });