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

Add sample for gauge and step - #254

pull/274/head
Masayuki Tanaka 11 years ago
parent
f22e87d93c
commit
a76e3b332d
3 changed files with 135 additions and 0 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. 48
      htdocs/samples/chart_gauge.html
  2. 37
      htdocs/samples/chart_step.html
  3. 50
      htdocs/samples/chart_step_category.html

48
htdocs/samples/chart_gauge.html
Unescape View File

@ -0,0 +1,48 @@
<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>
var gauge_fuellevel = c3.generate({
data: {
columns: [
[ '%', 81.4 ]
],
type: 'gauge'
},
gauge: {
// color: '', // default value is a grey. "color: '', " is no background.
label: {
format: function(value, ratio) {
return value;
},
// show: false // to turn off the min/max labels.
},
min: 0,//can handle negative min e.g. vacuum / voltage / current flow / rate of change
max: 100,
style: 'arc', // Only style currently.
units: ' %',
// width: 39 // for adjusting arc thickness
},
legend: {
show: false
},
size: {
height: 240,
width: 240
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
values: ['percentage', 30, 60, 90] // alternate first value is 'value'
}
});
</script>
</body>
</html>

37
htdocs/samples/chart_step.html
Unescape View File

@ -0,0 +1,37 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/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>
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
// ['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
}
},
subchart: {
show: true
},
});
setTimeout(function () {
chart.load({
columns: [
['data2', 130, 100, 140, 200, 150, 50]
]
});
}, 1000);
</script>
</body>
</html>

50
htdocs/samples/chart_step_category.html
Unescape View File

@ -0,0 +1,50 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/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>
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'hogehoge', 'aaa', 'aaaaaa', 'a', 'b'],
['data1', 300, 350, 300, 0, 0, 0],
// ['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
},
empty: {
abort: false,
label: {
text: 'hoge'
}
}
},
axis: {
x: {
type: 'categorized'
}
},
subchart: {
show: true
},
});
setTimeout(function () {
chart.load({
columns: [
['data2', 130, 100, 140, 200, 150, 50]
]
});
}, 1000);
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save