Google विज़ुअलाइजेशन लाइन चार्ट पर अक्ष बदलना असंगत

Question

मैं एक Google विज़ुअलाइजेशन पर काम कर रहा हूं जहां डेटा लौटाया जा सकता है 2 अक्ष से अधिक हो सकता है। यदि 2 से अधिक हैं, तो मैं केवल पहले 2 वापस आ रहा हूं और अक्ष को स्विच करने के लिए नियंत्रण प्रदान करता हूं।

यहाँ प्रगति में मेरे काम ... 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() { 
    }); 
    }) 

} 

आप, संख्या अक्ष में आइटम के बारी है, और प्रतिशत में 2 आइटम चालू अक्ष स्विच सही ढंग से होता है, लेकिन जब है मैं उन्हें वापस कर देता हूं संख्या अक्ष श्रेणी गलत है, इसमें मुद्रा अक्ष के लिए सीमा है।

Answer 1

मुझे यकीन नहीं है कि क्यों, लेकिन स्तंभ संख्याओं की सरणी क्रम से बाहर होने की वजह से समस्याएं उत्पन्न हो रही हैं। setColumns पर कॉल करने से पहले मैंने showCols.sort() लाइन जोड़ा और ऐसा लगता है कि आपने प्रश्न में वर्णित व्यवहार को ठीक किया है। यहां एक फोर्कड फिडल http://jsfiddle.net/qf8nL24s/1/