dygraph, display day beside date on x-axis

StackOverflow https://stackoverflow.com/questions/23426257

  •  14-07-2023
  •  | 
  •  

Question

I have dygraph working. Currently, x-axis granularity is 1 day and format displayed on axis is ddMMM, e.g. 02May. I wish to display the day as well, e.g. Fri 02May.

How do I do this ?

Thank you

HTML page containing JavaScript: 

<!DOCTYPE html>
<html>
<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title>Temperature(&deg;C) vs Time</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4rc2.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <script type='text/javascript' src="http://dygraphs.com/dygraph-combined.js"></script>


  <style type='text/css'>
  </style>



<script type='text/javascript'>//<![CDATA[ 

 $(document).ready(function () {
      var r = [ ];

      var base_time = Date.parse("2014/03/05");

      var num = 24 * 0.25 * 365;
      for (var i = 0; i < num; i++) {
        r.push([ new Date(base_time + i * 3600 * 1000),
                 i + 50 * (i % 60),        // line
                 i * (num - i) * 4.0 / num  // parabola
               ]);
      }
      var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];

// NEW CODE INSERTED -   STARTS
    var one_month_previous = new Date();
    one_month_previous.setMonth(one_month_previous.getMonth() - 1);

    var one_week_previous = new Date();
    one_week_previous.setDate(one_week_previous.getDate()-7);

    var three_days_previous = new Date();
    three_days_previous.setDate(three_days_previous.getDate()-3);

    var one_days_previous = new Date();
    one_days_previous.setDate(one_days_previous.getDate()-1);

    var twelve_hours_previous = new Date();
    twelve_hours_previous.setHours(twelve_hours_previous.getHours() - 12);
// NEW CODE INSERTED -   ENDS

    var d_names = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

    var m_names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

g = new Dygraph(
    document.getElementById("graphdiv3"),
    "show_csv.php",
    {

// NEW CODE INSERTED -   STARTS

//  dateWindow: [ Date.parse(one_month_previous) ,
//            Date.parse(new Date()) ],

    dateWindow: [ Date.parse(one_week_previous) ,
              Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(three_days_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(one_days_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse(twelve_hours_previous) ,
//            Date.parse(new Date()) ],

//  dateWindow: [ Date.parse("2014/03/01 12:00:00"),    
//            Date.parse("2014/03/31 12:00:00") ],   

// NEW CODE INSERTED -   ENDS

      title: 'Temperature(&deg;C) vs Time',
      rollPeriod: 1,
      showRoller: true,
      xlabel: '',
      ylabel: 'Temperature (&deg;C)',
      legend: 'always',
      labelsKMB: 'true',
      labelsSeparateLines: 'true',
      colors: [
        "rgb(51,204,204)",
        "#00DD55",
        "rgb(255,100,100)",
        "rgba(50,50,200,0.4)"],

      axes: {
            x: {
                axisLabelFormatter: function(d, gran) {
                    var curr_day  = d_names[d.getDay()];
                    var curr_month = m_names[d.getMonth()];
                    return curr_day + " "
                    + Dygraph.zeropad(d.getDate()) 
                    + curr_month;
                }
            }
        }



//
//
// below works
//
// axes: {
//    x: {
//        valueFormatter: function(x) {
//       return 'text';
//       },
//        axisLabelFormatter: function(x) {
//        return x; 
//       },
//    }
// }




//
    }
  );


      var desired_range = null;
      function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g.xAxisRange();
        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
        g.updateOptions({dateWindow: desired_range});


//          g.updateOptions(
//  {dateWindow: desired_range,
//axes: {
//            x: {
  //              axisLabelFormatter: function(d, gran) {
    //                var curr_day  = d_names[d.getDay()];
      //              var curr_month = m_names[d.getMonth()];
        //            return curr_day + " "
          //          + Dygraph.zeropad(d.getDate()) 
            //        + curr_month;
              //  }
//            }
  //      }



//});




          // (do not set another timeout.)
        } else {
          var new_range;
          new_range = [0.5 * (desired_range[0] + range[0]),
                       0.5 * (desired_range[1] + range[1])];
          g.updateOptions({dateWindow: new_range});

//         g.updateOptions(
//
//{dateWindow: new_range, axes: {
 //           x: {
   //             axisLabelFormatter: function(d, gran) {
     //               var curr_day  = d_names[d.getDay()];
       //             var curr_month = m_names[d.getMonth()];
         //           return curr_day + " "
           //         + Dygraph.zeropad(d.getDate()) 
             //       + curr_month;
//                }
  //          }
    //    }}

//);




          animate();
        }
      }
      function animate() {
        setTimeout(approach_range, 50);
      }

      var zoom = function(res) {
        var w = g.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
      }

      var reset = function() {
        desired_range = orig_range;
        animate();
      }

      var pan = function(dir) {
        var w = g.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [ w[0] + amount, w[1] + amount ];
        animate();
      }

      document.getElementById('hour').onclick = function() { zoom(3600); };
      document.getElementById('day').onclick = function() { zoom(86400); };
      document.getElementById('week').onclick = function() { zoom(604800); };
      document.getElementById('month').onclick = function() { zoom(30 * 86400); };
      document.getElementById('full').onclick = function() { reset(); };
      document.getElementById('left').onclick = function() { pan(-1); };
      document.getElementById('right').onclick = function() { pan(+1); };
    }
);

//]]>  
</script>



</head>
<body>

<center>
<div id="graphdiv3"
  style="width:900px; height:400px;"></div>
</center>

<p>
<br>

<center>
<b>Zoom:</b>
<button id="hour">hour</button>
<button id="day">day</button>
<button id="week">week</button>
<button id="month">month</button>
<button id="full">full</button>
<br> or,  click & drag. Double-click to zoom back out. 
<br>
<b>Pan:</b> 
<button id="left">left</button>
<button id="right">right</button>
  or,   shift & drag.
<br>
<b>Raw Data:</b> 
<button onclick="window.location.href='show_csv_raw_data.php'">raw</button>



<!--

<b>Zoom:</b>
<a href="#" id="hour">hour</a>
<a href="#" id="day">day</a> 
<a href="#" id="week">week</a> 
<a href="#" id="month">month</a> 
<a href="#" id="full">full</a> 
<b>Pan:</b> 
<a href="#" id="left">left</a> 
<a href="#" id="right">right</a>    
 -->



<br>
<br>Measurements every 15 mins. Refresh with F5 button for update. 
<br>Your last page refresh was on <b><span id="long_date"></span></b>

    <script type='text/javascript'>
        var datetime = new Date();
        document.getElementById("long_date").innerHTML=datetime;
    </script>
</center>


<br>
<br>
Notes:
<br> 1. Measurements before 19<sup>th</sup> March: Hall Cupboard was "Inside" sitting on Rasp Pi, Loft was just "Inside window", Hall was external temp measurement, "Outside window"
<br> 2. Mar 31<sup>st</sup>, green line, shows loft temp rise of ~8&deg;C(8am) to 17&deg;C(3pm), &Delta; ~ 9&deg;C, in zero octave cloud/ direct sunlight conditions. Direct lift in hall temperature, red line, while heating off clear. Indicative that solar heating of loft as thermal barrier worthwhile. 
<br> 3. April 3<sup>rd</sup>, red line, shows hall temp rise of ~14&deg;C(17:45) to 20&deg;C(19:45), &Delta; ~ 5&deg;C, in two hours while loft temprature remains fairly constant (flat) ie no solar gain. Shows heating performance of approximately 2.5&deg;C per hour 
<br> 4. April 20<sup>th</sup>. Raw data can be viewed.
<br> 5. April 29<sup>th</sup>. Heating is off: the evening of Friday 25<sup>th</sup>, all of Sat 26<sup>th</sup>, all of Sun 27<sup>th</sup> and early morning Mon 28<sup>th</sup>. Consequences of heating off can be seen.  
<br>6. April 29<sup>th</sup>. Loft space (green line) heats, with keroscene space heating off, through black colour concerete tiles, in zero octave cloud/ direct sunlight conditions. Solar gain is
<dl>
<dd>o Loft     temp rise of ~7   &deg;C(6:30am) to 20.9&deg;C(5:30pm), &Delta; ~ 14&deg;C, <i>and</i>  </dd>
<dd>o Hall way temp rise of ~11.4&deg;C(6:30am) to 15.6&deg;C(5:30pm), &Delta; ~  4&deg;C  </dd>
<br>
<dd>  Conversion = 0.3&deg;C rise in Hall way temperature per 1.0&deg;C rise in loft space temperature</dd>
<br>
<dd>See solar (black-body) space heating ideas <a href="http://bit.ly/solar-air-heating" target="_blank">http://bit.ly/solar-air-heating</a>  </dd>
</dl>
7. 

</p>


<div id="div_g"></div>


<br>
<br>


<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/3?width=450&height=260&results=1000&dynamic=true&yaxis=Hall&title=Hall%20Temp" ></iframe>

<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/1?width=450&height=260&results=1000&dynamic=true&yaxis=Hall%20Cupboard&title=Hall%20Cupboard%20Temp" ></iframe>

<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/2?width=450&height=260&results=1000&dynamic=true&yaxis=Loft&title=Loft%20Temp" ></iframe>

</body>


</html>
Was it helpful?

Solution

use the axisLabelFormatter property and format the date as desired

var d_names = ["Sun","Mon", "Tue", "Wed", 
"Thu", "Fri", "Sat"];

var m_names = ["Jan", "Fe", "Mar", 
"Apr", "May", "Jun", "Jul", "Aug", "Sep", 
"Oct", "Novr", "Dec"];

var g3 = new Dygraph(
    document.getElementById("g_div"),
    DailyData(),
    { 
        xAxisLabelWidth: 80,
        axisLabelFontSize: 12,
        width: 640,
        height: 350,
        axes: {
            x: {
                axisLabelFormatter: function(d, gran) {
                    var curr_day  = d_names[d.getDay()];
                    var curr_month = m_names[d.getMonth()];
                    return curr_day + " "
                    + Dygraph.zeropad(d.getDate()) 
                    + curr_month;
                }
            }
        }
    });

Here is a DEMO

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top