create a bar chart using service portal widget

[rick48]

 i am trying to create a bar chart for incident table for category count 

below is my code

HTML:
<div class="centered-chart row">

        <h1>Bar Chart</h1>

        <div class="chart-container">

                  <svg class="chart"></svg>

        </div>

        <div class="button-container">

                  <button class="btn" ng-click="updateBars(allData)">All</button>

        </div>

</div>

CSS:

.btn 
{
        background-color: white;
        border: 1px solid gray !important;
}

.chart rect 
{

       fill: #4682b4;
}

.chart-container
{

       height: 200px;
}

.chart text 
{
        font: 10px sans-serif;
}

.centered-chart 
{
        text-align: center;
}

.counter 
{
        text-anchor: end;
}

.axis text 
{
font: 10px sans-serif;
}
.axis path,
.axis line 
{
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
}


client script:

function($scope) {
  var c = this;

  $scope.allData = c.data.all;
  var width = c.options.width,
  barHeight = c.options.bar_height,
  leftMargin = c.options.left_margin;
  $scope.updateBars = function(data) {       

            var chart = d3.select(".chart").attr("width", width)
        .attr("height", barHeight * data.length + 50);
    d3.select(".x.axis").remove();
      chart.select(".counter").remove();
      var counter = chart.append("text").attr("class", "counter")
    .attr("y", 10)
    .attr("x", width-20);
      var x = d3.scaleLinear()
     .range([leftMargin, width])
    .domain([0, d3.max(data, function(d) { return d.value; })]);
    var bar = chart.selectAll("g").data(data, function(d) { return d.category;});
      bar.exit().remove();
     var barEnter = bar.enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
     barEnter.append("rect")
    .on("mouseover", highlightBar)
       .on("mouseout", unhighlightBar)
      .attr("class", "chart-bar")
      .attr("height", barHeight - 1)
     .attr("x", leftMargin)
    .transition().duration(750)
    .attr("width", function(d) { return x(d.value) - leftMargin; });
    barEnter.append("text")
     .attr("x", leftMargin - 5)
  .attr("y", barHeight / 2)
     .attr("width", leftMargin)
    .attr("dy", ".35em")
.style("fill", "black")
     .style("text-anchor", "end")
     .transition()
    .delay(750)
    .text(function(d) { return d.category; });
    bar.transition().duration(750)
     .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
     bar.selectAll('rect')
     .on("mouseover", highlightBar)
    .on("mouseout", unhighlightBar)
     .data(data, function(d) { return d.category;})
    .transition().duration(750)
    .attr("width", function(d) { return x(d.value) - leftMargin; });
     var xAxis = d3.axisBottom().scale(x);
     chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (barHeight * data.length) + ")")
    .attr("x", leftMargin)
   .transition()
    .delay(750)
    .call(xAxis);
    function highlightBar(d,i) {

                      d3.select(this).style("fill", "#b0c4de");

                      counter.text(d.category + ' ' + d.value);

            }

            function unhighlightBar(d,i) {

                      d3.select(this).style("fill", "#4682b4");

                      counter.text("");

            }

  }

  $scope.updateBars($scope.allData);

}


server script:

(function() {


            options.width = options.width || 600;

            options.bar_height = options.bar_height || 20;

            options.left_margin = options.left_margin || 100;

         
            data.all = [];

            var allCount = new GlideAggregate('incident');
	allCount.addQuery('active', 'true');

            allCount.addAggregate('COUNT', 'category');

            allCount.query();

            while (allCount.next()) {

                      var category = allCount.category.getDisplayValue();

                      var categoryCount = allCount.getAggregate('COUNT', 'category');

                      data.all.push({category: category, "value": categoryCount});

            } 

})();

can any one help where have i gone wrong.

[Chandra Prakash]

Try to use d3js because you will get proper documentation for that. 

For your given thread, 

Data is Inadequate. Could you provide more info.

[arey yaar]

Can i make the bar horizontally

[Chandra Prakash]

Refer below JS thread,

https://codepen.io/aronvanammers/pen/mRxZJw

Regards,

Chandra Prakash

[arey yaar]

Thanks for the reply,

The chart is horizontal and i need a vertical chart and one more thing how could i use it in widget editor by passing the value of the incident tables category field