Problems plotting a json file

plotly.js
1

Hello,
could you help me figuring out what is wrong with the following code:

Plotly.d3.json('http://www.infinteloveapp.esy.es/sito/215.json', function(error, figure) {
   
    var trace1 = {
          x:figure.data[0].x,
          y:figure.data[0].y, 
          marker: {color: "rgba(142,189,42,0.9)"}, 
          name: "B18_LR_hdh", 
          type: "bar"
    }
    
    var trace2 = {
          x:figure.data[0].x , 
          y:figure.data[0].y , 
          marker: {color: "rgba(29,127,109,0.8)"}, 
          name: "B18_B1_hdh", 
          type: "bar"
    };
    var data = [trace1, trace2];
    var layout = {
  title: "<b>B18</b><br>Cumulative Heating Degree Hours (HDH) on a weekly basis", 
  titlefont: {
    color: "#7f7f7f", 
    size: 18
  }, 
  yaxis: {title: "Weekly HDH"}
};
Plotly.plot('myDiv', data, layout);
    })
2

Hi,
you should really give more information in what you think whats wrong here. What happens that you think there is something wrong?
What error messages raises in the console?
I tried your example but have orgin-request problems, because it cannot load data from another domain.
I saved the json in a local file and tried it with a local path. That works in firefox. (Chome e.g. forbids origin-requests to the local disc too).
Heres the code that worked for me:



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--PLOTLY-->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


    <style>
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
		
		#myDiv{
			height: 40%;
			width: 60%;
			position:relative;
		}
    </style>
</head>
<body class='with-3d-shadow with-transitions'>

	<h2>JsonTest</h2>
	<div id="myDiv"></div>
	
<script>
	Plotly.d3.json('path/to/file/data.json', function(error, figure) {
	
		if(error) throw error;
	   
		var trace1 = {
			  x:figure.data[0].x,
			  y:figure.data[0].y, 
			  marker: {color: "rgba(142,189,42,0.9)"}, 
			  name: "B18_LR_hdh", 
			  type: "bar"
		}
		
		var trace2 = {
			  x:figure.data[0].x , 
			  y:figure.data[0].y , 
			  marker: {color: "rgba(29,127,109,0.8)"}, 
			  name: "B18_B1_hdh", 
			  type: "bar"
		};
		var data = [trace1, trace2];
		var layout = {
	  title: "<b>B18</b><br>Cumulative Heating Degree Hours (HDH) on a weekly basis", 
	  titlefont: {
		color: "#7f7f7f", 
		size: 18
	  }, 
	  yaxis: {title: "Weekly HDH"}
	};
	Plotly.plot('myDiv', data, layout);
	})
</script>
</body>
</html>

I guess you maybe have cross-origin problems like me: XMLHttpRequest cannot load http://www.infinteloveapp.esy.es/sito/215.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

Informations about that are here: http://stackoverflow.com/questions/28547288/no-access-control-allow-origin-header-is-present-on-the-requested-resource-err

3

I suspect that is returning data as array of datum:

[
  { x: 0, y: 1 },
  { x: 1, y, 0 },
]

but plotly.js expects array of coordinates i,e

Plotly.plot('graph', [{
  x: [1, 0],
  y: [0, 1]
}]

so you’ll need to convert your JSON data into something plotly.js can understand.