Search code examples
javascriptenumsdygraphs

Represent enum data in dygraphs

I need to represent graphs with enum data (mainly signals which values are a string changing over the time). I am using dygraphs and I have thought in a solution using annotations and the underlayCallback to fill the color of the canvas depending of the value of the signal.

what I want to get

I am not sure if this solution is very inefficient but right now that is all I can think.

The solution would be something similar to the jsfiddle I attach but with all the process of the data insertion done automatically. I am going to work in this workaround and I think maybe another people have had the same need.

If you are familiar with dygraph and you have any suggestion, improvement or comment, please let me know.

http://jsfiddle.net/Lucidio/wwb6qdan/

var highlight1_start = 0;
var highlight1_end = 2;
var highlight2_start = 2;
var highlight2_end = 6;
var highlight3_start = 6;
var highlight3_end = 8;

var color1 = "rgba(255, 255, 102, 1.0)";
var color2 = "rgba(0, 255, 255, 1.0)";

g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y\n" +
    "0,1\n" +
    "1,1\n" +
    "2,1\n" +
    "3,1\n" +
    "4,1\n" +
    "5,1\n" +
    "6,1\n" +
    "7,1\n" +
    "8,1\n", {
    // options go here. See http://dygraphs.com/options.html
    legend: 'none',
    valueRange : [0,1.05],
    animatedZooms: true,
    drawGrid : false,
    underlayCallback: function (canvas, area, g) {
        var bottomy = g.toDomYCoord(0);
        var topy = g.toDomYCoord(1)
        
        var bottomx = g.toDomXCoord(highlight1_start);
        var topx = g.toDomXCoord(highlight1_end);
        canvas.fillStyle = color1;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
        
        var bottomx = g.toDomXCoord(highlight2_start);
        var topx = g.toDomXCoord(highlight2_end);
        canvas.fillStyle = color2;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
        
        var bottomx = g.toDomXCoord(highlight3_start);
        var topx = g.toDomXCoord(highlight3_end);
        canvas.fillStyle = color1;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
              
    },
    zoomCallback: function() {
      g.updateOptions({valueRange: [0, 1.05]});
    }

});

g.ready(function() {
    g.setAnnotations([
    {
      series: "Y",
      x: "1",
      shortText: "ENUM1",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    },
    {
      series: "Y",
      x: "4",
      shortText: "ENUM2",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    },
    {
      series: "Y",
      x: "7",
      shortText: "ENUM1",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    }
    ]);
  });
.dygraph-title {
    color: gray;
}

#graph{
  height: 65px;
  margin-top : 30px;
  margin-right : 20px;
}

.annotation{
  text-align: center;
}
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>

Solution

  • I have been working in this question and I have got the result I show below. With this functionality is possible to build charts where the information are strings with the value changing over time. I am going to finish the functionality and I will upload the way I have done it.

    Graphs with enum data