How do I chart aggregate data using the dygraphs l

问题:

I am using the dygraphs library (http://dygraphs.com) and I was wondering if there is a way for me to specify how to chart the y-axis.

My data looks something like the following (I load it from a CSV file):

Date,Stats 20121029,13 20121030,14 20121031,1 20121101,0 20121102,7 20121103,0 20121104,7

This is how my JS looks like:

<script type="text/javascript">
g3 = new Dygraph(
document.getElementById("divGraph2"),
"<?php echo $csvstats;?>",
{ interactionModel: {}, labels: [ " ", " "], strokeWidth: 3, showLabelsOnHighlight:false,axes: {x:{axisLabelFormatter: function(x){return "";}, valueFormatter: function(s) {return "";}}, y:{axisLabelFormatter: function(y){return "";}, valueFormatter: function(y) {return "";}}} });
</script>

Currently, the graph is showing up with the y-axis showing the data as a daily data.

I want to show the data on the y-axis as follows:

20121029 - 13 20121030 - 27 20121031 - 28 20121101 - 28 20121102 - 35 20121103 - 35 20121104 - 42

Are there any options in dygraphs that I can use to do this? I can't change the format of my input CSV file.

Thanks

回答1:

The data format for Dygraphs is laid out at http://dygraphs.com/data.html. The date needs to be translated to YYYY/MM/DD. There's a way to do it, and this may seem more daunting than it is, but will help you. See http://blog.dygraphs.com/2012/04/how-to-download-and-parse-data-for.html for more information.

回答2:

I'm not sure what your use case is, but if it were me, I would regenerate the data in the form I need it in prior to passing it to DyGraphs.

e.g. Get PHP to aggregate the values and then pass it to DyGraphs.

However, I mocked this up for you:

This assumes you only have one data series, and no null/NaN values

g3 = new Dygraph(
    document.getElementById("divGraph2"),
    "2012-10-29,13 \n"+
    "2012-10-30,14 \n"+
    "2012-10-31,1 \n"+
    "2012-11-01,0 \n"+
    "2012-11-02,7 \n"+
    "2012-11-03,0 \n"+
    "2012-11-04,7 \n",
    { 
        interactionModel: {}, 
        labels: [ " ", " "], 
        strokeWidth: 3, 
        showLabelsOnHighlight:false,
        axes: {
            x:{
                axisLabelFormatter: function(x){return "";}, 
                valueFormatter: function(s) {return "";}
            }, 
            y:{
                axisLabelFormatter: function(y){return "";}, 
                valueFormatter: function(y) {return "";}
            }
        }
    }
);

data = g3.rawData_; //Object of arrays in the format of [timestamp, y-axis value]
var length = data.length;
var current;
var aggregate = 0;
for(var i = 0; i < length; i++) {
    current = data[i]; //Get current array 
    aggregate = aggregate + current[1]; //Aggregate y-axis value
    current[1] = aggregate; //Store updated value (this works because the variable "current" is a reference to the "data" object)
}

g3.updateOptions(data); //Reload data

EDIT: Modified comments for clarity, added context to explanation