1
\$\begingroup\$

The end result is a bar formatted table chart that has expanding and minimising rows.

The code below works fine but I'd like to know if there is a cleaner way to achieve the same result (see JSFiddle for working example).

In the production version, the datatable & the "parent" rows (for want of a better term) will be defined at run time, hence asking if there is a better way to do it.

Points to note, I'm very much an ok-ish hobbyist coder and my background is much more vb.NET orientated than JS. It took a tonne of google searching and code example plagiarism just to get it to work, so please excuse any school-boy errors.

JSFiddle

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="vis_div"></div>

JavaScript:

// Creates a bar formatted table chart with expanding and retracting rows
// DataTable contains ALL the rows to be displayed, "parent" rows are
// declared twice.  The first declaration contains the button event that shows the
// child rows when clicked.  The second declaration contains the button event that
// reduces the visable rows to the parent rows.
// Two buttons are required for ease of coding and to show a + on the first 
// declaration and a - in the second.

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawVisualization);


function drawVisualization(iRows) {

  var sRows
  if (iRows === undefined) {
    sRows = [0, 4, 10, 13]
  }
  else {
    sRows = iRows
  }

  //Create and format the DataTable visualization with bar formatter
  //This has to be done outside of the chartWrapper declaration so that
  //the bar formatter is applied.  chartWrapper does not allow for formatting
  //to be applied to the DataTable

var data = new google.visualization.DataTable();
  data.addColumn('string', '+/-');
  data.addColumn('string', 'Department');
  data.addColumn('number', 'Revenues');
  data.addRows([
                ['<button onclick="MaxDraw(0);">+</button>', 'abc', 1000],
                ['<button onclick="MinDraw(0);">-</button>', 'abc', 1000],
                ['', '123', 650],
                ['', '456', 350],
                ['<button onclick="MaxDraw(3);">+</button>', 'def', 10000],
                ['<button onclick="MinDraw(3);">-</button>', 'def', 10000],
                ['', '789', 1000],
                ['', '101', 3000],
                ['', '112', 2000],
                ['', '131', 4000],
                ['<button onclick="MaxDraw(8);">+</button>', 'ghi', 500],
                ['<button onclick="MinDraw(8);">-</button>', 'ghi', 500],
                ['', '415', 500],
                ['<button onclick="MaxDraw(10);">+</button>', 'jkl', 6000],
                ['<button onclick="MinDraw(10);">-</button>', 'jkl', 6000],
                ['', '161', 5500],
                ['', '718', 500]
                            ]);

    var table = new google.visualization.Table(document.getElementById('vis_div'));

    var formatter = new google.visualization.BarFormat({width: 220});
    formatter.format(data, 2);


  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'Table',
    dataTable: data,
    options: {allowHtml: true},
    view: {rows: sRows}, 
    containerId: 'vis_div'
  });

  wrapper.draw();

}

MaxDraw = function DrawRows(iSelectedRow){

  if (iSelectedRow === 0){
    drawVisualization([1, 2, 3, 4, 10, 13]);
  }
  else if (iSelectedRow === 3){
    drawVisualization([0, 5, 6, 7, 8, 9, 10, 13]);
  }
  else if (iSelectedRow === 8){
    drawVisualization([0, 4, 11, 12, 13]);
  }
  else if (iSelectedRow === 10){
    drawVisualization([0, 4, 10, 14, 15, 16]);
  }  
}

MinDraw = function DrawRows(iSelectedRow){
    drawVisualization([0, 4, 10, 13]);
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.