Working on Plot surface 3D. I am in need of some clarification

📊 Plotly Python
1

I am creating it as to where the x is set to DateTime.

the y value is not displaying correctly for the values i’m inputting. this might probably because of my lack of understanding of how to use it correctly.
The z index is also confusing on why it has 2 dimensions.

Some clarification on how they are used correctly.

2

Hi @izak,
Welcome to Plotly forum.

For a surface that theoretically is defined by an equation z = F(x, y), you must provide
x, y as 1d arrays, and z as a 2d array of shape (y.shape[0 ], x.shape[0]). Since you have x as a datetime, you have to associate an auxiliary numerical 1d array of the same length as the list of datetimes.

Here is a short example that can be adapted to your needs:

import numpy as np
import plotly.graph_objects as go
from datetime import datetime

d= [datetime(2019, 12, k).strftime("%m.%d.%y") for k in range(1,16)]

x = np.arange(1, 16)   
y = np.linspace(-1, 1, 20)
X, Y = np.meshgrid(x, y)
z = X*Y 
fig = go.Figure(go.Surface(x=x, y=y, z=z))  # x, y are  1D, while z is 2D
fig.update_scenes(xaxis_tickmode= 'array', xaxis_tickvals = x, xaxis_ticktext=d, )
fig.update_layout(width=800, height=800)

The 15-list, d, contains the strings giving datetimes.
x is an array of length 15. x[k] represents in the kth day in the list d.

Here z is computed by a formula, but you can provide z as a result of of your daily recordings.
z is 2d array.

In order to be displayed the datetimes as xaxis ticklabels, you have to define as tickvals the x-values, and as ticktext the list of strings defining the dates.

surf_datetime
surf_datetime800×800 70.2 KB

3

Please refer to my code below:

<script>                
            var xData = ['2013-10-04 22:23:00', '2013-11-05 22:23:00', '2013-12-06 22:23:00', '2014-01-07 22:23:00', '2014-02-08 22:23:00'];
        	var yData = [2,4,6,8,10];
        	var zData = [3,6,9,12,15];

            Plotly.newPlot('chart', [{
            	x: xData,
            	y: yData,
                z: [zData,zData],
                type: 'surface'
            }]);
</script>

result.

Capture1
Capture1710×457 34.6 KB

  1. I have x, y and z coordinates defined in their raw format which I would like to display on the graph.
  2. The y does not display the right coordinates as stated in the code (only up to y = 4 is displayed).
  3. Hence what should the z parameter for newPlot contain in order to display Z in its raw format as defined in zData.
4

@izak

Please change the post category to plotly.js. I’m not working with plotly.js but my feeling is that

z= [zdata, zdata]

isn’t an array of m rows and n columns, with m =len(y), n=len(x).