Loupe Development: Charts

Over the last few weeks Gary has been blogging a lot about Loupe and now it’s my turn, but only a short post about a development problem and solution. In the future I’ll do a longer post on the technology behind the Web side of Loupe, but I wanted to highlight something I’ve just discovered while working on the charts, which are KendoUI based.We have a fairly extensive Javascript view model setup and use Knockout for much of our binding; the charts have a single custom binding handler served by central definitions of all of our charts.

One problem that had been nagging at me, that I hadn’t had time to dig into, was the chart titles on our bar graphs, which we display vertically. Some of the labels are long, thus squeezing the chart size, so I’d initially truncated long labels, but was never happy as the Kendo Chart labels don’t natively support tooltips. Thus I couldn’t have a truncated label with a full description as a tooltip. However, the charts are SVG based and SVG supports a ‘title’ element for tooltips, so you can utilize Kendo’s native templates to dynamically add SVG elements. These templates are pretty flexible, allowing simple statements, external templates with markup, as well as full JavaScript. This means that within my custom binder I can have the following:

var labelTemplate = function (value) {
  if (value.value.length > 10 {
    return value.value.substr(0,10) + "...<title>" + value.value + "</title>";
  return value.value + "<title>" + value.value + "</title>";

This simply truncates the passed in value if it’s too long and also adds the SVG title with the full value; the template function can then be passed to the template option for the labels on the categoryAxis.  I now don’t have to sacrifice the information displayed and I also get the tooltip which aids readability when titles are vertical.

Related Posts

PostSharp Diagnostics Now Supports Loupe in the Box

The latest update to PostSharp Diagnostics adds Loupe support, enabling extensive high-performance logging to be added to any .NET application with virtually no code changes. PostSharp even has a great free option for developers that complements Loupe Desktop! Read more

Loupe Agent for .NET Core Now Available

The first release of the Loupe Agent for .NET Core is also our first open source version of the Loupe Agent. This is the first step in our plan to open source the entire Loupe Agent to make it easier for anyone to extend and take advantage of what Loupe... Read more

We've Moved Loupe Service to App.OnLoupe.Com

Loupe Service now has a shorter, direct site name that's faster, anywhere in the world. Just to go App.OnLoupe.Com, the new CDN-accelerated endpoint for the Loupe Service. Your existing Agents and Loupe Desktops are unaffected by this change, but access to the web UI will be redirected to the new... Read more

Rock solid centralized .NET logging

Unlimited applications, unlimited errors, scalable from solo startup to enterprise.