Search code examples
dygraphs

Dygraph not showing all dates on x axis until I adjust the browser size


I have some Dygraphs from http://dygraphs.com/ which are initially rendered as follows with the x axis dates not rendered properly.

enter image description here

I then resize the browser by making it smaller and then bigger again and the graph then renders properly as follows

enter image description here

Code as follows:

      new Dygraph(document.getElementById("graphdiv_"+<?php echo $key; ?>),content_<?php echo $key; ?>, {
    legend: 'always',
    showRoller: false,
    rollPeriod: 14,
    customBars: true,
    rightGap:15,
    ylabel: 'Rating',
    strokeWidth: 1.5,
    digitsAfterDecimal: 3,
    axes: {
            y: {
                valueRange: [3, 5]
            }
        }

});

Is this a bug?

What adjustments would I need to make to have the graph render correctly initially?

Regards Conteh


Solution

  • The following resolved the problem with the graph rendering.

    $(function() {
            new Dygraph(document.getElementById("graphdiv_"+<?php echo $key; ?>),content_<?php echo $key; ?>, {
                    legend: 'always',
                    showRoller: false,
                    rollPeriod: 14,
                    customBars: true,
                    rightGap:15,
                    ylabel: '',
                    dateWindow: [new Date(date.getFullYear(), date.getMonth()-1, date.getDate()), new Date(date.getFullYear(), date.getMonth(), date.getDate())],
                    axes: {
                        y: {
                                valueRange: [3, 5]
                            }
                    }
            });
    });