JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.js"></script>
<div id="MeterGauge"></div>
JavaScript
var gauge = c3.generate({
bindto: d3.select('div#MeterGauge'),
//data: {
// url: 'data/data.json',
// mimeType: 'json',
// type: 'gauge'
//},
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
onclick: function(d, i) {
console.log("onclick", d, i);
},
onmouseover: function(d, i) {
console.log("onmouseover", d, i);
},
onmouseout: function(d, i) {
console.log("onmouseout", d, i);
}
},
gauge: {
// label: 'One Value',
// min: 0,
// max: 100,
// units: '%',
// width: 50
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
threshold: {
// unit: 'value', // percentage is default
// max: 200, // 100 is default
values: [30, 60, 90, 100]
}
},
size: {
height: 200
}
});
setTimeout(function() {
gauge.load({
columns: [
['data', 10]
]
});
}, 1000);
//setTimeout(function () {
// gauge.load({
// url: 'data/data.json',
// mimeType: 'json',
// keys: {
// value: ['Another Value']
// }
// });
//}, 2000);
new Request.JSON({
url: '/echo/json/',
data: {
json: JSON.encode({
text: 'some text',
array: [1, 2, 'three'],
object: {
par1: 'another text',
par2: [3, 2, 'one'],
par3: {}
},
percent: 44.8
}),
delay: 3
},
onSuccess: function(response) {
update_gauge(response, $('post'));
}
}).send();
var update_gauge = function(obj, result) {
console.log('response ' + obj.percent);
gauge.load({
columns: [
['data', obj.percent]
]
});
};