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.