Plotly failing to show all traces in Javascript

plotly.js
1

I’m having trouble getting Plotly to produce three traces. No errors being reported. No matter what I do I can’t get Plotly to display the 2nd trace. I can change which trace is the second trace and it’ll display the first and third trace just fine, but never the second.

<HTML>

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.32.0.min.js'></script>
</head>

<body>

<div id='Bulgaria'><!-- Plotly chart will be drawn inside this DIV --></div>

	<script>

		var trace1 = {
		  x: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'],
		  y: ['1143.54','1114.22','1132.24','1086.82','1020.54','1014.99','1006.56','1009.19','1002.7','1035','1001.01','1014.63','993.66','958.13','973.22','960.48','961.78','972.85','995.34','993.59','989.18','970.92','983.38','954.49','982.31','985.06','955.66','949.02','975.67','956.34','980.81','966.29','990.86','948.67','982.32','1000.65','997.91','1064.9','984.97','990.48','988.17','951.08','939.26','914.2','922.67','922.47','933.89','913.1','887.35','873.04','879.33','857.02','822.57','820.85','882.91','866.07','864.66','864.96','863.1','817.32','951.7','1183.45'],
		  visible: true,
		  name: 'Data1',
		  mode: 'lines',
		  type: 'scatter'
		};

		var trace2 = {
		  x: ['1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'],
		  y: ['2.76892','3.13663','3.30669','2.7802','3.11863','3.61873','3.85442','3.31681','3.94714','4.2479','3.9958','3.86231','3.98245','3.85427','4.15749','4.5038','4.01681','4.42687','4.58884','4.6399','4.49442','5.65793','5.58722','5.27897','5.95028','6.65681','5.79838','5.83992','5.87034','7.25925','7.54475','7.8086','7.50461','7.64187','7.77687','9.94418','8.29217','8.92363','9.06754','8.88732','9.15559','8.717','8.55173','10.4145','8.96131','9.28417','9.42411','9.19211','10.1497','9.40641','9.38048','10.3026','9.33399','9.91643','8.385'],
		  visible: true,
		  name: 'Data2',
		  mode: 'lines',
		  type: 'scatter'
		};
		
		var trace3 = {
		  x: ['1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'],
		  y: ['2.76892','3.13663','3.30669','2.7802','3.11863','3.61873','3.85442','3.31681','3.94714','4.2479','3.9958','3.86231','3.98245','3.85427','4.15749','4.5038','4.01681','4.42687','4.58884','4.6399','4.49442','5.65793','5.58722','5.27897','5.95028','6.65681','5.79838','5.83992','5.87034','7.25925','7.54475','7.8086','7.50461','7.64187','7.77687','9.94418','8.29217','8.92363','9.06754','8.88732','9.15559','8.717','8.55173','10.4145','8.96131','9.28417','9.42411','9.19211','10.1497','9.40641','9.38048','10.3026','9.33399','9.91643','8.385'],
		  visible: true,
		  name: 'Data3',
		  mode: 'lines',
		  type: 'scatter'
		};
		
		var data = [trace1,trace2,trace3];

		var layout = {
				
		  title: {
			text:'Bulgaria: Data',
			font: {
			  family: 'Courier New, monospace',
			  size: 24
			},
			xref: 'paper',
			x: 1,
		  },
		  xaxis: {
			autotick: false,
			title: {
			  text: 'Year',
			  font: {
				family: 'Courier New, monospace',
				size: 18,
				color: '#7f7f7f'
			  }
			}
		  },
		  yaxis: {
			type: 'log',
			autorange: true,
			title: {
			  text: 'Rate',
			  font: {
				family: 'Courier New, monospace',
				size: 18,
				color: '#7f7f7f'
			  }
			}
		  }
		};

		Plotly.newPlot('Bulgaria', data, layout);

	</script>
2

I see different scales on the Y axis, there is a lot of difference between the first and the last two and they are all on the same axis, you should use one axis for the first graph and create another for the last two, also because you don’t use numbers instead of strings as data

3

Thanks for helping me. Switched from strings to numbers first since that was easy, still does it, now figuring out how to use extra axes, hopefully that fixes this. Wouldn’t have thought of that. Thanks again.

4

Unfortunately setting multiple Y axes also didn’t work. Still only shows two traces and no errors. I first tried setting the first trace to one axis and the other two to another, then I tried setting each to its own axis. Neither worked. Is there anything else I could try? And thank you.


<HTML>

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.32.0.min.js'></script>
</head>

<body>

<div id='Bulgaria'><!-- Plotly chart will be drawn inside this DIV --></div>

	<script>

		var trace1 = {
		  x: [1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021],
		  y: [1143.54,1114.22,1132.24,1086.82,1020.54,1014.99,1006.56,1009.19,1002.7,1035,1001.01,1014.63,993.66,958.13,973.22,960.48,961.78,972.85,995.34,993.59,989.18,970.92,983.38,954.49,982.31,985.06,955.66,949.02,975.67,956.34,980.81,966.29,990.86,948.67,982.32,1000.65,997.91,1064.9,984.97,990.48,988.17,951.08,939.26,914.2,922.67,922.47,933.89,913.1,887.35,873.04,879.33,857.02,822.57,820.85,882.91,866.07,864.66,864.96,863.1,817.32,951.7,1183.45],
		  visible: 'true',
		  name: 'Data1',
		  mode: 'lines',
		  type: 'scatter',
		  yaxis: 'yaxis'
		};

		var trace2 = {
		  x: [1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018],
		  y: [2.77,3.14,3.31,2.78,3.12,3.62,3.85,3.32,3.95,4.25,4,3.86,3.98,3.85,4.16,4.5,4.02,4.43,4.59,4.64,4.49,5.66,5.59,5.28,5.95,6.66,5.8,5.84,5.87,7.26,7.54,7.81,7.5,7.64,7.78,9.94,8.29,8.92,9.07,8.89,9.16,8.72,8.55,10.41,8.96,9.28,9.42,9.19,10.15,9.41,9.38,10.3,9.33,9.92,8.39],
		  visible: 'true',
		  name: 'Data2',
		  mode: 'lines',
		  type: 'scatter',
		  yaxis: 'yaxis2'
		};
		
		var trace3 = {
		  x: [1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018],
		  y: [2.77,3.14,3.31,2.78,3.12,3.62,3.85,3.32,3.95,4.25,4,3.86,3.98,3.85,4.16,4.5,4.02,4.43,4.59,4.64,4.49,5.66,5.59,5.28,5.95,6.66,5.8,5.84,5.87,7.26,7.54,7.81,7.5,7.64,7.78,9.94,8.29,8.92,9.07,8.89,9.16,8.72,8.55,10.41,8.96,9.28,9.42,9.19,10.15,9.41,9.38,10.3,9.33,9.92,8.39],
		  visible: 'true',
		  name: 'Data3',
		  mode: 'lines',
		  type: 'scatter',
		  yaxis: 'yaxis3'
		};
		
		var data = [trace1,trace2,trace3];

		var layout = {
				
		  title: {
			text:'Bulgaria: Data',
			font: {
			  family: 'Courier New, monospace',
			  size: 24
			},
			xref: 'paper',
			x: 1,
		  },
		  xaxis: {
			autotick: false,
			title: {
			  text: 'Year',
			  font: {
				family: 'Courier New, monospace',
				size: 18,
				color: '#7f7f7f'
			  }
			}
		  },
		yaxis: {
			type: 'log',
			autorange: 'true'
		},
		yaxis2: {
			type: 'log',
			autorange: 'true'
		},
		yaxis3: {
			type: 'log',
			autorange: 'true'
		}
		
		};

		Plotly.newPlot('Bulgaria', data, layout);

	</script>
5

The data of the second and last trace are the same so the last stroke would be on top of the second

1 Like
6

You are completely correct. Thank you very much for noticing that, I didn’t. It was an error in the PHP that was generating the code. That’s fixed and it’s working now. Thanks again.