0

I am using plotly to make multiple graphs and django framework to present the graph to user. I am storing all the graphs in list, example: all_graphs=[graph1, graph2] I need to show only one graph at a time according to value selected in dropdown in HTML.

I am using javascript and jinja2 element for the same. Below is my javascript code: `

function graphshow(s){
      var id=Number(s[s.selectedIndex].id);
      var graph1 = {{ all_graphs.0 | safe}};
      Plotly.plot('id_of_div_to_show_graph', graph1, {});
    }

` The above code works perfectly but when i replace 0 in line 2 with 'id' which is the index value of graph to be shown the code doesn't work. The value stored in 'id' is correct i've already checked.

Taylor
  • 1
  • 2
  • `{{ all_graphs.0 | safe}}` is executed server side, while Javascript is executed client side, so you cannot do it this way. What you can do is to store all the grapes in a JSON array inside a Javascript variable, and then select the correct graph out of the populated Javascript variable. – β.εηοιτ.βε Nov 30 '22 at 19:43
  • Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – β.εηοιτ.βε Nov 30 '22 at 19:44
  • Hi @β.εηοιτ.βε How can I store all the grapes in a JSON array inside a Javascript variable, and then select the correct graph out of the populated Javascript variable? I've used the program `function graphshow(s){ var id=Number(s[s.selectedIndex].id); var graph1 = {{ all_graphs | safe}}; var graph2 = graph1[id] Plotly.plot('secondary_graph', graph2, {}); }` But using this program doesn't show the graph – Taylor Dec 01 '22 at 12:06

0 Answers0