Push realtime data to kendo chart with signalr

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    May 2015

    Posted 17 Jun 2015 Link to this post

    I am building an application in ASP.NET MVC where I am building different Kendo charts to show realtime data with SignalR. I am trying to let the Hub push data constantly to the chart. But I only manage to let the chart update its data on page load, not realtime.

     

    <script src="@Url.Content("~/Scripts/jquery.signalR-2.2.0.min.js")"></script>
    <script src="@Url.Content("~/signalr/hubs")"></script>
     
    <script>
        var hub,
          hubStart;
     
        $(function () {
            var hubUrl = "http://localhost:52373/signalr/hubs";
            var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
            hub = connection.createHubProxy("serverHub");
            $.connection.hub.logging = true;
            hubStart = connection.start();
        });
     
    </script>

    @(Html.Kendo().Chart<Model.ServerState>()
                  .Name("server1")
                  .Title(title => title
                      .Text("Server 1")
                      .Color("White")
                      .Font("25px Arial")
                  )
                  .Legend(legend => legend
                      .Color("Gray")
                      .Position(ChartLegendPosition.Bottom)
                      .Font("20px Arial")
                  )
                  .ChartArea(chartArea => chartArea
                      .Background("transparent")
                  )
                  .SeriesDefaults(seriesDefaults =>
                      seriesDefaults.Line().Style(ChartLineStyle.Smooth)
                  )
                  .Series(series =>
                  {
                      series.Line(model => model.Performance.Memory).Name("Memory");
                      series.Line(model => model.Performance.Processor).Name("Processor");
                  })
                  .CategoryAxis(axis => axis
                      .Title(categoryTitle => categoryTitle
                        .Text("Time")
                        .Font("25px Arial"))
                      .Color("Gray")
                      .Labels(labels => labels
                          .Font("20px Arial"))
                      .MajorGridLines(lines => lines.Visible(false))
                  )
                  .ValueAxis(axis => axis
                      .Numeric().Labels(labels => labels.Format("{0}%"))
                      .Line(line => line.Visible(false))
                      .AxisCrossingValue(-10)
                      .Color("Gray")
                      .Labels(labels => labels
                          .Font("20px Arial"))
                  )
                  .Tooltip(tooltip => tooltip
                      .Visible(true)
                      .Format("{0}%")
                    )
                  .DataSource(source => source
                      .SignalR()
                      .AutoSync(true)
                      .Transport(transport => transport
                          .Promise("hubStart")
                          .Hub("hub")
                          .Client(c => c
                              .Read("read"))
                          .Server(server => server
                              .Read("read")
                              ))
                      .Schema(schema => schema
                          .Model(model =>
                          {
                              model.Id("Id");
                              model.Field("Id", typeof(int)).Editable(false);
                              model.Field("Memory", typeof(float));
                              model.Field("Processor", typeof(float));
                          }
                          )
                ))
    )

     

    //Best case:
    public ServerStateEvent Read()
            {
            //Inside thread which pushes an message containing the object to kendo chart
                    Clients.All.sendMessage(msg);
             }
    //Current case, this method has to be called by kendo chart to update its data realtime
     public ServerStateEvent Read()
            {
             //this method gets data and returns it to kendo chart
                    return msg;
             }

    What I want is the "best case" where the Hub pushes data with the sendMessage function to kendo. This does not seems possible?

    The current case works but only one time, the autoSync in kendo does not help.

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 19 Jun 2015 Link to this post

    Hello,

    If I understand correctly, you'd like the SignalR hub to push all records to the chart on each change?
     
    What we usually do is to hook the CRUD methods of the SignalR hub. This way the data source can sync up based only on what has changed without transferring all the data.

    I'm attaching a sample application that demonstrates this. Also find attached the hub source code.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top