Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 84 lines (68 sloc) 2.188 kb
851b50b @dchester accept a formatter callback in Rickshaw.Graph.HoverDetail for more flexi...
dchester authored
1 <!doctype>
2 <head>
3 <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
4 <link type="text/css" rel="stylesheet" href="../src/css/graph.css">
5 <link type="text/css" rel="stylesheet" href="../src/css/detail.css">
6 <link type="text/css" rel="stylesheet" href="../src/css/legend.css">
7 <link type="text/css" rel="stylesheet" href="css/lines.css">
8
9687c40 @dchester upgrade d3 for examples
dchester authored
9 <script src="../vendor/d3.v2.js"></script>
851b50b @dchester accept a formatter callback in Rickshaw.Graph.HoverDetail for more flexi...
dchester authored
10
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
12 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
13
14 <script src="../rickshaw.js"></script>
15
16 <style>
17 .rickshaw_graph .detail .x_label { display: none }
18 .rickshaw_graph .detail .item { line-height: 1.4; padding: 0.5em }
19 .detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
20 .rickshaw_graph .detail .date { color: #a0a0a0 }
21 </style>
22 </head>
23 <body>
24
25 <div id="chart_container">
26 <div id="chart"></div>
27 <div id="legend_container">
28 <div id="smoother" title="Smoothing"></div>
29 <div id="legend"></div>
30 </div>
31 <div id="slider"></div>
32 </div>
33
34 <script>
35
36 // set up our data series with 50 random data points
37
38 var seriesData = [ [], [], [] ];
39 var random = new Rickshaw.Fixtures.RandomData(150);
40
41 for (var i = 0; i < 150; i++) {
42 random.addData(seriesData);
43 }
44
45 // instantiate our graph!
46
47 var graph = new Rickshaw.Graph( {
48 element: document.getElementById("chart"),
49 width: 960,
50 height: 500,
51 renderer: 'line',
52 series: [
53 {
54 color: "#c05020",
55 data: seriesData[0],
56 name: 'New York'
57 }, {
58 color: "#30c020",
59 data: seriesData[1],
60 name: 'London'
61 }, {
62 color: "#6060c0",
63 data: seriesData[2],
64 name: 'Tokyo'
65 }
66 ]
67 } );
68
69 graph.render();
70
71 var hoverDetail = new Rickshaw.Graph.HoverDetail( {
72 graph: graph,
73 formatter: function(series, x, y) {
74 var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
75 var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
76 var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
77 return content;
78 }
79 } );
80
81 </script>
82
83 </body>
Something went wrong with that request. Please try again.