I'm a newbie in javascript and am trying to use googlecharts. Now I have a problem about source column. Now I can hide some column I need but when I toggle between hide and show the sourcecolumn is not showing anymore.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var view = new google.visualization.DataView(data); view.setColumns([ 0, 1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" }, 2,{ calc: "stringify",sourceColumn: 2,type: "string",role: "annotation" }]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "/" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); console.log(view); var columns = []; var series = {}; for (var i = 0; i < data.getNumberOfColumns(); i++) { columns.push(i); if (i > 0) { series[i - 1] = {}; } } google.visualization.events.addListener(chart, 'select', function () { var sel = chart.getSelection(); // if selection length is 0, we deselected an element if (sel.length > 0) { // if row is undefined, we clicked on the legend if (sel[0].row === null) { var col = sel[0].column; if (columns[col] == col) { // hide the data series columns[col] = { label: data.getColumnLabel(col), type: data.getColumnType(col), calc: function () { return null; }, }; // grey out the legend entry series[col - 1].color = '#CCCCCC'; } else { // show the data series columns[col] = col; series[col - 1].color = null; } var view = new google.visualization.DataView(data); view.setColumns(columns); console.log(view); chart.draw(view, options); } } }); } </script> </head> <body> <div id="columnchart_values" style="width: 900px; height: 500px;"></div> </body> </html> This is my SouceCode - https://jsfiddle.net/vpz2a4nc/ Please help me. -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b9a93c6c-67d2-4ec8-be24-ba7d2611c352%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
