I am creating a custom speedometer using gauge in C3 JS. How ever i am not getting the Visualization when i log in to kibana. I am able to see some text values from controller. Please help. C3 code works separately. However the graph is not dispalyed inside kibana. Plugin name, ICON and options are displayed inside kibana.
Below is my speedometer controller code. Show graph method is called on load. But the graph is not visible. Thanks
module.controller('speedometerController', function($scope) {
$scope.title = "Naveen";
$scope.vis.params.start = 0;
$scope.vis.params.end = 100;
$scope.vis.params.value = 50;
$scope.chart = null;
$scope.config = {};
$scope.config.min = {};
$scope.showGraph = function() {
$scope.title = "Kumar";
$scope.chart = c3.generate({
data : {
bindto : '#speedometer',
columns : [ [ 'data', $scope.vis.params.value ] ],
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: {
// format: function(value, ratio) {
// return value;
// },
// show: false // to turn off the min/max labels.
// },
min : $scope.vis.params.start, // 0 is default, //can handle
// negative min e.g. vacuum /
// voltage / current flow / rate
// of change
max : $scope.vis.params.end, // 100 is default
// units: ' %',
width : 15
// for adjusting arc thickness
},
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 : 270
}
});
}
$scope.showGraph();
});