0

I have angular google chart, whenever user clicks on remove R1 button R1 should be removed, when user clicks on R2 then R2 must be removed. Here I have my [Fiddle][1] I tried using google chart method of removing removeColumn(['r1']) like how google chart uses but didnt worked I need method to hide and show columns in angularjs google chart. Please let me know if you have any idea.

[1]: http://jsfiddle.net/3crujkav/
Sudarshan Kalebere
  • 3,813
  • 3
  • 34
  • 64

1 Answers1

1

using checkboxes would probably be easier... 

var data;
var colors = ['red', 'blue', 'green'];
$scope.$watch('datax', function(newValue, oldValue) {
  data = google.visualization.arrayToDataTable($scope.datax);
  colors.forEach(function (color, index) {
    data.setColumnProperty(index + 1, 'color', color);
  });
  drawChart();
}, true);

$scope.toggleCol = function() {
  drawChart();
}

function drawChart() {
  var chartColors = [];
  var chartColumns = [0];
  var view = new google.visualization.DataView(data);

  var checks = document.getElementsByTagName('input');
  for (var i = 0; i < checks.length; i++) {
    var seriesColumn = parseInt(checks[i].value);
    if (checks[i].checked) {
      chartColumns.push(seriesColumn);
      chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
    }
  }
  view.setColumns(chartColumns);
  options.colors = chartColors;
  chart.draw(view, options);
}

see forked fiddle

EDIT

use a DataView to convert the value columns from string to number... 

var data;
var dataView;
$scope.$watch('datax', function(newValue, oldValue) {
  data = google.visualization.arrayToDataTable($scope.datax);
  dataView = new google.visualization.DataView(data);

  // convert string columns to number
  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
    // skip first column
    if (colIndex === 0) {
      return;
    }

    viewColumns.push({
      calc: function (dt, row) {
        return parseInt(dt.getValue(row, colIndex));
      },
      label: data.getColumnLabel(colIndex),
      type: data.getColumnType(colIndex)
    });
  });
  dataView.setColumns(viewColumns);


  drawChart();
}, true);

then use the new dataView to finish drawing... 

function drawChart() {
  var chartColors = [];
  var chartColumns = [0];

  // use dataView here
  var view = new google.visualization.DataView(dataView);
  ...
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • Hi @WhiteHat thank you so much for reply sir, yeah it works but partially, sir I will be getting all data at first call only, so suppose I have 100 records and by default I showing one record in chart. Now when user selects anyone I should add that to chart if he deselects then I will remove it from chart. In short I dont know how many records user will select from multiselect dropdown so we cant decide chart header and colors in advance, as soon as user checks R2 I will add r2 to chart when he selects R3 I will add R3 from available data. – Sudarshan Kalebere Apr 12 '17 at 05:16
  • This is the fiddle with 6 records but there may be 20 or 30 or 40 http://jsfiddle.net/bg4r5hqy/ can you please make it dynamic? really appreciate your answer sir, giving you one upvote. pls help me in dynamic also then will accept it thanks again sir. – Sudarshan Kalebere Apr 12 '17 at 05:16
  • http://jsfiddle.net/s8wg84Ln/ this one working only when I define colors for each record, is it possible to dynamically define color when user selects any R1 check? because I will be having all data, but only need to show first record, then I dont know which one user clicks then I need to add to chart. – Sudarshan Kalebere Apr 12 '17 at 05:21
  • javascript / browsers don't offer a color palette -- you'll have to get the colors from somewhere -- do you want to use a random color generator like [this answer](http://stackoverflow.com/a/1484514/5090771) provides? – WhiteHat Apr 12 '17 at 13:12
  • Really superb sir, i mean it. I have one more doubt sir, the backend data is coming in array of array format with all data strings something like this jsfiddle, can you please tell me a way to format columns to number or integer so that it will work? http://jsfiddle.net/8wuapp9h/ actually all numbers I need as integers to work this chart. and I cant define them initially because dynamically we are adding column, any idea sir please help with this one. – Sudarshan Kalebere Apr 13 '17 at 11:25
  • let the values come in as strings, then use DataView to convert, see __EDIT__ above... – WhiteHat Apr 13 '17 at 11:36
  • Thanks for the edit, here I copied your code in this jsfiddle http://jsfiddle.net/4vt5crz1/ but its not working, can you please provide me your fiddle link? I dont have jquery in my project so can we iterate angular way? please this is last edit I am asking sir. pls provide me fiddle. Thanks again. – Sudarshan Kalebere Apr 16 '17 at 13:27
  • Here I tried with angular.forEach() but it is not working http://jsfiddle.net/uypdjytr/ can you please edit and provide fiddle ? Is it possible to use format specifiers in google chart instead of iterating ? – Sudarshan Kalebere Apr 16 '17 at 14:30
  • Please solve here so that next time it will help someone who needs it, I have created seperate question for this. http://stackoverflow.com/questions/43439028/how-to-change-format-to-number-from-string-except-first-row-in-array – Sudarshan Kalebere Apr 16 '17 at 15:54
  • as I am pushing data row after data comes in from api, and keeping first row selected by default hence graph is taking small width 400 , but on second selction its taking 1020. I tried with width in options that is not aligining dates correctly as it does default by google chat. Any solution sir? – Sudarshan Kalebere Apr 21 '17 at 08:39