title: Monitoring datas with HighChart using .net6 and javaScript
body: <p>I have a BackgroundService class that is load 60 point of data at first load then add a point every minute to chart.I have used SignalR with HighChart in .Net6,the problem is that adding point in javascript class does not work.I want to add a point with it's data's at the end of the chart then shift it .
  this is backgroundService Class:</p>
  <pre><code> public class TxnRespHistoryBackgroundCaller : BackgroundService
  {
  
      public ITxnRespHistoryRepository Repository { get; }
      public IHubContext&lt;MonitoringHub&gt; HubContext { get; }
      private bool isFirstCall = true;
  
      public TxnRespHistoryBackgroundCaller(ITxnRespHistoryRepository repository, IHubContext&lt;MonitoringHub&gt; hubContext)
      {
          Repository = repository;
          HubContext = hubContext;
  
      }
      private static List&lt;string&gt; FailResps
      {
          get
          {
              try
              {
  
                  return new List&lt;string&gt;() { &quot;3&quot;, &quot;92&quot;, &quot;91&quot;, &quot;96&quot;, &quot;80&quot;, &quot;84&quot; };
  
              }
              catch
              {
                  return new List&lt;string&gt;();
              }
          }
      }
      protected override async Task ExecuteAsync(CancellationToken stoppingToken)
      {
  
          await Task.Run(async () =&gt;
          {
              while (!stoppingToken.IsCancellationRequested)
              {
              if (isFirstCall == true)
              {
                  try
                  {
                      var datasets = new List&lt;dynamic&gt;();
  
                      DateTime FinishTime = DateTime.Now;
  
                      try
                      {
                          FinishTime = Repository.GetMax(TxnRespHistory.Columns.EndTime);
                      }
                      catch
                      {
                          try
                          {
                              FinishTime = Repository.GetServerTime();
                          }
                          catch
                          {
                              FinishTime = DateTime.Now;
                          }
                      }
  
                      var yesterdayalltxn = await Repository.GetTxnHisByResp(59, TransactionType.Yesterday, FinishTime, FailResps);
                      var failtxn = await Repository.GetTxnHisByResp(59, TransactionType.fail, FinishTime, FailResps);
                      var alltxn = await Repository.GetTxnHisByResp(59, TransactionType.All, FinishTime, FailResps);
                      var suctxn = await Repository.GetTxnHisByResp(59, TransactionType.successful, FinishTime, FailResps);
  
  
                      datasets.Add(new
                      {
                          data = suctxn.Value,
                          label = &quot;Success&quot;,
                          Key = &quot;Success&quot;,
                          color = &quot;#308014&quot;
                      });
  
                      datasets.Add(new
                      {
                          data = failtxn.Value,
                          label = &quot;UnSuccess&quot;,
                          Key = &quot;Fail&quot;,
                          color = &quot;#ff0000&quot;
                      });
  
                      datasets.Add(new
                      {
                          data = alltxn.Value,
                          label = &quot;Total&quot;,
                          Key = &quot;Total&quot;,
                          color = &quot;#7094db&quot;
                      });
  
                      datasets.Add(new
                      {
                          data = yesterdayalltxn.Value,
                          label = &quot;Yesterday&quot;,
                          Key = &quot;Yesterday&quot;,
                          color = &quot;#b3b3b3&quot;
                      });
  
                      var result = new
                      {
                          success = true,
                          labels = alltxn.Key,
                          datasets = datasets
                      };
  
                      await HubContext.Clients.All.SendAsync(&quot;populatetxns&quot;, JsonConvert.SerializeObject(result));
                      isFirstCall = false;
                      
                  }
  
                  catch (Exception ex)
                  {
                      Console.WriteLine(ex.Message);
  
                  }
              }
              else
              {
  
                      try
                      {
                          var newtxn = Repository.AddtxnHisByResp(FailResps);
  
  
                          var result = new
                          {
                              labels = newtxn.Key,
                              datasets = newtxn.Value
                          };
  
                          await HubContext.Clients.All.SendAsync(&quot;populatetxns&quot;, JsonConvert.SerializeObject(result));
                          Thread.Sleep(10000);
                      }
                      catch (Exception)
                      {
  
                          throw;
                      }
                  }
              }
             
  
  
          });
      }
  
  
  
  
  
  }
  </code></pre>
  <p>and this is javaScript Code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let txnresphisbycha = {};
  $(document).ready(function () {
      let isFirstCallSuccess = false;
      
      var connection = new signalR
          .HubConnectionBuilder()
          .withUrl("/monitoringHub").build();
  
      connection.start().then(() =&gt; console.log("hubconnected")).catch(() =&gt; console.log(error));//establish connection
      
     
      connection.on("populatetxns", (result) =&gt; {
          if (isFirstCallSuccess == false)
              getChartData(JSON.parse(result));
          else
              addChartData(JSON.parse(result));
          });
  
      
  
      function getChartData(result) {
  
          var dataSets = new Array();
  
          for (i = 0; i &lt; result.datasets.length; i++) {
              var entity = {};
              entity.name = result.datasets[i].label;
              entity.data = result.datasets[i].data;
              entity.color = result.datasets[i].color;
              entity.type = 'area';
              dataSets.push(entity);
  
          }
       
          txnresphisbycha = Highcharts.chart('txnhisbyrespcha', {
              chart: {
                  zoomType: 'x',
                  alignTicks: false,
                  height: (10 / 22 * 100) + '%',// set ratio
                  
              },
  
              
              title: {
                  text: 'Total Transaction Chart'
                  
              },
              credits: {
                  text: ''
              },
              legend: {
                  enabled: true,
                  rtl: true,
                  y: 25,
                  margin: 0,
                  shadow: true,
                  verticalAlign: 'top',
                  itemStyle: {
                      cursor: "pointer",                  
                  }
              },
              tooltip: {
                  enabled: true,
                  rtl: true,
                  split: false,
                  shared: true,
                  xDateFormat: '%H:%M',
                  useHTML: true,
                  style: {
                      
                      fontSize: '15px',
                      rtl: true,
                  },
                  distance: 30,
                  padding: 5,
                  headerFormat: '&lt;span&gt;{point.key}&lt;/span&gt;&lt;br/&gt;'
              },
              xAxis: {
                  zoomEnabled: true,
                  categories: result.labels,
                  type: 'datetime',
                  tickInterval: 1,
                  labels: {
                      type: 'datetime',
                      step: 1,
                      rotation: 55,
                      style: {
                          fontSize: '11px'
                          
                      },
                  }
              },
  
              yAxis: {
                  title: {
                      text: "Quantity",
                      style: {
                          fontSize: '15px',
                          
                      },
                  },
                  opposite: false,
                  endOnTick: true,
                  showLastLabel: true,
                  
                  labels: {
                      style: {
                          fontSize: '15px',
                          
                      },
                      align: 'right',
                      x: -7,
                      y: 5,
                      formatter: function () {
                          return this.value;
                      }
                  }
              },
              plotOptions: {
                  series: {
                      pointRange: 1 * 60 * 1000,
                      fillOpacity: 0.2,
                      marker: {
                          symbol: 'circle'
                      }
                  }
              },
              series: dataSets,
              navigator: {
                  enabled: true
              }
          });
          
          isFirstCallSuccess = true;
          
      }
   
      function addChartData(result) {
          if (!isFirstCallSuccess) return;
          debugger;
          if (txnresphisbycha.series[0].data[txnresphisbycha.series[0].data.length - 1].category != result.labels[0]) {
  
              txnresphisbycha.series[0].addPoint({
                  x: result.labels[0],
                  function() {
                      for (var i in result.datasets) {
                       
                      y: result.datasets[i]
  
                      }
                  },
                  dataLables: { enabled: true }
              },
              true
             ,true)
  
              
              txnresphisbycha.update();
          }
  
      }
  
  })</code></pre>
  </div>
  </div>
  </p>