Search code examples
javascriptdygraphs

dygraph 1.1.1 appears to incorrectly detect range value for data source


I've been struggling with trying to figure out how to get dygraphs to play nicely with my data. When it renders the chart, it cuts off a good chunk of the lines in the display. However if I scroll (shift + drag) to the left a little it rescales the view and includes all of the data. It looks like the drop off at the end of the graph is skewing the view of the chart.

It's really simple, I have a sample data file here: http://pasamio.com/~pasamio/dygraph/sample_data.json

And here's what I'm using to pull it in:

var dataURL = "http://pasamio.com/~pasamio/dygraph/sample_data.json";
var jsonData = null;

var jsonDataResult = $.ajax({
    url: dataURL,
    dataType: "json",
    async: false,
    success: (
        function(data) {
            jsonData = data;
        })
});

var data = new google.visualization.DataTable(jsonData);

var g = new Dygraph.GVizChart(document.getElementById("dg_div"));
g.draw(data, {"panEdgeFraction" : 0.1});

I've got a sample jsfiddle here that shows the bad case: https://jsfiddle.net/g6b6jp9z/5/

Any idea's what's going on here?


Solution

  • As danvk suggested, the solution was to change the numbers from being wrapped in quotes causing them to be treated as strings to be just bare numbers in the JSON output. Thanks again to danvk :)

    The original file had these sections:

    "c": [
        {
            "v": "Date(2016, 10,  27, 00, 00, 00)"
        },
        {
            "v": "548"
        },
        {
            "v": "165"
        },
        {
            "v": "57"
        },
        {
            "v": "39"
        },
        {
            "v": "29"
        },
        {
            "v": "6"
        },
        {
            "v": "1"
        }
    ]
    

    And the working version looks like this:

    "c": [
        {
            "v": "Date(2016, 10,  27, 00, 00, 00)"
        },
        {
            "v": 548
        },
        {
            "v": 165
        },
        {
            "v": 57
        },
        {
            "v": 39
        },
        {
            "v": 29
        },
        {
            "v": 6
        },
        {
            "v": 1
        }
    ]