4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Custom grid and Dot
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script type=
"text/javascript" src=
"data.js"></script>
12 <p>Dot and lines should be extra large. Grid is red.
</p>
13 <div id=
"div_g14" style=
"width:600px; height:300px;"></div>
15 <script type=
"text/javascript">
17 document.getElementById(
"div_g14"),
21 gridLineColor: '#FF0000',
22 highlightCircleSize:
10,
28 <p>Use axis specific grid options. (independentTicks, gridLinePattern, ...)
</p>
29 <div id=
"div_g15" style=
"width:600px; height:300px;"></div>
31 <script type=
"text/javascript">
33 for (var i =
1; i <=
100; i++) {
35 if (d
> 31) { m =
"02"; d -=
31; }
36 if (m ==
"02" && d
> 28) { m =
"03"; d -=
28; }
37 if (m ==
"03" && d
> 31) { m =
"04"; d -=
31; }
38 if (d <
10) d =
"0" + d;
39 // two series, one with range
1-
100, one with range
1-
2M
40 data.push([new Date(
"2010/" + m +
"/" + d),
43 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
44 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
47 document.getElementById(
"div_g15"),
50 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
63 independentTicks: true
68 independentTicks: true
71 // set axis-related properties here
73 ticker: Dygraph.numericLinearTicks,
75 independentTicks: true,
76 gridLineColor:
"#ff0000",
77 gridLinePattern: [
4,
4]