Browse Source

Fix grid/axis sample for timeseries as number - #311

pull/329/head
Masayuki Tanaka 11 years ago
parent
commit
ee66064979
  1. 8
      htdocs/index.html
  2. 57
      htdocs/samples/axes_x_range_timeseries.html
  3. 73
      htdocs/samples/grid_x_lines_timeseries.html

8
htdocs/index.html

@ -139,6 +139,9 @@
<a href="./samples/axes_x_tick_rotate.html" target="_blank">
Set rotation for x axis
</a>
<a href="./samples/axes_x_range_timeseries.html" target="_blank">
Set range in timeseries for x axis
</a>
</div>
</div>
<div class="row">
@ -226,11 +229,14 @@
Show x/y grids
</a>
<a href="./samples/grids_timeseries.html" target="_blank">
Show x/y grids with timeseries&raquo;
Show x/y grids with timeseries
</a>
<a href="./samples/grid_x_lines.html" target="_blank">
Show optional x grids
</a>
<a href="./samples/grid_x_lines_timeseries.html" target="_blank">
Show optional x grids with timeseries
</a>
</div>
<div class="col-md-4">
<h3>Region</h3>

57
htdocs/samples/axes_x_range_timeseries.html

@ -0,0 +1,57 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
"bindto": "#chart1",
"axis": {
"x": {
"type": "timeseries",
"min": 1401879600000,
"max": 1401969600000,
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
var chart2 = c3.generate({
"bindto": "#chart2",
"axis": {
"x": {
"type": "timeseries",
"min": new Date(1401879600000),
"max": new Date(1401969600000),
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
</script>
</body>
</html>

73
htdocs/samples/grid_x_lines_timeseries.html

@ -0,0 +1,73 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
"bindto": "#chart1",
"axis": {
"x": {
"type": "timeseries",
"tick": {
format: '%Y-%m-%d %H:%M:%S'
}
}
},
"grid": {
"x": {
"lines": [
{ "value": 1401883200000, "text": new Date(1401883200000), "color": "#f00" },
]
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
var chart2 = c3.generate({
"bindto": "#chart2",
"axis": {
"x": {
"type": "timeseries",
"tick": {
format: '%Y-%m-%d %H:%M:%S'
}
}
},
"grid": {
"x": {
"lines": [
{ "value": new Date(1401883200000), "text": new Date(1401883200000), "color": "#f00" },
]
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
</script>
</body>
</html>
Loading…
Cancel
Save