echarts: get data from URL

Question

I'm testing Echarts capabilities on its demo page: https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-simple

Now I want that chart to display data gathered from a URL. That URL returns "[820, 932, 901, 934, 1290, 1330, 1320]".

Demo code (which is working) is:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

My code (which is NOT working) is:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        url: 'https://www.myurl.com/echartstest.php',
        type: 'line'
    }]
};

When I use my URL inside the code, no error is returned, but the chart is not being displayed.

If necessary I can use AJAX in my project.

Gautam Rai Gautam Rai · Accepted Answer · 2019-01-09T12:11:52

var dataArr = [];
     $.get('https://www.myurl.com/echartstest.php', {}, function(response) {
            dataArr = JSON.parse(response);
              initEchart();
            });
// make sure dataArr should be in array like [1,2,3],


 function initEchart(){
       option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataArr          
                type: 'line'
            }]
        };  
      echarts.init(document.getElementById('youtchartId')).setOption(option);
   }

echarts: get data from URL

1 Answers