Search code examples
javascriptdygraphs

dygraphs automatically set value range for chart with error/custom bars?

I have a chart who's data is loaded from a SQL database, the chart MAY contain duplicate values for the same x value.

i.e. X(time) value at time 55 seconds may have a temperature value of: 50, 51, 49, 52, stored on different rows.

I implemented the errorbars in order to represent those discrepancies to the user since multiple y values per x point is not possible for the same series.

The result csv data prior to plotting is [49, 50, 52]... this has been tested and works great, however once I got this working now all of my graphs y-axis begin at value 0 (instead of 49 in this case).

Is there any way to automate the minimum y value to simply be the minimum y value generated, i.e. 49? as it is done without error bars? or will this have to be hard coded?

I am currently implementing a draw point callback function, I could incorporate a way to extract the minimum y-value to set my limits there if there is no already implemented way.

//EDIT Added code and pictures....

function createDyGraph(newChart) {
   "use strict";
   var min = 100000000; //value way over possible range of data
   newChart.dyGraph = new Dygraph(
      document.getElementById(newChart.chartGraphID),
      newChart.csvData,
      {
         drawPointCallback: function (g, seriesName, canvasContext, cx, cy,
                                       seriesColor, pointSize, row) {
            var col = g.indexFromSetName(seriesName),
               val = parseInt(g.getValue(row, col).toString().replace(/,/g, ""), 10),
               color = '';
            if (newChart.erroneousData[row]) {
               color = 'red';
            } else {
               color = newChart.colors[col - 1];
            }

        if (val < min) {
           min = val;
        }

        if (color === 'red') {
           canvasContext.beginPath();
           canvasContext.strokeStyle = 'red';
           canvasContext.arc(cx, cy, pointSize, 0, 2 * Math.PI, false);
           canvasContext.stroke();
        } else {
           canvasContext.beginPath();
           canvasContext.strokeStyle = seriesColor;
           canvasContext.arc(cx, cy, pointSize, 0, 2 * Math.PI, false);
           canvasContext.stroke();
        }
     },
     customBars: true,
     colors: newChart.colors,
     animatedZooms: true,
     connectSeparatedPoints: true,
     showLabelsOnHighlight: true,
     ylabel: 'Count / Value',
     xlabel: 'Time (Seconds)',
     drawPoints: true,
     pointSize: 1,
     labels: newChart.labels,
     labelsDiv: document.getElementById('legend' + chartIndex),
     legend: 'always'
  }
 );
   alert(min);
}

Graph - Why is the min-Y axis value going to 0 instead of ~1100???

//EDIT: Added JSON Data

[["2014-02-06T16:30:00.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:01.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:02.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:03.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:04.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:05.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

["2014-02-06T16:30:06.000Z",[null,2739,null],[null,1786,null],[null,3680.1204,null],[null,2390.9182,null]],

...

["2014-02-06T16:30:59.000Z",[null,2740,null],[null,1787,null],[null,3681.464,null],[null,2392.2569,null]]]

Solution

  • Well I just figured it out... for customBars the CSV format should not be [null, Value, null] initially, but rather [value, value, value].

    Consequently should you want to add min or max to that, the CSV will be updated as [min, value, max]