playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1364 Commits
10 Branches
97 Tags
10 MiB
Tree: 4977298a2e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4977298a2e'
${ noResults }
c3/htdocs/samples/api_xgrid_lines.html

126 lines
3.1 KiB
Raw Normal View History Unescape

Update sample for grid lines
11 years ago
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
Calculate tick width before update scales - #295
11 years ago
var axis_rotated = false, axis_x_type = "";
var generate = function () { return c3.generate({
Update sample for grid lines
11 years ago
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
Calculate tick width before update scales - #295
11 years ago
rotated: axis_rotated,
x: {
type: axis_x_type
}
Update sample for grid lines
11 years ago
},
grid: {
Update samples
11 years ago
x: {
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
Update sample for grid lines
11 years ago
}
}
Calculate tick width before update scales - #295
11 years ago
}); }, chart = generate();
Add grid API - #63
11 years ago
Calculate tick width before update scales - #295
11 years ago
var queue = [
function () {
Update samples
11 years ago
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids([{value: 2, text:'Label 2'}]);
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids.remove({value:2});
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids.remove({class:'hoge'});
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids.remove([{value: 1}, {value: 4}]);
Calculate tick width before update scales - #295
11 years ago
},
function () {
Update samples
11 years ago
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
Calculate tick width before update scales - #295
11 years ago
},
function () {
chart.xgrids.remove();
},
function () {
axis_rotated = true;
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
Update samples
11 years ago
chart.xgrids.remove();
Calculate tick width before update scales - #295
11 years ago
},
function () {
axis_rotated = false;
axis_x_type = 'category';
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1000 * i++);
});
Update samples
11 years ago
Update sample for grid lines
11 years ago
</script>
</body>
</html>