Dynamic Plotly graphs from codebehind in C#

Question

I'm trying to create a webpage that dynamically creates new plotly graphs based on dynamically changing files. I'm having trouble accessing plotly functions from codebehind using ScriptManager.RegisterClientScriptBlock. Maybe I am approaching this from the wrong direction but here is the gist of what I am doing.

Codebehind:

    ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "dayPop", "<script>doGraph();</script>", false);

HTML:

<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>

Script:

    <script>
    var trace1 = {
        mode: 'lines',
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17]
    };

    var data = [trace1];

    //doGraph('myDiv');

    function doGraph() {
        var GRAPHONE = document.getElementById('myDiv');
        Plotly.newPlot(GRAPHONE, data);
    }
    </script>

Everything works great when I use the commented out line but Not from the codebehind. Maybe someone here has experience doing this?

Answer 1

<script>
$( document ).ready(function() {
    doGraph();
});
</script>

The problem is that, I suppose you are using jquery so your code should look like this for the script. It is possible to call the doGraph() , before the browser is render the div, because of that you should execute it after the page is loaded. If you don't use jquery you can attach this method on body onload function. But I strongly advise you to take a look into jquery.