2
I've tried adding the buttons to download the graph that has been created in Plotly.js. But I've been able to download in only one format and I'm struggling to add another button for downloading in some other format.
Here is the code for downloading the chart:
var config = { // ... other chart configuration options ... // Add updatemenus for format selection updatemenus: [{ buttons: [{ method: 'restyle', args: ['visible', [true, false]], // Show SVG trace, hide PNG trace label: 'SVG' }, { method: 'restyle', args: ['visible', [false, true]], // Show PNG trace, hide SVG trace label: 'PNG' }], showactive: false, type: 'buttons', direction: 'left', pad: {'r': 10, 't': 10}, x: 0.1, xanchor: 'left', y: 1.1, yanchor: 'top' }] }; // Add event listener for download button document.getElementById('download-btn').addEventListener('click', function() { // Get currently selected format (SVG or PNG) var format = network.data[0].visible[0] ? 'svg' : 'png'; // Convert the Plotly chart to the selected format Plotly.downloadImage(network, { format: format, width: 1200, height: 800, filename: 'my_chart', scale: 2 }).then(function(dataUrl) { // Create a temporary link element to download the image var link = document.createElement('a'); link.href = dataUrl; link.download = 'my_chart.' + format; // Set filename with appropriate extension document.body.appendChild(link); link.click(); document.body.removeChild(link); // Remove the temporary link element after download }); }); // Update the chart with the configured options Plotly.updateConfig(config);As you can see that even after adding updatemenus I'm being unable to get 2 buttons in a dropdown menu format.
Here is the full code:
<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Visualization </title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script> <!--<script src="https://cdn.jsdelivr.net/npm/[emailprotected]/dist/FileSaver.min.js"></script>--> <style> .graph-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .main-panel { width: 100%; height: 800px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .side-panel { position: fixed; top: 0; bottom: 0; right: -300px; width: 300px; background-color: #f2f2f2; transition: right 0.5s; overflow-y: auto; padding: 20px; } .side-panel.open { right: 0; } .arrow { position: absolute; top: 20px; left: 20px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #2196F3; cursor: pointer; } .arrow.open { transform: rotate(180deg); } </style> </head> <body> <div class="oikita-style"> <div id="network" class="oikita-style"> <button id="download-btn">Download Chart</button> </div> <div id="graph" class="oikita-style"> <div class="oikita-style"></div> </div> </div> <div id="main"> <!-- <button class="oikita-style" onclick="openNav()">? Open Sidebar</button> --> </div> <script> function openNav() { document.getElementById("graph").style.width = "500px"; document.getElementById("main").style.marginLeft = "500px"; } function closeNav() { document.getElementById("graph").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } const sidepanel = document.querySelector('.side-panel'); const arrow = document.querySelector('.arrow'); arrow.addEventListener('click', function() { sidepanel.classList.toggle('open'); arrow.classList.toggle('open'); }); //read the data from the json file fetch("data2.json") .then(response => response.json()) .then( data => { //This part of the code is used to used initialize the variables which will be used to create a network graph //Initializing array for storing the variables var nnodes = data.nnodes; var nedges = data.nedges; var ncones = data.ncones; var x = data.x; var y = data.y; var z = data.z; var edge_x = data.edge_x; var edge_y = data.edge_y; var edge_z = data.edge_z; var pressure_edge_gradient = data.pressure_gradient; console.log(data) // Velocity and the max and min values of the velocity var velocity = data.velocity; var max_velocity = data.max_velocity; var min_velocity = data.min_velocity; //This part of code is used to initialize the variables which will be used to create cones var x_cone = data.x_cone; var y_cone = data.y_cone; var z_cone = data.z_cone; var u_cone = data.u_cone; var v_cone = data.v_cone; var w_cone = data.w_cone; console.log(x_cone[0]) //Keeping a list of true and false values for the concentration and the cones which are used while displaying through layout var TrueList_cones = []; var FalseList_cones = []; for (var i = 0; i < ncones; i++) { TrueList_cones.push(true); FalseList_cones.push(false); }; //This part of the code is used to create a pressure graph //Creating Edges for pressure graph var pressure_trace_edges = { x: edge_x, y: edge_y, z: edge_z, mode: 'lines', line: { colorscale: "YlOrRd", color: pressure_edge_gradient, width: 5, showscale: true, //decrease the size of the colorbar colorbar: { thickness: 20, len: 0.5, x: 0.9, y: 0.5, title: { text: "Pressure", side: "right" } } }, type: 'scatter3d', name: "Pressure Edges", hoverinfo: 'none', visible: true, showlegend: true, //set the position of the legend }; //This part of the code is used to create a velocity graph //Creating nodes for velocity graph var velocity_trace_nodes = { x: x, y: y, z: z, mode: 'markers', marker: { size: Array(nnodes).fill(6), sizeref: 0.5, color: "rgb(200,200,200))", showscale: false, }, type: 'scatter3d', name: "Velocity Nodes", hoverinfo: 'none', visible: false, showlegend: false, }; //Creating edges for velocity graph var velocity_trace_edges = { x: edge_x, y: edge_y, z: edge_z, mode: 'lines', line: { color: "rgb(200,200,200)", width: 5, showscale: true, }, type: 'scatter3d', name: "Velocity Edges", hoverinfo: 'none', showlegend: false, visible: false, showscale: false, }; //Creating cones for velocity graph var velocity_trace_cones =[]; //create the cones for (var i = 0; i < ncones; i++) { var coneColor = velocity[i]; var color = 'rgb(' + (coneColor - min_velocity) * 255 / (max_velocity - min_velocity) + ', 0, ' + (max_velocity - coneColor) * 255 / (max_velocity - min_velocity) + ')'; // create the color based on the velocity var coneColorScale = [[0, color], [1, color]]; var single_cone = { x: [x_cone[i]], y: [y_cone[i]], z: [z_cone[i]], u: [u_cone[i]], v: [v_cone[i]], w: [w_cone[i]], type: 'cone', anchor: 'tail', colorscale: coneColorScale, showscale: false, name: 'Velocity Cones', hoverinfo: 'none', visible: false, sizeref: 0.5 }; velocity_trace_cones.push(single_cone); } var nscale = [0.5, 1.0, 2.0, 4.0] var steps = []; for (var i = 0; i < nscale.length; i++) { var visible = Array(ncones).fill(true); // all cones // visible[0] = true; // set the 0th cone to be visible var step = { method: "update", args: [{visible: visible, sizeref: nscale[i]}], label: nscale[i]}; steps.push(step); }; var sliders = { x: 0.1, y: 12.0, len: 0.8, pad: {t: 50}, steps: steps, }; var data = [velocity_trace_nodes, velocity_trace_edges, ...velocity_trace_cones, pressure_trace_edges]; var layout = { updatemenus: [ { x: 1.5, y: 15.5, yanchor: "top", xanchor: "left", showactive: false, direction: "Right", height: 8000, width: 8000, buttons: [ { method: "restyle", args: ["visible", [true,true,...TrueList_cones, false]], label: "Velocity" }, { method: "restyle", args: ["visible", [false,false,...FalseList_cones, true]], label: "Pressure" }, ], }, ], xaxis: { //visible: true, //showgrid: true, title:{ text: "Values", font: { size: 200 // Set the desired font size for x-axis title } }, }, yaxis: { //visible: false, //showgrid: false, title: "Values_2", font: { size: 2 // Set the desired font size for y-axis title } }, zaxis: { //visible: false, //showgrid: false, title:{ text:'Values', font: { size: 20 // Set the desired font size for z-axis title } }, }, sliders: [sliders], // add the slider to the layout }; // Define Plotly chart configuration var config = { // ... other chart configuration options ... // Add updatemenus for format selection updatemenus: [{ buttons: [{ method: 'restyle', args: ['visible', [true, false]], // Show SVG trace, hide PNG trace label: 'SVG' }, { method: 'restyle', args: ['visible', [false, true]], // Show PNG trace, hide SVG trace label: 'PNG' }], showactive: false, type: 'buttons', direction: 'left', pad: {'r': 10, 't': 10}, x: 0.1, xanchor: 'left', y: 1.1, yanchor: 'top' }] }; // Add event listener for download button document.getElementById('download-btn').addEventListener('click', function() { // Get currently selected format (SVG or PNG) var format = network.data[0].visible[0] ? 'svg' : 'png'; // Convert the Plotly chart to the selected format Plotly.downloadImage(network, { format: format, width: 1200, height: 800, filename: 'my_chart', scale: 2 }).then(function(dataUrl) { // Create a temporary link element to download the image var link = document.createElement('a'); link.href = dataUrl; link.download = 'my_chart.' + format; // Set filename with appropriate extension document.body.appendChild(link); link.click(); document.body.removeChild(link); // Remove the temporary link element after download }); }); // Update the chart with the configured options Plotly.updateConfig(config); Plotly.newPlot('network', data, layout); }) </script> </body></html>Here is the JSON file for the inputs:
{ "nodes": [ 1, 2, 3 ], "edges": [ [ 1, 2 ], [ 2, 3 ], [ 3, 1 ] ], "nnodes": 39, "nedges": 52, "ncones": 52, "x": [ 121.028495788574, 123.352821350098, 140.785949707031 ], "y": [ 116.316551208496, 102.437530517578, 107.810768127441 ], "z": [ 59.3678894042969, 85.5968399047852, 94.6310577392578 ], "edge_x": [ 121.028495788574, 123.352821350098, null, 123.352821350098, 140.785949707031, null, 140.785949707031, 135.483871459961, null ], "edge_y": [ 116.316551208496, 102.437530517578, null, 102.437530517578, 107.810768127441, null, 107.810768127441, 96.6482315063477, null ], "edge_z": [ 59.3678894042969, 85.5968399047852, null, 85.5968399047852, 94.6310577392578, null, 94.6310577392578, 118.475326538086, null ], "pressure_gradient": [ 5319.79906208402, 5319.22370839109, null, 5319.22370839109, 5317.72283129859, null, 5317.72283129859, 5316.47093892259, null ], "x_cone": [ 122.190658569336, 132.069385528564, 138.134910583496 ], "y_cone": [ 109.377040863037, 105.12414932251, 102.229499816895 ], "z_cone": [ 72.482364654541, 90.1139488220215, 106.553192138672 ], "u_cone": [ 0.07808779308784423, 0.856375076649549, -0.19742365213284796 ], "v_cone": [ -0.4662780954246829, 0.26395186657205366, -0.4156386692370525 ], "w_cone": [ 0.8811850170638401, 0.44379177575368384, 0.8878448052522355 ], "velocity": [ 773.581933996682, 3497.60743046076, 2022.14115616565 ], "max_velocity": 31155.0780437374, "min_velocity": 196.878430585795 }Please feel free to make the changes and let me know if there is anything wrong with placement of 'var layout' and 'var config' in the above code.
Answers
This line doesn't work:
Plotly.updateConfig(config);That function doesn't exist. Remove that line.
Because Plotly.newPlot('network', data, layout); is called after the previously mentioned it is not executed and no plot and no dropdown buttons show up.
You can actually just pass the config to newPlot:
Plotly.newPlot('network', data, layout, config);https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot
related
Rendering problems using flexbox in Firefox and Chrome 48
0
This question already has answers here: ......Make non-zero value as mid-point for horizontal bar chart?
0
In Chart.js 2.x, is there any way to do a horizontal bar chart so that the mid-point where bars go left or right is not zero?I h......amCharts - adding padding for a smoothed line serial chart
0
Can I have amCharts compute a maximum value for the Y axis such as the smoothed line isn't stretched outside the chart div area?......Having only one yaxis but at the right side on Highcharts.js
0
I am working on this demo, and I am seeking to have only one yaxis on right side of the chart.I tried to set the lineWidth to 0 ......labelLine disappears when adjusting the font (echarts4r)
0
I have this code:library(echarts4r)data1 <- data.frame( one = LETTERS[1:3], two = c(130, 154, 543))data1 |> e_charts(on......