xaxis labels in line chart

8 posts, 0 answers
  1. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 02 Sep Link to this post

    Hi,
    how can I add x-axis labels and gridlines for every full 10 second in format "hh:mm:ss" for this chart: waveform chart ?

    The start time is in variable t0, end in tend. The time for an sample n is: t0 + dt * n .

    Peter

  2. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 02 Sep in reply to Peter Link to this post

    snippet not found? Other url: http://dojo.telerik.com/elaBaMaS
  3. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 02 Sep in reply to Peter Link to this post

    a p was missing: http://dojo.telerik.com/@Peter/AqoFOzUp
    the copy is ok: http://dojo.telerik.com/elaBaMaS

    please allow edit the posts for 10.. 20 minutes to correct mistakes. Or add a preview before posting.

  4. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 02 Sep Link to this post

    Hi,
    here is a version which plot also the 10 second major gridlines and ticks. http://dojo.telerik.com/ovEYAMOQ

    But no category axis labels are shown. It would be helpfull if at first only the array indeces (n) are shown. With a template function the times can calculated by t0 + dt * n.

    Peter

  5. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 03 Sep in reply to Peter Link to this post

    to get the indeces I have to assign an array with the indices to categoryAxis.categories?  Or better with the relative time in ms.

    A working solution: http://dojo.telerik.com/APUcuwEn


  6. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 04 Sep Link to this post

    Hello Peter,

    Looking at the latest Dojo, it seems like you implemented most of your requirements already. If you prefer to bind the Chart via a DataSource that could also request remote data, you could join the values and categories in common objects and use field binding in the series:
    var data = [];
    for (i = 0; i < totaltime / dt; i++) {
      data[i] = { value: getSample(), category: i * dt * 1000};
    }

    series: [{
      type: "line",
      markers: { visible: false },
      color: "black",
      width: 1,
      field: "value",
      categoryField: "category",
      missingValues: "gap",
    }],
    categoryAxis: {
      majorGridLines: {
        skip: skipGrid,
        width: 1,
        visible: true,
        step: gridSeconds / dt
      },
      majorTicks: {
        skip: skipLabel,
        visible: true,
        step: labelSeconds / dt
      },
      labels: {
        visible: true,
        step: labelSeconds / dt,
        template: formatLabels,
      }
    }

    Additionally, could you confirm if setting the category axis labels properties is indeed needed with each data change? The Chart still looks good if I remove this code:
    var skipGrid = getSkip(t0ms, gridSeconds);
    var skipLabel = getSkip(t0ms, labelSeconds);
    chart.setOptions({
        categoryAxis: {
            majorGridLines: { skip: skipGrid },
            majorTicks: { skip: skipLabel },
            labels: { skip: skipLabel },
        }
    });

    and leave only:
    setInterval(function () {
      var chart = $("#chart").data("kendoChart");
      var data = chart.options.series[0].data;
      for (i = 0; i < 1 / dt; i++) { // add data for 1 sec
        t0ms += dt*1000;
        data.splice(0, 1);
        data.push({value: getSample(), category: t0ms});
      }
      chart.refresh();
    }, 1000);

    Apart from cleaning the code, this would result in better performance in the long term because each setOptions call re-creates the Chart from scratch.

    Here is the latest version of the example that I produced:
    http://dojo.telerik.com/@tsveti/UtEmUseF

    Please tell if something is still missing or does not work as needed.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Peter
    Peter avatar
    81 posts
    Member since:
    May 2016

    Posted 04 Sep in reply to Tsvetina Link to this post

    Hello Tsvetina,
    yes, I want get the date remote. Thank you for the hint with object + field binding.

    But in your example it is not nice that the time at the labels *) are changing. My version - keep the label time, but shift to left - is more common for such realtime chart.

    With my notebook (Core i7) I profiled both versions as local html file (not in dojo) with chrome (DevTools / Performance, no screenshots), 11 timer loops and both versions need ~ 2s scripting time  with the total time ~ 10 s. So omitt setOptions has no effect for the scripting time?

    Peter

    *)  the time is not correct, you push as new catagory alsway t0ms which is time of first sample, data[0]. But in the format function only the relative time is expected: data.push({value: getSample(), category: totaltime*1000});

     

  8. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 05 Sep Link to this post

    Hello Peter,

    Sorry about the wrong time assignment, I mostly wanted to show the object binding and did not keep close attention to the time calculation.

    With regard to the setOptions usage, as the Chart is relatively simple, it may not lead to visible delays, so if your tests show that it works well, you can keep it like this.
    Another possible way to apply the new settings is to set the new values directly through the Chart options object:
    var skipGrid = getSkip(t0ms, gridSeconds);
    var skipLabel = getSkip(t0ms, labelSeconds);
    chart.options.categoryAxis.majorGridLines.skip = skipGrid;
    chart.options.categoryAxis.majorTicks.skip = skipLabel;
    chart.options.categoryAxis.labels.skip = skipLabel;
    chart.refresh();

    The refresh() call is enough for the new options get applied.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top