How to draw 3D Surface Chart in Plotly by giving X Y Z axis

plotly.js
1

I have a table of data as follows

X	    Y	    Z
12.22	6.38	9.93
8.97	10.37	8.66
8.8	    7.6	    10.26
10.96	10.18	8.99
8.14	9.77	11.3
17.79	12.99	11.05
11.04	12.93	11.15
11.97	9.79	10.73
10.29	10.2	10.17
9.74	4.58	9.32
10.32	10.47	10.24
9.15	13.59	9.66
8.1	    5.85	9.23
6.55	10.58	9.69
18.78	8.29	9.39

Then I created a grid, X horizontally, Z vertically, filled Y values in the cells.

WAXFX
WAXFX.png739×251 1.95 KB

After I selected the data and choose the 3D Surface Chart, It generated a chart as below:
EPYMc

I tried the example below where the first number in Z is empty:

      var data = [
{
  z: [[,6.55,8.1,8.14,	8.8,8.97,9.15,9.74,10.29,10.32,10.96,11.04,11.97,12.22,17.79,18.78],
	[8.66,0,0,0,0,10.47,0,0,0,0,0,0,0,0,0,0],
	[8.99,0,0,0,0,0,0,0,0,0,10.18,0,0,0,0,0],
	[9.23,0,5.85,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[9.32,0,0,0,0,0,0,4.58,0,0,0,0,0,0,0,0],
	[9.39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8.29],
	[9.66,0,0,0,0,0,13.59,0,0,0,0,0,0,0,0,0],
	[9.69,10.58,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[9.93,0,0,0,0,0,0,0,0,0,0,0,0,6.38,0,0],
	[10.17,0,0,0,0,0,0,0,10.2,0,0,0,0,0,0,0],
	[10.24,0,0,0,0,0,0,0,0,	10.47,0,0,0,0,0,0],
	[10.26,0,0,0,7.6,0,0,0,0,0,0,0,0,0,0,0],
	[10.73,0,0,0,0,0,0,0,0,0,0,0,9.79,0,0,0],
	[11.05,0,0,0,0,0,0,0,0,0,0,0,0,0,12.99,0],
	[11.15,0,0,0,0,0,0,0,0,0,0,12.93,0,0,0,0],
	[11.3,0,0,9.77,0,0,0,0,0,0,0,0,0,0,0,0]],
	type: 'surface'
}];
var layout = {
    title: 'Mt Bruno Elevation',

    autosize: false,
    width: 700,
    height: 700,
    margin: {
      l: 130,
      r: 100,
      b: 130,
      t: 180,
    }
  };

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

It generated a Chart as below which looks wrong:
MoPHm

I don’t know if I generated Z data wrong. Can anyone tell me which part I am doing it wrong? or Suggest me a way to generate 3d surface similar to Excel chart

1 Like
2

Does this look ok: https://codepen.io/etpinard/pen/VVPyOr?editors=1010 ?

where I removed items in the first row and column.

3

Thanks for the response. In your example when user tries to move cursor over a shape, it dont show the correct value. That is why i tried to put X and Y values seperately. It changed the chart a little bit but it shows correct result. https://codepen.io/erdiatalay/pen/bQgKjG

4

this page shows sample. for x and y you only specify bound elements but not the whole combination. So dimension size of x and y is N while for Z, it is matrix on NXN size

5


sorry forgot to add page.

6

I think this issue was fixed in previous plotly.js versions.