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

Loupe 4.5 Released with New Log Viewer for Web

Rapidly diagnose each error in any .NET application with our new Web Log Viewer and Exception root cause analysis, new in Loupe 4.5. New integration with Azure Service Bus and Azure Search enables full Loupe functionality without any Virtual Servers in Azure. Read more

Cloudflare Vulnerability Does Not Affect Us

The recently reported Cloudflare vulnerability where fragments of secure, encrypted user data could be exposed to a third party does not affect Gibraltar Software even though we use Cloudflare because we only route static content through the Cloudflare proxy for acceleration. Read more

We're out of our Last Data Center

Back in January of 2016 we decided to completely transition out of our data centers and into the cloud. On Sunday we finally shut down the last cluster of our hardware. Read more for how we did it and whether we would do it all over again if we had... Read more

Rock solid centralized .NET logging

Unlimited applications, unlimited errors, starting at $25/month