Load data from external rest service

plotly.js
1

Hi guys,

Is there any way to create a bar stacked chart using data from external rest service? I tried the following line without success:

Plotly.plot( TESTER, data = [ { url:"http://localhost:9090/api/test" } ], { margin: { t: 0 } } );

I really appreciate your help.

Bests,
Francislon

2

Hi Francislon,

Unfortunately Plotly.js doesn’t have a builtin http request functionality, so you will need to make the request first, then pass the data to Plotly.plot once you have received the response.

Plotly also exposes d3, so if you are not using any other libraries that assist with AJAX and you would like to avoid the verbose vanilla javascript http request, you can use the d3.json method to retrieve your data, then plot it in the callback.

Happy plotting!

3

Hi Miklos,

Thank you for your help. Unfortunately the chart is not working yet. This is my script to load the data:
var url=‘http://localhost:9090/api/test’;
d3.json(url, function(error,data){
if (error) return console.warn(error);
var layout = {barmode: ‘group’};
Plotly.newPlot(‘tester’, data, layout);
});
This error is showing up in javascript console: "TypeError: r._paperdiv is undefined"
My service is returning this json:
{“data”:[{“x”:[ “giraffes”, “orangutans”, “monkeys” ],“y”:[ 20, 14, 23
],“name” : “SF Zoo”,“type”:“bar”},{“x”:[ “giraffes”, “orangutans”,
“monkeys” ],“y”:[ 12, 18, 29 ],“name” : “LA Zoo”,“type”:“bar”}]}

Has anyone else loaded the data from an external webservice successfully?

Bests,
Francislon

4

Try:

var url='http://localhost:9090/api/test';

d3.json(url, function(error, data) {
  if (error) return console.warn(error);
  var layout = {barmode: 'group'};
  
 Plotly.newPlot('tester', data.data, layout);
});

The second argument to Plotly.newPlot must be an array.

5

Thank you Etienne! Now It worked :slight_smile:

Bests,
Francislon