CODEWITHSUNDEEP
jqueryjsondygraphs
chriscross
chriscross

Reputation: 453

How to work around Dygraphs Range Selector Bug?

The range selector in Dygraphs multiples the start value of the x-axis with 10 when I start using the range selector (for default and after loading the page x-axis is correct). e.g. my first x-axis value is 1 -> range selector starts at 10 (5 -> starts at 50). Data is in JSON format and is presented correctly without range selector. How can I solve this or work around?

Here is the code in dygraph.com/fiddle jsfiddle I cannot show the JSON parsing, so I entered the JSON that I see in source code on my browser. (it starts with 10 but in my database it starts with one. The chart displays 10 on the x-axis but shows the y-value for 1 until I move the range selector)

//THIS IS THE JSON THAT I SEE IN SOURCE CODE: 
var datenausdb = '[["10","100.0000","101.0000","100.0000"],["11","105.0000","99.0000","100.0000"],["12","104.0000","101.0000","102.0000"],["13","105.0000","102.0000","102.0000"]]';

var datenausdbA = JSON.parse(datenausdb);

$(window).load(function () {

    g = new Dygraph(
    document.getElementById("div1"),
    datenausdb, {
        title: '%Performance',
        showRangeSelector: true,
        rangeSelectorHeight: 50,
    });

});

But it also happens when I manipulate the JSON manually to

var datenausdb = '[["1","100.0000","101.0000","100.0000"],["2","105.0000","99.0000","100.0000"],["3","104.0000","101.0000","102.0000"],["4","105.0000","102.0000","102.0000"]]';

1 is shown on the x-axis. When I move the selector it changes to 10 and nothing is shown in the chart anymore

Upvotes: 0

Views: 1111

Answers (1)

chriscross
chriscross

Reputation: 453

I wanted to post the complete solution to my problem that was due to the strings as Dan mentioned.

I also had to transform the date. This one works:

var datenausdb = [
["2013-08-05","100.0000","100.0000","99.9700"],
["2013-08-06","100.0000","101.0000","100.5000"],
["2013-08-07","101.1200","101.1200","101.1000"],
["2013-08-08","100.0100","100.0100","100.0100"],
["2013-08-09","99.9700","99.9700","99.9700"],
["2013-08-12","100.0000","100.0000","100.0000"],
["2013-08-13","101.0000","101.0000","102.0000"],
["2013-08-14","101.1200","101.1200","102.5000"],
["2013-08-15","100.0100","100.0100","100.0100"],
["2013-08-16","99.9700","99.9700","99.9700"],
["2013-08-19","100.5000","100.5000","100.5000"],
["2013-08-20","101.1000","101.1000","101.1000"],
["2013-08-21","102.0000","102.0000","99.9700"]
]; 


for (var k = 0; k < datenausdb.length; k++){
datenausdb[k][0] = new Date(datenausdb[k][0]); 
}

for (var i = 0; i < datenausdb.length; i++){
for (var j = 1; j < datenausdb[i].length; j++) {
datenausdb[i][j] = parseFloat(datenausdb[i][j]);
}
}

$(document).ready(function () {

   g1 =  new Dygraph( 
            document.getElementById("div1"),
            datenausdb, 
        {
        showRangeSelector: true,
        rangeSelectorHeight: 50,
          }
            );
 }
 );

Here is jsFiddle

Upvotes: 1

Related Questions