Search code examples
javascriptdygraphs

DYGRAPHS: Show warning when disable small graph in range selector

I disabled the small graph in range selector using: showInRangeSelector: false, but I'm getting warning sign like this: enter image description here I can't seem to find where is the bug.

Updated with code:

<html>
<head>
<link href="http://dygraphs.com/2.0.0/dygraph.css" rel="stylesheet"/>
<script src="http://dygraphs.com/2.0.0/dygraph.js"></script> 
<div id="hello" class="chart"></div>
</head>
<body>
<script type = "text/javascript">

var hello = [
            [new Date("2016-03-06"),[10,20,30],[11,11,11]],
            [new Date("2016-03-07"),[10,20,30],[15,15,15]],
            [new Date("2016-03-08"),[10,20,30],[32,32,32]],
            [new Date("2016-03-09"),[10,20,30],[18,18,18]],
            [new Date("2016-03-10"),[10,20,30],[26,26,26]],
            [new Date("2016-03-11"),[10,20,30],[31,31,31]],
            [new Date("2016-03-12"),[10,20,30],[9,9,9]],
        ],

a = new Dygraph(
    document.getElementById("hello"),hello, 
    {
        labels: [ "Date", "Mean" , "Scatter"],
        customBars: true,
        showRangeSelector: true,
        showInRangeSelector : false, 
        interactionModel: Dygraph.defaultInteractionModel,
        series: {
            "Mean" : {
                drawPoints: false,
                color: "#585858",
            },
            "Scatter" : {
                drawPoints: true,
                pointSize: 3,
                strokeWidth: 0,
            }
        },      
    }
);
</script>

Thank you :)

I have to add extra wording because the post is mostly codes and I can't post it :P

Solution

  • This is the workaround I am thinking. Tell me if it is useful for you.

    The idea is that you can create another serie only for the rangeselector.

    The data for this serie does not matter as it is not going to be shown. But it depends on the way you want to see the range selector. If you want to see the typical line in the rangeselector you can use this first solution.

    https://jsfiddle.net/b8sz6m36/4/

    var hello = [
        [new Date("2016-03-06"),[10,20,30],[11,11,11],[1,1,1]],
        [new Date("2016-03-07"),[10,20,30],[15,15,15],[1,1,1]],
        [new Date("2016-03-08"),[10,20,30],[32,32,32],[1,1,1]],
        [new Date("2016-03-09"),[10,20,30],[18,18,18],[1,1,1]],
        [new Date("2016-03-10"),[10,20,30],[26,26,26],[1,1,1]],
        [new Date("2016-03-11"),[10,20,30],[31,31,31],[1,1,1]],
        [new Date("2016-03-12"),[10,20,30],[9,9,9],[1,1,1]],
    ],

a = new Dygraph(
document.getElementById("hello"),hello, 
{
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"],
    customBars: true,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    series: {
        "Mean" : {
            drawPoints: false,
            color: "#585858",
                    showInRangeSelector : false, 
        },
        "Scatter" : {
            drawPoints: true,
            pointSize: 3,
            strokeWidth: 0,
                    showInRangeSelector : false, 
        },
        "RangeSelector" : {
            showInRangeSelector : true, 
        }
    },      
  }
);

    If it does not matter to you to have the range selector completely empty, you can use this second solution where the data in the serie for the rangeselector is simpler

    https://jsfiddle.net/b8sz6m36/5/

    var hello = [
        [new Date("2016-03-06"),[10,20,30],[11,11,11],0],
        [new Date("2016-03-07"),[10,20,30],[15,15,15],0],
        [new Date("2016-03-08"),[10,20,30],[32,32,32],0],
        [new Date("2016-03-09"),[10,20,30],[18,18,18],0],
        [new Date("2016-03-10"),[10,20,30],[26,26,26],0],
        [new Date("2016-03-11"),[10,20,30],[31,31,31],0],
        [new Date("2016-03-12"),[10,20,30],[9,9,9],0],
    ],

a = new Dygraph(
document.getElementById("hello"),hello, 
{
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"],
    customBars: true,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    series: {
        "Mean" : {
            drawPoints: false,
            color: "#585858",
                    showInRangeSelector : false, 
        },
        "Scatter" : {
            drawPoints: true,
            pointSize: 3,
            strokeWidth: 0,
                    showInRangeSelector : false, 
        },
        "RangeSelector" : {
            showInRangeSelector : true, 
        }
    },      
  }
);