Changing axis on google visualization line chart is inconsistent

Question

I am working on a google visualization where the data being returned can have more than 2 axis. If there are more than 2, I only show the first 2 coming back and provide a control for switching the axis.

Here is my work in progress... http://jsfiddle.net/benstraw/Lx7w0jgL/

    //Load the Visualisation API and the package you want to use
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

//Set a callback to run with the API is loaded
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    jsonData = {"cols":[{"id":"col_1","label":"Date","type":"string","_cct":{"datatype":"Text","icuFormat":null}},{"id":"col_2","label":"Sum of DEP1","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_3","label":"Sum of DEP14","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_4","label":"Sum of DEP60","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}},{"id":"col_5","label":"Sum of FDEP","type":"number","_cct":{"datatype":"Number","icuFormat":"#,###"}},{"id":"col_6","label":"Avg of FDEP7 Rate","type":"number","_cct":{"datatype":"Percentage","icuFormat":"#.##%"}},{"id":"col_7","label":"Avg of FDEP14 Rate","type":"number","_cct":{"datatype":"Percentage","icuFormat":"#.##%"}},{"id":"col_8","label":"Sum of DEP90","type":"number","_cct":{"datatype":"Curency","icuFormat":"$#,###.##"}}], "rows":[{"c": [{"v":"\"2015-01-01\"","f":"\"2015-01-01\""},{"v":1619.67,"f":"$1,619.67"},{"v":4217.28,"f":"$4,217.28"},{"v":8092.95,"f":"$8,092.95"},{"v":105,"f":"105"},{"v":0.001429,"f":"0.14%"},{"v":0.001531,"f":"0.15%"},{"v":8588.57,"f":"$8,588.57"}]}, {"c": [{"v":"\"2015-01-02\"","f":"\"2015-01-02\""},{"v":3739.06,"f":"$3,739.06"},{"v":10520.47,"f":"$10,520.47"},{"v":16519.71,"f":"$16,519.71"},{"v":128,"f":"128"},{"v":0.001506,"f":"0.15%"},{"v":0.001653,"f":"0.17%"},{"v":17160.87,"f":"$17,160.87"}] }, {"c": [{"v":"\"2015-01-03\"","f":"\"2015-01-03\""},{"v":3423.92,"f":"$3,423.92"},{"v":8905.73,"f":"$8,905.73"},{"v":13813.97,"f":"$13,813.97"},{"v":119,"f":"119"},{"v":0.001433,"f":"0.14%"},{"v":0.001495,"f":"0.15%"},{"v":14773.98,"f":"$14,773.98"}] } ], "_cct":{"query_name":"Query_2015-03-16","query_link":"\/reports\/query_builder\/7"}};
    //create the data table
    var data = new google.visualization.DataTable(jsonData);

    var options = {
    // colors: ['rgb(0, 158, 229)','rgb(228, 59, 0)', 'rgb(228, 0, 229)', '#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999','rgb(158, 229, 0)', '#1a1a1a'],
    fontSize: 12,
    backgroundColor: 'transparent',
    chartArea: {
      width: '75%',
      height: '75%'
    },
    // width: '100%',
    titleTextStyle: {
      fontSize: 20
    },
    legend: {
      position: 'top',
      maxLines: 5
    },
    animation: {
      duration: 1000,
      startup: false,
      easing: 'in'
    },
    crosshair: { 
      trigger: 'both',
      opacity: 0.6, 
      color: 'rgb(228, 59, 0)'
    },
    hAxis: {
      slantedText: true,
      gridLines: {color: '#333', count: 6}
    }
  }
    var vAxes = {"0":{"title":"Curency","format":"$#,###.##"},"3":{"title":"Sum of FDEP","format":"#,###"},"4":{"title":"Percentage","format":"#.##%"}}

    var series = {"0":{"targetAxisIndex":0},"1":{"targetAxisIndex":0},"2":{"targetAxisIndex":0},"3":{"targetAxisIndex":3},"6":{"targetAxisIndex":0}}

    // set up the column picker
    var panelData = {"Curency":[{"name":"Sum of DEP1","colId":0,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP14","colId":1,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP60","colId":2,"type":"Curency","targetAxisIndex":0},{"name":"Sum of DEP90","colId":6,"type":"Curency","targetAxisIndex":0}],"Number":[{"name":"Sum of FDEP","colId":3,"type":"Number","targetAxisIndex":3}],"Percentage":[{"name":"Avg of FDEP7 Rate","colId":4,"type":"Percentage","targetAxisIndex":4},{"name":"Avg of FDEP14 Rate","colId":5,"type":"Percentage","targetAxisIndex":4}]}


    var seriesOpts = { 'series': series }
    options = _.assign(options, seriesOpts)
    var vAxesOpts = { 'vAxes': vAxes }
    options = _.assign(options, vAxesOpts)

    var filterColumns = [5,6]
    var chartView = new google.visualization.DataView(data)
    chartView.hideColumns(filterColumns)
    var chart = new google.visualization.LineChart(
        document.getElementById('kpi-chart')
    );
    chart.draw(chartView, options);

    var columnPanel = $('.kpi-controls-panel .column-list')
      _.forEach(panelData, function(n, key) {
        columnPanel.append('<h2>' + key + '</h2>')
        _.forEach(n, function(o, key) {
          //console.log('colProp', o)
          var colRow = $('<div></div>')
          var checkbox = $('<input class="col-cb" type="checkbox" name="column" value="' + o.colId + ':' + o.targetAxisIndex + '"/>')
          var label = o.name + '(' + o.colId + ')'
          if (_.has(series, o.colId)) {
            checkbox.attr('checked', 'checked')
          }
          colRow.append(checkbox)
          colRow.append(label)
          columnPanel.append(colRow)
        })
      })
  var button = $('<p class="button"><a><strong>update columns</strong></a></p>')
  columnPanel.append(button)

  // handle the column update
  $('.kpi-controls-panel .button').click(function(event) {
    console.log('update columns clicked')
    showCols = [0]
    hideCols = []
    options.series = {}
    _.forEach($('.column-list .col-cb'), function(cb, i) {
      var colId = parseInt(cb.value.split(':')[0])
      var tarId = parseInt(cb.value.split(':')[1])
      if (cb.checked) {
        console.log('cb val: ', cb.value)
        showCols.push(parseInt(colId)+1)
        options.series[colId] = {targetAxisIndex: tarId}
        // delete options.series[cb.value+1]
      } else {
        hideCols.push(parseInt(colId)+1)
      }
      console.log('series: ', options.series)
    })
    console.log('showCols', showCols)
    console.log('hideCols', hideCols)
    // var newChart = new google.visualization.DataView(data)
    console.log(options)
    chartView.setColumns(showCols)
    chart.draw(chartView, options)
    var controls = $('.kpi-controls-panel');
    controls.slideToggle(function() {
    });
  })
  $('#kpi-controls-link').click(function(){
    var controls = $('.kpi-controls-panel');
    controls.slideToggle(function() {
    });
  })

}

If you turn of the item in the number axis, and turn on the 2 items in the percentage axis the switch happens correctly, but when I switch them back the number axis range is wrong, it has the range for the currency axis.

Answer 1

I'm not sure why, but having the array of column numbers being out of order seemed to be causing problems. I added the line showCols.sort() before you call setColumns and it appears to have fixed the behavior you described in the question. Here's a forked fiddle http://jsfiddle.net/qf8nL24s/1/