How would I go about passing data from the backend to plotly js without reloading the page?

plotly.js
1

Hello!

I was wondering if someone could give me some guidance on updating data for a plotly dashboard without reloading the page.
Here is the simplest code to exemplify this issue.

{% block content %}
<body>
    <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  </div>
</body>
{% endblock %}

{% block footer_scripts %}
<script type="text/javascript">
var myPlot = document.getElementById('myDiv'),
    d3 = Plotly.d3,
    N = 16,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y, type:'scatter',
            mode:'markers', marker:{size:16} } ],
    layout = {
        hovermode:'closest',
        title:'Click on Points'
     };

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

I have a div with one graph. It is populated using random data. This example is taken more or less right from the plotly docs. Now to get data from the server I can replace the plotly data points with a jinja template and pass data from the backend; easy enough. However, if a user wants to filter the graph down (let’s say I had a on click to load more specific data for that data point), I would want to pass that request onto the backend (for me flask) and then return the new data. however, I am pretty sure this reloads the page as it is a POST. Can I get some pointers on not reloading the whole dashboard?

I am using flask and jinja2, but I would assume the principle applies to any web framework.

Thanks,
James

Tags: Flask, Jinja2, Full-Stack, Plotly, Best Practices

2

Hey Jfrick100 , just make use Ajax for seamless updating of backend data onto chart . Following example can be useful to you :slight_smile: .

// Dont' use the values 'as is' , this is just an example !!
var trace = {
    x: xAxisValues,
    y: yAxisValues,
    z: zAxisValues,
    name: 'ReOptim8' ,
    mode: 'markers' ,
    type: 'scatter3d' 
};

// As the name suggests , it will do an update with all form params
// Dont' use the values 'as is' , this is just an example !!
function ChartUpdate () {
		// Ajax call starts
	    $.ajax ({
	        url:'/YourApplicationName/YourBackEndMethodCall',
	        type:'POST',
	        contentType:'application/x-www-form-urlencoded;charset=UTF-8',
	        dataType:'json',
	        data: $('#YourChartName').serializeArray (),
	        beforeSend: function() {
	        	// Hide the chart
	        	// Show the busy spinner
	        },
	        complete: function(){
	            // Hide the busy spinner
                    // Show the chart
	        },
	        success: function (data) {	           
	                        // Update the 3D chart values
							// Dont' use the values 'as is' , this is just an example !!
	                        trace.x= data.XAxisValues;
	                        trace.y= data.YAxisValues;
	                        trace.z= data.ZAxisValues;
							
	                Plotly.redraw('chartDiv');	            
	        },
	        error: function (xhr, status, error) {
	        	// Show some error 
	            return false;
	        }
	    // Ajax call ends
	    });
}
3

Hey thanks very much for this. I ended up doing something very similar with just plain old javscript. For those who prefer jquery, this is the perfect solution. Thanks.