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

Update sample for padding

pull/319/head
Masayuki Tanaka 11 years ago
parent
d3c0068174
commit
c4914d3d98
1 changed files with 125 additions and 8 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. 133
      htdocs/samples/padding.html

133
htdocs/samples/padding.html
Unescape View File

@ -4,23 +4,139 @@
<style type="text/css"> <style type="text/css">
<!-- <!--
.c3 svg { .c3 svg {
font-size: 13px; /* font-size: 13px;*/
} }
--> -->
</style> </style>
</head> </head>
<body> <body>
<div id="chart"></div> <div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></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: '#chart1',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({
bindto: '#chart2',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
legend: {
position: 'right'
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({
bindto: '#chart3',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
subchart: {
show: true
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart = c3.generate({ var chart = c3.generate({
bindto: '#chart', bindto: '#chart4',
padding: { padding: {
top: 20, top: 50,
// left: 60 right: 200,
bottom: 20 bottom: 50,
left: 200,
}, },
data: { data: {
columns: [ columns: [
@ -32,10 +148,10 @@
}, },
}, },
legend: { legend: {
// position: 'right' position: 'right'
}, },
subchart: { subchart: {
// show: true show: true
}, },
axis: { axis: {
rotated: true, rotated: true,
@ -54,6 +170,7 @@
} }
} }
}); });
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save