assign $scope.chart.options based on conditional check - javascript

Question

I am working on google chart API.I am working on timeline chart. I want to assign the colors of the bar inside the timeline chart based on the conditional check.

Below is the condition:

 var firstWord = value.detail.trim().split(' ')[0];
   if(firstWord === 'monthly'){  $scope.chart.options.colors[0]='yellow';}
   if(firstWord === 'daily') {  $scope.chart.options.colors[0]='green';}

How to assign the colors in the $scope.chart.options dynamically at runtime based on conditional check.

complete js code:

app.controller('MyController', ['$rootScope', '$scope',function ($scope, MyService) {
     $scope.chart = {};
    $scope.chart.type = "Timeline";
    $scope.chart.cssStyle = "height:80%; width:100%;";

    $scope.chart.options = {
        timeline: {
             barLabelStyle: { fontSize: 14 ,bold:true}
        },
         // colors:['#7EAE5A','#0E77B4'],
     };
   $scope.chart.data = {
        "cols": [
            {id: "status", label: "Status", type: "string"},
            {id: "detail", label: "Detail", type: "string"},
            {id:"tooltip", role:"tooltip", type:"string"},
              {id: "startDate", label: "startDate", type: "date"},
            {id: "endDate", label: "endDate", type: "date"}
        ]
    };

   //getting the response data
        MyService.getResponseData().then(
            function (response) {
                $scope.myResponse = response;
                    $scope.chart.data.rows = {};
                    angular.forEach($scope.myResponse, function (value, key) {
                         var firstWord = value.detail.trim().split(' ')[0];
                        if(firstWord === 'monthly'){  $scope.chart.options.colors[0]='yellow';}
                        if(firstWord === 'daily') {  $scope.chart.options.colors[0]='green';}
                         var cData = {
                            c: [{v: i}, {v: value.detail },
                                {v: "tooltip"},{v: value.startDate}, {v: value.endDate}]
                         };
                        weekRows.push(cData);i++;

                    });
                    $scope.chart.data.rows = weekRows;
               }
            },

WhiteHat · Accepted Answer · 2018-01-30T15:54:24.643

you can use a DataView to dynamically change the color
using a calculated column with the 'style' role

see following working snippet...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var chart;
  var dataTable;
  var options;

  dataTable = google.visualization.arrayToDataTable([
    ['100', 'daily_HourlyMay', new Date(2018, 5, 1), new Date(2018, 5, 1) ],
    ['101', 'yearly_hourlyMarch113', new Date(2018, 3, 27), new Date(2018, 3, 27) ],
    ['102', 'monthly_hourlyFeb', new Date(2018, 2, 23), new Date(2018, 2, 30) ],
    ['103', 'daily_HourlyApril', new Date(2018, 4, 11), new Date(2018, 4, 18) ],
    ['104', 'daily_HourlyMarch224', new Date(2018, 3, 16), new Date(2018, 3, 27) ],
    ['105', 'monthly_HourlySept', new Date(2018, 6, 5), new Date(2018, 6, 18) ],
    ['106', 'yearly_sometext shown here', new Date(2018, 1, 12), new Date(2018, 1, 30) ],
    ['107', 'monthly_HourlySept', new Date(2018, 8, 5), new Date(2018, 8, 18) ],
    ['108', 'yearly_sometext shown here', new Date(2018, 9, 12), new Date(2018, 9, 30) ],
    ['109', 'daily_text1 data', new Date(2018, 7, 5), new Date(2018, 7, 18)
  ]], true);

  dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns([0, 1, {
    calc: function (dt, row) {
      var color;
      var firstWord = dt.getValue(row, 1).trim().split('_')[0];
      switch (firstWord) {
        case 'monthly':
          color = 'yellow';
          break;

        case 'daily':
          color = 'green';
          break;

        case 'yearly':
          color = 'blue';
          break;

        default:
          color = 'black';
      }
      return color;
    },
    role: 'style',
    type: 'string',
  }, 2, 3]);

  options = {timeline: {showRowLabels: false}};
  chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  chart.draw(dataView, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

UPDATE

in angular, set the view in app.js...

chart1.view = {columns: [0, 1, {
  calc: function (dt, row) {
    var color;
    var firstWord = dt.getValue(row, 1).trim().split('_')[0];
    switch (firstWord) {
      case 'monthly':
        color = 'yellow';
        break;

      case 'daily':
        color = 'green';
        break;

      case 'yearly':
        color = 'blue';
        break;

      default:
        color = 'black';
    }
    return color;
  },
  role: 'style',
  type: 'string',
}, 2, 3]};

I was trying to implement the same for https://plnkr.co/edit/eIaB0iO9tCmYfRbD7Pk2?p=preview and could not succeed. Can you please advice? — user9241515, Jan 30 '18 at 15:35
I was trying for this https://stackoverflow.com/questions/21872915/vertical-reference-line-in-google-timeline-visualization/48509661#48509661 , and implemented this in my demo https://plnkr.co/edit/5CtPzoDlnZokUoUwoEfW?p=preview but could not succeed showing the line at today's date.Is there any way to highlight on h-axis on today's date instead of vertical line, please advice. — user9241515, Jan 30 '18 at 19:34
the problem is finding the coordinates to highlight, so you'll have to go through the same routine regardless if you add a vertical line, label, highlight, etc... -- but that's a different question than above... — WhiteHat, Jan 30 '18 at 19:59

assign $scope.chart.options based on conditional check - javascript

1 Answers1