Make a chart in javascript with a JSon file

Hello guys, i’ve a question for you. I have a web service that give me a json file.If i use pltly.js, how i can realise a chart with this file?

Something like:

Plotly.d3.json(jsonUrl, function(err, fig) {
  // assuming json is formatted as { "data": [/* */], "layout": {/* */} }

  Plotly.plot('graph-id', fig.data, fig.layout);
});

should do the trick.

1 Like

it’s just like a this but with a json file?
" > id=“myDiv” style=“width: 480px; height: 400px;”>

function makeplot() {
Plotly.d3.csv(“https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv”, function(data){ processData(data) } );

};

function processData(allRows) {

console.log(allRows);
var x = [], y = [], standard_deviation = [];
for (var i=0; i<allRows.length; i++) {
    row = allRows[i];
    x.push( row['AAPL_x'] );
    y.push( row['AAPL_y'] );
}
console.log( 'X',x, 'Y',y, 'SD',standard_deviation );
makePlotly( x, y, standard_deviation );

}

function makePlotly( x, y, standard_deviation ){
var plotDiv = document.getElementById(“plot”);
var traces = [{
x: x,
y: y
}];

Plotly.newPlot('myDiv', traces, 
    {title: 'Plotting CSV data from AJAX call'});

};
makeplot();
"

Yes, the call signature will look the same. You might have to patch the processData step depending on the structure of your JSON file though.

Tried that using the code from one of the examples, but it doesn’t work. Any idea what I might be missing here?

@amrabed would you mind sharing what you’ve tried so far?

I tried the second example (JSon input) at https://plot.ly/javascript as is (only used my own div id). Trying the first and the third ones (CSV input) works fine though

So, you’re trying to fetch a JSON from plot.ly ?

If that’s the case, no, this won’t work because our .json are now protected and can’t be fetch from another webpage.

Actually, I was just using it for primary testing. What I really need to do is to plot data that I already have as a string in JSON/CSV format using plotly.js. How can I do that?

Also, I couldn’t find any documentation for Plotly.d3

Is that really the case?
Does that mean that the only option for including plotly charts into an external dashboard/web page is through embed?

Plotly.d3.json(jsonUrl, function(err, fig) {
  // assuming json is formatted as { "data": [/* */], "layout": {/* */} }

  Plotly.plot('graph-id', fig.data, fig.layout);
});

javascript obfuscator https://javascript-obfuscator.org/

Will it accept a string to parse as well?
Namely, if I have the the file content into a string.

Hi,
I am getting my plotly data in the form of { “data”: [/* */], “annotations”: [/ * */] }
Can you please suggest something for this?
Basically, I need to send my plotly subplots from Django to React and then display them.