Cambiare asse su grafico a linee di visualizzazione di google è incoerente

Question

Sto lavorando su una visualizzazione di Google in cui i dati restituiti possono avere più di 2 assi. Se ce ne sono più di 2, mostro solo i primi 2 che ritornano e forniscono un controllo per la commutazione dell'asse.

Ecco il mio lavoro in corso ... 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() { 
    }); 
    }) 

} 

Se si attiva dell'elemento nell'asse numerici e girare sui 2 nella percentuale sull'asse lo switch avviene in modo corretto, ma quando Riaccedo l'intervallo dell'asse numerico sbagliato, ha l'intervallo per l'asse della valuta.

Answer 1

Non sono sicuro del perché, ma la presenza di un array di numeri di colonna non funzionanti sembrava causare problemi. Ho aggiunto la riga showCols.sort() prima di chiamare setColumns e sembra che abbia corretto il comportamento descritto nella domanda. Ecco un violino biforcuto http://jsfiddle.net/qf8nL24s/1/