playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix grids

pull/282/head
Masayuki Tanaka 11 years ago
parent
b73908ae2f
commit
3a5bdae313
4 changed files with 161 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      c3.js
  2. 6
      c3.min.js
  3. 72
      htdocs/samples/grids.html
  4. 89
      htdocs/samples/grids_timeseries.html

5
c3.js
Unescape View File

@ -1992,8 +1992,11 @@
} }
} else { } else {
gridData = scale.ticks(10); gridData = scale.ticks(10);
if (gridData.length > tickNum) { // use only int
gridData = gridData.filter(function (d) { return ("" + d).indexOf('.') < 0; });
} }
return gridData.slice(0, tickNum); }
return gridData;
} }
//-- Shape --// //-- Shape --//

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

72
htdocs/samples/grids.html
Unescape View File

@ -3,20 +3,77 @@
<link rel="stylesheet" type="text/css" href="/css/c3.css"> <link rel="stylesheet" type="text/css" href="/css/c3.css">
</head> </head>
<body> <body>
<div id="chart"></div> <div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({
bindto: '#chart', var smallData = [['sample', 30, 200, 100, 400, 150, 250]],
bigData = [['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]];
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: smallData
},
grid: {
x: {
show: true
},
}
});
c3.generate({
bindto: '#chart2',
data: { data: {
columns: [ columns: smallData
['sample', 30, 200, 100, 400, 150, 250] },
] grid: {
y: {
show: true
}
}
});
c3.generate({
bindto: '#chart3',
data: {
columns: smallData
}, },
axis: { axis: {
// rotated: true, rotated: true,
},
grid: {
x: {
show: true
},
}
});
c3.generate({
bindto: '#chart4',
data: {
columns: smallData
},
axis: {
rotated: true,
},
grid: {
y: {
show: true
}
}
});
c3.generate({
bindto: '#chart5',
data: {
columns: bigData
}, },
grid: { grid: {
x: { x: {
@ -27,6 +84,7 @@
} }
} }
}); });
</script> </script>
</body> </body>
</html> </html>

89
htdocs/samples/grids_timeseries.html
Unescape View File

@ -0,0 +1,89 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var smallData = [
['x', '2014-01-01 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00'],
['sample', 30, 200, 100, 400, 150, 250]
],
bigData = [
['x', '2014-01-01 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00', '2014-07-01 00:00:00', '2014-08-01 00:00:00', '2014-09-01 00:00:00', '2014-10-01 00:00:00', '2014-11-01 00:00:00', '2014-12-01 00:00:00'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
];
c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: smallData
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true,
},
}
});
c3.generate({
bindto: '#chart2',
data: {
x: 'x',
columns: smallData
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true,
},
}
});
c3.generate({
bindto: '#chart3',
data: {
x: 'x',
columns: bigData
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true
}
}
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save