How to pass a variable from c# into javascript for plotting in plotly.js

Question

I am trying to pass X and Y data generated in c# into plotly.js that update every second (or as often as programmatically possible). How would I reference in javascript a variable like x and y located in the .json file or c#? Ultimately, the javascript piece should run plotly with x and y taken from the c# code (Or in c#, I can generate a .json file every second). Plotly allows for dynamic updating, so this should be possible if the variables can be passed. I have included my starting point below:

C# Code:

dataPoint.X = 0;
dataPoint.Y = retrieveVariable(MachineInfoService.Instance.machineInfo.plot, 0);
xstr = dataPoint.X.ToString();
ystr = dataPoint.Y.ToString();
for (i = 1; i < numdataPoints; i++)
{
     dataPoint.X = i;
     dataPoint.Y = retrieveVariable(MachineInfoService.Instance.machineInfo.plot, i);
     xstr =xstr +", " +dataPoint.X.ToString();
     ystr = ystr +", "+ dataPoint.Y.ToString();
     Globals.PlotlyX = xstr;
     Globals.PlotlyY = ystr;
     graphData.Add(dataPoint);
}
            
webView.Navigate(new Uri("ms-appx-web:///Assets/index3.html"));

index3.html:

<html>
<head>
    <!-- Plotly.js -->
    <!----<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  -->

    <script src="plotly-latest.min.js"></script>
    <script type="text/javascript" src="../Assets/xydata.json"></script>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <!-- Plotly chart will be drawn inside this DIV -->
    <div id="graphDiv"></div>
    <script>

        
        jQuery.get('../Assets/xydata.json');
        Plotly.newPlot('plotly-chart', data, layout);
        
        
        

    </script>
</body>
</html>

xydata.json:

{
  "data": [
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 3, 6, 4, 5, 2, 3, 5, 4 ],
      "type": "scatter",
      "name": "Plot 1"
    },
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 4, 7, 8, 3, 6, 3, 3, 4 ],
      "type": "scatter",
      "name": "Plot 2"
    },
    {
      "x": [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
      "y": [ 0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2 ],
      "type": "scatter",
      "name": "Plot 3"
    }
  ],
  "layout": {
    "showlegend": true,
    "legend": { "orientation": "h" }
  }
}

Answer 1

I wouldn't write to a file for each plot update. The cleanest way would probably be to use Newtonsoft's Json.NET which helps you convert .NET objects to JSON. If you don't want to use another library, you could also just manually format a String into valid JSON, but that may be much more complicated/error prone.

After having new plot data, call the function via C#, like this:

PlotyObject data = new PlotyObject()
webView.Document.InvokeScript("updatePlotWithNewData", {JsonConvert.SerializeObject(data)})

OR

webView.Document.InvokeScript("updatePlotWithNewData", {"{...manually formatted JSON...}"})

In your index3.html file, you could do something like this to accept new data and update the Ploty chart:

<script>

    var plotlyData = {...}
    var layout = { ... }

    $(document).ready(function() {
        Plotly.newPlot('plotly-chart', plotlyData, layout);
    });

    function updatePlotWithNewData(newData) {
        plotlyData = JSON.parse(newData);
        Plotly.redraw('plotly-chart');
    }

</script>

How to pass a variable from c# into javascript for plotting in plotly.js

Question

1 answers

solution1
0 2020-10-30 20:37:47

How to pass a variable from c# into javascript for plotting in plotly.js

Question

1 answers

solution1 0 2020-10-30 20:37:47

solution1
0 2020-10-30 20:37:47