Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
www Changes Oct 18, 2019
Butterfly.Example.RealtimeStreamingChart.csproj Changes Oct 17, 2019
Program.cs Changes Oct 18, 2019 Changes Oct 18, 2019

Real-time Streaming Chart Example

A simple real-time streaming chart using Smoothie Charts, Butterfly.Clients and Butterfly.Web

You should see something like this after running the demo...


Note this isn't just generating random data in the client. The server is streaming real-time data to the client.

This example shows...

  • A plain HTML/JS client subscribing to the Subscription API via the Butterfly.Clients web client to receive updates on the "data-feed" channel and showing the values in a Smoothie Chart
  • Implementing the Subscription API from Butterfly.Web on the server

This example uses a plain HTML/JS client but the Butterfly.Clients web client is vanilla javascript and can be used with any framework.

This example uses the EmbedIO web server but Butterfly.Web supports multiple web servers.

Get the Code

git clone

Run It

cd butterfly-server\Butterfly.Example.RealtimeStreamingChart\www
npm install
cd ..
dotnet run www

Now open a browser to http://localhost:8000/.

You can see the server code that runs at Program.cs. This is based on Smoothie Charts Tutorial but changes the example to receive the real-time data from Butterfly.Server.

You can’t perform that action at this time.