• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    How to Add Labels to a Dimple JS Line Chart

    Matt Galvin

    By Matt Galvin
    May 17, 2016

    I was recently working on a project that was using DimpleJS, which the docs describe as “An object-oriented API for business analytics powered by d3”. I was using it to create a variety of graphs, some of which were line graphs. The client had requested that the line graph display the y-value of the line on the graph. This is easily accomplished with bar graphs in Dimple, however, not so easily done with line graphs.

    I had spent some time Googling to find what others had done to add this functionality but could not find it anywhere. So, I read the documentation where they add labels to a bar graph, and “tweaked” it like so:

    var s = myChart.addSeries(null, dimple.plot.line);
    .
    .
    .
    /*Add prices to line chart*/
    s.afterDraw = function (shape, data) {
      // Get the shape as a d3 selection
      var s = d3.select(shape);
      var i = 0;
      _.forEach(data.points, function(point) {
        var rect = {
        x: parseFloat(point.x),
        y: parseFloat(point.y)
      };
      // Add a text label for the value
      if(data.markerData[i] != undefined) {
        svg.append("text")
        .attr("x", rect.x)
        .attr("y", rect.y - 10)
        // Centre align
        .style("text-anchor", "middle")
        .style("font-size", "10px")
        .style("font-family", "sans-serif")
        // Format the number
        .text(data.markerData[i].y);
      }
      i++
    });
    

    Some styling still needs to be done but you can see that the y-values are now placed on the line graph. We are using lodash on this project but if you do not want to use lodash, just replace the _.forEach (line 10)and this technique should just plug in for you.

    If you’re reading this it’s likely you’ve run into the same or similar issue and I hope this helps you!

    visualization javascript


    Comments