adding a pie chart to the panel

[supuntenna]

I am new to solr and banana. I have created the module.js, module.html and the editor.html files. But when i tried to run the fie chart on the dash board it gives me an error on the chrome console saying 'pie()' is not a function.

modulejs.txt
/////////////////////////////////////////////////////////////////////
module.js file/////////////////

define([
'angular',
'app',
'underscore',
'jquery',
'kbn',

'./d3.tip',
'./d3',
'./d3.min'

],
function(angular, app, _, $, kbn, d3, d3tip, d3min) {
'use strict';

var module = angular.module('kibana.panels.pie', []);
app.useModule(module);

module.controller('pie', function($scope, querySrv, dashboard, filterSrv) {
  $scope.panelMeta = {
    modals: [{
      description: "Inspect",
      icon: "icon-info-sign",
      partial: "app/partials/inspector.html",
      show: $scope.panel.spyable
    }],
    editorTabs: [{
      title: 'Queries',
      src: 'app/partials/querySelect.html'
    }],
    status: "Experimental",
    description: "Display the D3 Bar Chart with Tooltip."
  };

  // Set and populate defaults
  var _d = {
    queries: {
      mode: 'all',
      query: '*:*',
      custom: ''
    },
    field: '',
    size: 10,
    spyable: true,
    show_queries: true,
    error: '',
  };
  _.defaults($scope.panel, _d);

  $scope.init = function() {
    $scope.hits = 0;
    $scope.$on('refresh', function() {
      $scope.get_data();
    });
    $scope.get_data();
  };

  $scope.get_data = function() {
  	// Make sure we have everything for the request to complete
    if (dashboard.indices.length === 0) {
      return;
    }
    delete $scope.panel.error;
    $scope.panelMeta.loading = true;
    var request, results;

    $scope.sjs.client.server(dashboard.current.solr.server + dashboard.current.solr.core_name);

    request = $scope.sjs.Request().indices(dashboard.indices);
    $scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);

    // Populate the inspector panel
    $scope.inspector = angular.toJson(JSON.parse(request.toString()), true);

    // Build Solr query
    var fq = '';
    if (filterSrv.getSolrFq() && filterSrv.getSolrFq() !== '') {
      fq = '&' + filterSrv.getSolrFq();
    }
    var wt_json = '&wt=json';
    var rows_limit = '&rows=0'; // for terms, we do not need the actual response doc, so set rows=0
    var facet = '&facet=true&facet.field=' + $scope.panel.field + '&facet.limit=' + $scope.panel.size;

    // Set the panel's query
    $scope.panel.queries.query = querySrv.getORquery() + wt_json + rows_limit + fq + facet;

    // Set the additional custom query
    if ($scope.panel.queries.custom != null) {
      request = request.setQuery($scope.panel.queries.query + $scope.panel.queries.custom);
    } else {
      request = request.setQuery($scope.panel.queries.query);
    }

    results = request.doSearch();

    // Populate scope when we have results
    results.then(function(results) {
      // Check for error and abort if found
      if (!(_.isUndefined(results.error))) {
        $scope.panel.error = $scope.parse_error(results.error.msg);
        return;
      }

      var sum = 0;
      var missing = 0;
      $scope.panelMeta.loading = false;
      $scope.hits = results.response.numFound;
      $scope.data = [];
      $scope.maxRatio = 0;

      $scope.yaxis_min = 0;
      _.each(results.facet_counts.facet_fields, function(v) {
        for (var i = 0; i < v.length; i++) {
          var term = v[i];
          i++;
          var count = v[i];
          sum += count;
          if (term === null) {
            missing = count;
          } else {
            // if count = 0, do not add it to the chart, just skip it
            if (count === 0) {
              continue;
            }
            var slice = {
              letter: term,
              frequency: count                
          	};
            if (count / $scope.hits > $scope.maxRatio) {
              $scope.maxRatio = count / $scope.hits;
            }
            $scope.data.push(slice);
          }
        }
      });
      $scope.$emit('render');
    });
  };

  $scope.build_search = function(word) {
    if(word) {
      filterSrv.set({type:'terms',field:$scope.panel.field,value:word,mandate:'must'});
    } else {
      return;
    }
    dashboard.refresh();
  };

  $scope.set_refresh = function(state) {
    $scope.refresh = state;
    // if 'count' mode is selected, set decimal_points to zero automatically.
    if ($scope.panel.mode === 'count') {
      $scope.panel.decimal_points = 0;
    }
  };

  $scope.close_edit = function() {
    if ($scope.refresh) {
      $scope.get_data();
    }
    $scope.refresh = false;
    $scope.$emit('render');
  };
});

module.directive('pieChart', function() {
		 
  return {
    restrict: 'A',
    link: function(scope, element) {
      // Receive render events
      scope.$on('render', function() {
        render_panel();
      });

      // Re-render if the window is resized
		angular.element(window).bind('resize', function() {
        render_panel();
      });
      // Function for rendering panel
	 function render_panel() {
        element.html("");
        var width = element.parent().width();
        var height = parseInt(scope.row.height);
		

        
		  var margin = {top: 40, right: 20, bottom: 60, left: 40};
          width = width - margin.left - margin.right;
          height = height - margin.top - margin.bottom;

        //  var formatPercent = d3.format(".0");
		
		
		
					  		  
          var svg = d3.select(element[0]).append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
			  .attr('style',  'background-color:red')
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			  
			  
          var tip = d3tip()
              .attr('class', 'd3-tip')
              .offset([-10, 0])
              .html(function(d) {
                  return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
				 
			});
			
			/*var z;
			for(z=0; z<5; z++)
			{	
				alert("fr"+scope.data[z].frequency);
				alert("lett"+scope.data[z].letter);
			
			}
			 */
          svg.call(tip);
		 
 var radius = Math.min(width, height) / 2;
 var  g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var color = ['#F2D7D5','#E8DAEF','#F1948A','#E59866','#EAEDED','#2ECC71','#5DADE2','#CD6155'];
		
	var pie = d3.layout.pie()
		.sort(null)
		.value(function(d) { return d.frequency; });
			
			alert(pie);
			
	var path = d3.svg.arc()
		.outerRadius(radius - 10)
		.innerRadius(0);
		alert("after arc");
		
	var label = d3.svg.arc()
		.outerRadius(radius - 40)
		.innerRadius(radius - 40);

alert("after label");
var arc = g.selectAll(".arc")
.data(pie(scope.data))
.enter().append("g")
.attr("class", "arc");

	arc.append("path")
		  .attr("d", path)
		  .attr("fill", function(d) { return color(d.letter); 
		  });
		
	arc.append("text")
		  .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
		  .attr("dy", "0.35em")
		  .text(function(d) { return d.letter; });
      }
    }
  };
});

});

[bharath2925]

Hi. Even I'm facing the same problem. Can you please tell me if this problem was resolved?

[ifancytolearn]

I use solr/banana to integrate with my cassandra for search use case and analytics. I am trying to add a Terms(pie chart) in my banana dashboard. It seems that the pie chart loads only for cartid which is the partition key of my cassandra. If I use other index to display my pie chart, it does not load at all.

Can you please help?

[bharath2925]

Hi, I would love to help. Can you please share the code snippet so that I can re-run the code and check the error. Thanks, Bharath

…

On Fri, Jul 20, 2018 at 1:14 PM ifancytolearn ***@***.***> wrote: I use solr/banana to integrate with my cassandra for search use case and analytics. I am trying to add a Terms(pie chart) in my banana dashboard. It seems that the pie chart loads only for cartid which is the partition key of my cassandra. If I use other index to display my pie chart, it does not load at all. Can you please help? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#306 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ae1i3WwPBX86-jNhZ7C7QaWL4bVPmcQkks5uIhAHgaJpZM4PJtCb> .