CODEWITHSUNDEEP
javascriptangularjsgoogle-visualization
guagay_wk
guagay_wk

Reputation: 28090

Make value appear on every data point on chart

I have this plunker which creates a simple line chart with only 3 data points using AngularJS Google Chart. http://plnkr.co/edit/K6nX4Ilgexq9OWkVSPwf?p=preview

app.controller('MainCtrl', function($scope) {
  var chart1 = {};
  chart1.type = "LineChart";
  chart1.data = [
    ['Component', 'cost'],
    ['Software', 50000],
    ['Hardware', 80000],

When you move the mouse to touch the data point, a window appears and the cost of the item is shown. I would like the cost of all the data points to appear on the chart all the time. It will not clog up the chart since there are only 3 data points.

How can this be done with Google Chart, if possible?

Upvotes: 1

Views: 100

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117354

You may add another column(with the same value as the 2nd column) and use this column as annotation. http://plnkr.co/edit/luSgUPmbhPbSFZ4Z7CRz?p=preview

// Code goes here

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function($scope) {
  var chart1 = {};
  chart1.type = "LineChart";
  chart1.data = [
    ['Component', 'cost',{type:'number',role:'annotation'}],
    ['Software', 50000,50000],
    ['Hardware', 80000,80000],

  ];
  chart1.data.push(['Services', 20000,20000]);
  chart1.options = {
    displayExactValues: true,
    width: 300,
    height: 150,
    is3D: true,
    chartArea: {
      left: 10,
      top: 10,
      bottom: 0,
      height: "100%"
    },
    explorer: {
      actions: ['dragToZoom', 'rightClickToReset']
    }
  };

  chart1.formatters = {
    number: [{
      columnNum: 1,
      pattern: "$ #,##0.00"
    },{
      columnNum: 2,
      pattern: "$ #,##0.00"
    }]
  };

  $scope.chart = chart1;

  $scope.aa = 1 * $scope.chart.data[1][1];
  $scope.bb = 1 * $scope.chart.data[2][1];
  $scope.cc = 1 * $scope.chart.data[3][1];
});
<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
    
    <script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<div ng-app='myApp'><div ng-controller="MainCtrl">
  <div style="float:right;position:relative;z-index:100;background:#f1f1f1;padding-top:40px">
  <p>
    Software: <input type=range min=10000 max=100000 value={{aa}} ng-model="aa" ng-change="chart.data[1][1]=1*aa;chart.data[1][2]=1*aa"> {{aa}}
  </p>
  <p>
    Hardware: <input type=range min=10000 max=100000 value={{bb}} ng-model="bb" ng-change="chart.data[2][1]=1*bb;chart.data[2][2]=1*bb">{{bb}}
  </p>
  <p>
    Services: <input type=range min=10000 max=100000 value={{cc}} ng-model="cc" ng-change="chart.data[3][1]=1*cc;chart.data[3][2]=1*cc">{{cc}}
  </p>
                                                                                                                                       </div>
  <div google-chart chart="chart">
  </div>

</div></div>

Upvotes: 1

Henrik Aronsson
Henrik Aronsson

Reputation: 1413

I would make a different approach with a column chart instead, and make use of targetFocus: 'category'. Check this out

Upvotes: 1

Related Questions