Highcharts scatter external data

Question

I created document with highcharts scatter graph

                Highcharts.chart('container', {
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Date of entry'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'Values'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                    borderWidth: 1
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        tooltip: {
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: 'Dana {point.x} = {point.y}'
                        }
                    }
                },
                series: [{
                    name: 'Values',
                    color: 'rgba(223, 83, 83, .5)',
                    data: [[167.6, 64.5], [167.6, 72.3], [167.6, 61.4]]
                }]
            });

and this works. This code is from documentation page. I get normal scatter data like on this page Highcharts scatter jsfiddle Now, I created another PHP file that produces me with data I actually need. it is in document highcharts.php and result is this

[07.03.2017,21000],[07.03.2017,25000],[07.03.2017,33000],[07.03.2017,27000],[07.03.2017,30000],[01.01.2017,700],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],

how to connect data to this highcharts.php file? I found some examples but I cannot get it to work. So for start I need this, ONE line of data to show on scatter diagram. I lost few days and just do not get it what I am doing wrong.

Answer 1

If your PHP file returns the array presented above, you need to parse it a little bit in order to use it as data array in a scatter series. First of all, dates should be strings. Secondly, you need to use new Date() to create Date instance and use getTime() to return timestamps. Also, change xAxis type to datetime.

API Reference:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

Example:
http://jsfiddle.net/0025rsmt/