Temperature from JSON to Highcharts

Question

I have code like below, I want to implement temperature on it from JSON file, however I don't know what I am doing wrong.

I tried different configurations of the JSON file itself, without the division into temperature and dew point (dew), but still the same. This result gives no answer...

Highcharts.getJSON(
    'https://www.pogodakrotoszyn.info/tempdata.json',
    function (data->temp) {

        Highcharts.chart('container', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Temperature',
                align: 'left'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in',
                align: 'left'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Temperature'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Temperature',
                data: data->temp;
            }]
        });
    }
);

The lines `data->temp` and `data: data->temp;` is a syntax error. Is this expected? — Praveen Kumar Purushothaman, Mar 07 '23 at 14:39
@Praveen Kumar Purushothaman: This is how I tried to get to the table marked json as temp - there are two main ones in the linked file - dew and temp. — Yulia94, Mar 07 '23 at 14:52
Server - json file is on: www.pogodakrotoszyn.info/tempdata.json — Yulia94, Mar 07 '23 at 14:55

score 1 · Accepted Answer · answered Mar 07 '23 at 15:10

1

The problem is that in the JavaScript code you use PHP syntax to access property of the object. Instead of data->temp you should do it like this data.temp.

Highcharts.getJSON(
    'https://www.pogodakrotoszyn.info/tempdata.json',
    function (data) {

        Highcharts.chart('container', {
            ...
            series: [{
                type: 'area',
                name: 'Temperature',
                data: data.temp
            }]
        });
    }
);

Demo: https://jsfiddle.net/BlackLabel/sypfmn10/
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

answered Mar 07 '23 at 15:10

Michał

773
1
1
12

Thanks Michał for anserw. In your demo, the link from which I am downloading data contains a link to another page and with this link it works, but without it when I paste this one to my website it doesn't. I don't understand what's going on here. – Yulia94 Mar 07 '23 at 15:42
@Yulia94 the link I used is a cors-proxy server to be able to receive data from a website with a different domain. I used this to be able to present an example demo. In your case, if you don't have a properly configured server, you will get an error with CORS policy. You can read more about CORS in this thread on SO: https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header or on MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Michał Mar 07 '23 at 16:52
1

After setting up CORS on the server, they work - thanks – Yulia94 Mar 07 '23 at 18:54

Temperature from JSON to Highcharts

1 Answers1