CODEWITHSUNDEEP
javascriptdygraphs
Roberto
Roberto

Reputation: 11

dygraph display data only from the last month

can you tell me how to do it. I collect data and visualize it using dygraphs. The data collected in the .txt file is temperature and date in format, e.g.

2018-04-19 15:47.12.7
2018-04-19 15:48.12.5
2018-04-19 15:49, 12.5
2018-04-19 15:50,12.3
2018-04-19 15:51.12
2018-04-19 15:52.12
2018-04-19 15:53,12.7
2018-04-19 15:54.12
2018-04-19 15:55,12.8
2018-04-19 15:56.12.8
2018-04-19 15:57,12.6
2018-04-19 15:58.12.7
...
2018-07-09 11:59 24.1

How to make a chart in dyhraph display data only from the last month and not the whole? Because now the graph shows me everything from a few months.

<html>
<head>
<script src="js/dygraph-combined.js"></script>
<link rel="stylesheet" href="js/dygraph.css" />

</head>
<body>

<div id="graphdiv2"
  style="width:550px; height:300px;"></div>
<script type="text/javascript">

    g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "xxxxxxxxxxxx.txt",
    {
    title: '<embed src="xxxxxxxxxx.php" width="500" height="40"  >',
    legend: 'always',
    ylabel: 'Temperature (C)',
    xlabel: 'Date (Month)',
    rollPeriod: 10,
    showRoller: true,
    color: "red",
    valueRange: [-10,40],<----->//zakres
}
 );
</script>

</body>

</html>

Upvotes: 1

Views: 324

Answers (2)

Roberto
Roberto

Reputation: 11

Thanks - that's what I meant, only that the code must look like this - no div, data, { - and I have a "roller" chart set for the last month :)

g2 = new Dygraph(
    document.getElementById("graphdiv2"),
   "xxxxxxxxxxxxx.txt",
    {
    legend: 'always',
    ylabel: 'Temp. (C)',
    xlabel: 'Date (Month)',
    color: "#6600CC",
    valueRange: [10,35],//zakres
dateWindow: [
    +new Date() - 30 * 24 * 60 * 60 * 1000,  // one month ago
    +new Date()  // today
  ]
}
 );

see screen chart

Upvotes: 0

danvk
danvk

Reputation: 16955

Try passing in a dateWindow option:

new Dygraph(div, data, {
  // ... other options ...
  dateWindow: [
    +new Date() - 30 * 24 * 60 * 60 * 1000,  // one month ago
    +new Date()  // today
  ]
});

Upvotes: 1

Related Questions