Custom Visualization using c3 JS


(Nkp1988) #1

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();
});

(CJ Cenizal) #2

Hi there,

I'm sorry, but we aren't currently able to offer support for custom plugin development. Hopefully this will change in the future and we'll be able to help you, but for now you could try checking out the source code of other plugin OSS projects, to see how they've solved similar problems (https://github.com/elastic/kibana/wiki/Known-Plugins).

Thanks,
CJ


(system) #3