Django Run Python script and Pass output to javascript file

Question

I am new to Django

What I need:

1 - Run a python Script 2 - pass data to javascript file

I don't know whether the sentence I am framing is technically correct in terms of Django.

The following is the javascript code and python code resp.

var trace2 = {
    x: [-0.100387678599, -0.841098362432, -0.086900337279, -0.418153015989, -0.197122458852, 0.0391933774019, -0.759329967599, -1.29266640992, 0.950624526622, 1.52725553555, 2.25231901948, 1.84936962902, 0.833618714205, 2.42998331172, 1.73583322891, 3.19694965552, -0.909512478385, 0.983932265051, -0.992449424459, 2.349425425, -1.60550784046, 2.68216122416, 2.22665169157, -0.775707830008, 0.569030921894, 0.310849282625, 2.39935206131, -1.66045702411, 3.76747878057, 3.05333459172, -3.35932368186, 3.43730482552, -3.07611001807, -0.842850343527, 3.50008556345, 0.165085596719, -0.339561268287, -1.74747448536, 3.56148886503, 1.8353330132, -1.90428086596, -0.912688959871, -2.37825362991],
    y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
    z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
    text: ["size:4",  "size:9",  "size:6",  "size:5",  "size:1",  "size:1",  "size:5",  "size:6", "size:10",  "size:1", "size:11",  "size:5", "size:11",  "size:8",  "size:4",  "size:2",  "size:9",
            "size:11", "size:9",  "size:9",  "size:4",  "size:2",  "size:7",  "size:6",  "size:3",  "size:4",  "size:3",  "size:5", "size:10",  "size:9",  "size:3",  "size:7",  "size:5",  "size:5",
            "size:10",  "size:4",  "size:3",  "size:1",  "size:7", "size:11",  "size:5",  "size:3",  "size:4"],
    mode: 'markers',
    marker: {
        color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
        size: [ 4,  9,  6,  5,  1,  1,  5,  6, 10,  1, 11,  5, 11,  8,  4,  2,  9,
                11,  9,  9,  4,  2,  7,  6,  3,  4,  3,  5, 10,  9,  3,  7,  5,  5,
                10,  4,  3,  1,  7, 11,  5,  3,  4],
        symbol: 'circle',
        line: {
            color: 'rgb(204, 204, 204)',
            width: 1
        },
        opacity: 0.9
    },
    type: 'scatter3d',
    };
var data = [trace2];
var layout = {margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 0
},
  showlegend : true};
    Plotly.newPlot('myDiv', data, layout, { modeBarButtonsToRemove:     ['sendDataToCloud'], displaylogo : false });

So i need to generate x ,y ,z in python script and embed those values into javascript.

Below is my python code :

from scipy.interpolate import griddata
import numpy as np
import matplotlib.pyplot as plt
from matplotlib import cm
from mpl_toolkits.mplot3d import Axes3D

x = np.random.random(100)
y = np.random.random(100)
z = np.random.random(100)

xi=np.linspace(min(x), max(x),10)

yi=np.linspace(min(y),max(y),10)

zi = griddata((x,y), z, (xi, yi), method='linear')
X,Y= np.meshgrid(xi,yi)
Z = np.nan_to_num(griddata((x,y), z, (X, Y), method='nearest'))

fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(x, y, z)

ax.plot_surface(X, Y, Z, rstride=1, cstride=1, cmap=cm.coolwarm,
                   linewidth=0, antialiased=False)

plt.savefig('surface.pdf')

print type(Z)

print "["
for row in Z:
 print str(list(row)) + ","
print "]"

So after following the comments i have come to the following point:

def index(request):

x = np.random.random(100)
y = np.random.random(100)
z = np.random.random(100)

xi=np.linspace(min(x), max(x),10)
yi=np.linspace(min(y),max(y),10)

zi = griddata((x,y), z, (xi, yi), method='linear')
X,Y= np.meshgrid(xi,yi)
Z = np.nan_to_num(griddata((x,y), z, (X, Y), method='nearest'))

fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(x, y, z)

ax.plot_surface(X, Y, Z, rstride=1, cstride=1, cmap=cm.coolwarm,
               linewidth=0, antialiased=False)

template = loader.get_template('polls/index.html')
context = {
    'Z' : Z,
}
return HttpResponse(template.render(context , request))

Thats my views.py

and my index.html is

<div class="displaySomething">
              <script>
                var xyz_data_array = {{ Z }}
                console.log(xyz_data_array);
              </script>
            <div>

Am i not linking the path to template properly ? or is there anything i need to do?

hard code your x to make sure its actually there ... "Z": [1,2,3] ... then make sure you see it in the rendered javascript — Joran Beasley
– Joran Beasley, Commented Jun 23, 2016 at 18:41

Joran Beasley · Accepted Answer · 2016-06-23 18:17:24Z

2

in views.py

def my_view(request,...):
    ...
    render("my_template.html",context={"xyz_list":[[1,2,3],[2,3,4],[4,5,6]]})

in my_template.html

...
<script>
    var xyz_data_array = {{ xyz_list }} ;
</script>

note that this only works because the array is made up of simple primatives ... if the data contained was more complicated than numbers or simple strings this likely would not work

edited Jun 23, 2016 at 18:17

answered Jun 23, 2016 at 18:02

Joran Beasley

114k13 gold badges167 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rudresh Ajgaonkar Over a year ago

I tried that. The xyz_data_array shows undefined in the log

Joran Beasley Over a year ago

then you are not sending the context to the page ... if you followed this example it should be [[1,2,3],[2,3,4],[4,5,6]]

Rudresh Ajgaonkar Over a year ago

ohhk. How Can i check whether my python script is actually generating some output?

Rudresh Ajgaonkar Over a year ago

Joran , While printing log , i was doing the following: console.log({{ data }}) Corrected it out like this : console.log("{{ data }}");

Rudresh Ajgaonkar Over a year ago

Thanks a Lot for your help though!

Collectives™ on Stack Overflow

Django Run Python script and Pass output to javascript file

I am new to Django

What I need:

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I am new to Django

What I need:

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related