4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Custom grid and Dot
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
12 <script type=
"text/javascript" src=
"data.js"></script>
16 <p>Dot and lines should be extra large. Grid is red.
</p>
17 <div id=
"div_g14" style=
"width:600px; height:300px;"></div>
19 <script type=
"text/javascript">
21 document.getElementById(
"div_g14"),
25 gridLineColor: '#FF0000',
26 highlightCircleSize:
10,
32 <p>Use axis specific grid options. (independentTicks, gridLinePattern, ...)
</p>
33 <div id=
"div_g15" style=
"width:600px; height:300px;"></div>
35 <script type=
"text/javascript">
37 for (var i =
1; i <=
100; i++) {
39 if (d
> 31) { m =
"02"; d -=
31; }
40 if (m ==
"02" && d
> 28) { m =
"03"; d -=
28; }
41 if (m ==
"03" && d
> 31) { m =
"04"; d -=
31; }
42 if (d <
10) d =
"0" + d;
43 // two series, one with range
1-
100, one with range
1-
2M
44 data.push([new Date(
"2010/" + m +
"/" + d),
47 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
48 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
51 document.getElementById(
"div_g15"),
54 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
67 independentTicks: true
72 independentTicks: true
75 // set axis-related properties here
77 ticker: Dygraph.numericLinearTicks,
79 independentTicks: true,
80 gridLineColor:
"#ff0000",
81 gridLinePattern: [
4,
4]