CODEWITHSUNDEEP
c#plotlinqpadplotly.net
vlad2048
vlad2048

Reputation: 111

How do I update the data in a chart?

I'm using Plotly.NET inside LINQPad:

How do I update the chart data in the button onclick handler ?

I want to avoid (for perf reasons):

I know this is possible in Python using plotly.graph_objects. I've tried accessing the underlying trace and setting the data on it, but this only works before dumping the Chart, not after.

I've created a gist with my initial attempt here: https://gist.github.com/vlad2048/0c90c14a0fb1778c17427a6ab262c01f

I've made a minimal example of what I want in a Python notebook. Here's how it looks (notice there is no flicker): enter image description here

Upvotes: 0

Views: 59

Answers (2)

vlad2048
vlad2048

Reputation: 111

I'm now pretty sure this isn't possible using only Plotly.NET as all it does is generate the HTML for the iframe as Joe pointed out.

The way the Python version works is by communicating with the Jupyter engine and send messages around (I haven't fully understood these layers though)

The way to do this I believe is:

  • Generate the chart html
  • Add an update(data, layout) function in the script tag that calls Plotly.react(data, layout) (need to use the HTMLElement id of the chart in the html)
  • Render that html in an iframe
  • Then execute that function inside the iframe from LINQPad when you want to update the charts

With a bit of luck I might be able to find the code to serialize that data/layout in Plotly.NET too

(btw, I'm a big fan of LINQPad @joe and I've hacked around in it quite a lot)

Upvotes: 1

Joe Albahari
Joe Albahari

Reputation: 30964

If you look inside the Plotly GenericChart class, you'll see that it defines a private ToDump method, which tells LINQPad what to output when you dump it. Here's what it basically does:

return new LINQPad.Controls.IFrame(GenericChart.toEmbeddedHTML(chart));

Hence you can use the same technique to manually dump a Plotly chart as follows:

new LINQPad.Controls.IFrame(GenericChart.toEmbeddedHTML(chart)).Dump();

By holding onto the LINQPad IFrame reference, you can later update its SrcDoc property:

using CS = Plotly.NET.CSharp;

int[] xs = [.. Enumerable.Range (0, 5)];
double[][] yss = [ [1, 2, 3, 4, 5], [5, 4, 3, 2, 1]];
var idx = 0;

var chart = CS.Chart.Scatter<int, double, string> (
    x: xs,
    y: yss [idx % 2],
    mode: StyleParam.Mode.Lines
);

var frame = new LINQPad.Controls.IFrame
    (GenericChart.toEmbeddedHTML (chart));

var btn = new LINQPad.Controls.Button ("Toggle", _ =>
{
    var trace = (Trace2D)chart.GetTraces() [0];
    trace.SetValue ("y", yss [++idx % 2]);
    frame.SrcDoc = GenericChart.toEmbeddedHTML (chart);
});

Util.VerticalRun (btn, frame).Dump();

Upvotes: 0

Related Questions