Skip to content

C
c3-closed
Commit 3ddaa7b5 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix conflict

parents cc95d591 5b8f2554
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 1 deletion
c3.min.js
View file @ 3ddaa7b5
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/index.html
View file @ 3ddaa7b5
......@@ -44,7 +44,7 @@
<h3>Specify Axis Min/Max Values</h3>
<p>You can specify your own min/max values for each axis.</p>
<p><a class="btn btn-default" href="./samples/axes_minmax.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
</div>
......@@ -108,6 +108,11 @@
<p>Display as Bar Chart</p>
<p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Arc Gauge</h3>
<p>Display as Arc Gauge</p>
<p><a class="btn btn-default" href="./samples/chart_arc_gauge.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
......
htdocs/samples/chart_arc_gauge.html 0 → 100644
View file @ 3ddaa7b5
<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: [
[ '%', 91.4 ]
],
type: 'gauge'
},
gauge: {
// color: '', // default value is #e0e0e0 (gray). "color: '', " removes background color (transparent).
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'
}
});
var cycleDemo = function () {
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '');
}, 2000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 4000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 5000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 6000);
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '#e0e0e0');
}, 8000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 10000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 11000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 12000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 10);
}, 14000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 16000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 15000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 18000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 39);
}, 20000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 22000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 23000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 24000);
}
cycleDemo();
setInterval(cycleDemo, 30000);
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment