xaxis labels in line chart

[Peter]

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

[Peter]

snippet not found? Other url: http://dojo.telerik.com/elaBaMaS

[Peter]

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.

[Peter]

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

[Peter]

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

[Tsvetina]

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

[Peter]

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});

 

[Tsvetina]

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