Date Formatting Breaks with 2.0.0

Question

Been using 1.1.1 for a while and decided to try upgrading to 2.0.0. With 1.1.1, the following snippet works as expected:

axes: {
    x: {
        axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
        valueFormatter: Dygraph.dateValueFormatter,
        ticker: Dygraph.dateTicker
    }
},
xValueParser: function (x) { return 1000 * x; },

Under 2.0.0, the same breaks interactivity—mouseovers stop functioning and the graph legend no longer updates. What must I change here to support 2.0.0? JavaScript is not my strong suite.

Thank you.

Answer 1

As I said before the only thing that was not working in your code was the valueFormatter. You got a time with the structure "201609260507.06" and you multiplied it by 100 to remove the dot. Then you had a number with the date in a custom format.

What I have done is to create a custom value formatter which gets the value in that format, parse the number to a string, and get all the information about the date in that string. You can modify the formatDate function (at the bottom of the javascript code) the way you want.

I hope that this will be a real solution for you. Below you have the code.

https://jsfiddle.net/Lucidio/9jgtse5o/2/

---

UPDATED

In the case you want to use the unix time in milliseconds (i.e: 1491483906), then you can create a new javascript date from the date

valueFormatter: function(ms){
    var date = new Date(ms);
    return date;
},

And if you need you can use also a formatter function to plot in the date exactly what you want before returning the date

---

var data = "date,totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn\n" +
	  "201609260505.06,1926,-1641,-64,-202,-1534,0,0,0\n" +
	  "201609260506.06,1060,-1230,-101,-68,-1187,0,0,0\n" +
	  "201609260507.06,3127,-2421,-123,-79,-2383,0,0,0\n" +
	  "201609260508.06,5624,-2518,-45,-623,-2187,0,0,0\n" +
	  "201609260509.06,998,-1190,-100,-45,-1160,0,0,0";
	q = new Dygraph(
	  document.getElementById("qdiv"),
	  data, {
	    // Appears axisLabelColor is no longer supported in 2.0
	    // axisLabelColor: 'darkgrey',
	    // logscale: true,
	    // labelsDiv: 'qldiv',
	    title: 'queues',
	    titleHeight: 32,
	    axes: {
	      x: {
	        axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
	        valueFormatter: function(ms){
          		var formattedDate = formatDate(ms);
          		return formattedDate;
          },
	        ticker: Dygraph.dateTicker
	      }
	    },
	    xValueParser: function(x) {
	      return 1000 * x;
	    },
	    // xValueParser: function (x) { return 1000 * parseInt(x); },
	    fillGraph: true,
	    stackedGraph: true,
	    // strokeBorderWidth: 1,
	    // strokeWidth: 2,
	    // totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn
	    visibility: [false, false, true, true, true, true, true, false],
	    // colors: ['black', 'black', 'orange', 'blue', 'green', 'purple', 'yellow', 'red'],
	    colors: ['black', 'black', 'coral', 'dodgerblue', 'forestgreen', 'blueviolet', 'gold'],
	    // iWantHue default soft
	    // colors: ['black', 'black', '#cb673e', '#648ace', '#5ba962', '#ab62c0', '#a9983d', '#c95779'],
	    // iWantHue fancy light hard
	    // colors: ['black', 'black', '#c2007a', '#59dacd', '#019a3f', '#793ec4', '#c9b800', '#c00613'],
	    // iWantHue fluo soft
	    // colors: ['black', 'black', '#cb5c42', '#648ace', '#60a85f', '#a361c7', '#b3953f', '#cb5c42'],
	    fillAlpha: .5,
	    animatedZooms: true,
	    highlightCircleSize: 6,
	    highlightSeriesBackgroundAlpha: .9,
	    // Disabled highlightSeriesOpts as it always seemed to highlight the first item in the series and is not very useful in a stacked graph
	    // highlightSeriesOpts: {
	    // strokeWidth: 4,
	    // highlightCircleSize: 6
	    // },
	    // labelsSeparateLines: true,
	    labelsShowZeroValues: false,
	    legend: 'always',
	    labelsKMG2: true
	  });
	b = new Dygraph(
	  document.getElementById("bdiv"),
	  data, {
	    // Appears axisLabelColor is no longer supported in 2.0
	    // axisLabelColor: 'darkgrey',
	    // While logscale would be great here, it doesn't work with negative values
	    // logscale: true,
	    title: 'bandwidth',
	    titleHeight: 32,
	    axes: {
	      x: {
	        axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
	        valueFormatter: function(ms){
          		var formattedDate = formatDate(ms);
          		return formattedDate;
          },
	        ticker: Dygraph.dateTicker
	      }
	    },
	    xValueParser: function(x) {
	      return 1000 * x;
	    },
	    fillGraph: true,
	    visibility: [true, true, false, false, false, false, false, true],
	    // colors: ['green', 'blue'],
	    colors: ['forestgreen', 'dodgerblue', 'black', 'black', 'black', 'black', 'black', 'firebrick'],
	    fillAlpha: .5,
	    animatedZooms: true,
	    highlightSeriesBackgroundAlpha: .9,
	    highlightSeriesOpts: {
	      strokeWidth: 4,
	      highlightCircleSize: 6
	    },
	    labelsShowZeroValues: false,
	    // labels: ['in', 'out', 'guest'],
	    legend: 'always',
	    labelsKMG2: true
	  });
    
   function formatDate(d) {
   			var stringDate = String(d);
        var yyyy = stringDate.substring(0,4);
        var MM = stringDate.substring(4,6);
        var dd = stringDate.substring(6,8);
        var HH = stringDate.substring(8,10);
        var mm = stringDate.substring(10,12);
        var ss = stringDate.substring(12,14);
        return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
      }

dygraph-label.dygraph-title {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  // font-size: large;
  color: white;
  // color: floralwhite;
}

// .dygraph-label.dygraph-xlabel
// .dygraph-label.dygraph-ylabel
.dygraph-axis-label.dygraph-axis-label-x {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small;
}

.dygraph-axis-label.dygraph-axis-label-y {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small;
}

.dygraph-legend {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: small !important;
  color: white;
  // color: floralwhite;
  background: transparent !important;
  // background: rgba(169, 169, 169, 0.4) !important;
  left: auto !important;
  // left: 60px !important;
  // top: auto !important;
  // bottom: 20px !important;
  right: 10px !important;
  // right: auto !important;
  width: auto !important;
  // text-align: right !important;
  // overflow: visible !important;
  z-index: auto !important;
}

#root {
  left: 25px;
  top: 50px;
  right: 50px;
  bottom: 50px;
  position: absolute;
}

#qdiv {
  width: 100%;
  height: 50%;
}

#bdiv {
  width: 100%;
  height: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<title>egress queues</title>

<body>
  <div id="root">
    <div id="qdiv"></div>
    <p></p>
    <div id="bdiv"></div>
  </div>

Answer 2

I have checked your code and right now everything is working except the "valueFormatter: Dygraph.dateValueFormatter" line. If you comment this line, all the errors dissappear except that the value is not formatted in the label. Try to take this path to find the solution

Answer 3

I have read the documentation of dygraphs and I am seeing that the valueparser is used inside the x block and without the x prefix. Can you try this?

axes: {
  x: {
    axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
    valueParser: function (x) { return 1000 * x; },
    valueFormatter: Dygraph.dateValueFormatter,
    ticker: Dygraph.dateTicker
  }
},

In case it does not work, could you check if the javascript console of the browser is showing any error.