Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
  
        <script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
        function drawVisualization() {
    
    var cssClassNames = {
        'headerRow': 'italic-darkblue-font large-font bold-font',
        'tableRow': '',
        'oddTableRow': 'beige-background',
        'selectedTableRow': 'orange-background large-font',
        'hoverTableRow': '',
        'headerCell': 'gold-border',
        'tableCell': '',
        'rowNumberCell': 'underline-blue-font'
    };
    
    
    // Prepare the data
     data = google.visualization.arrayToDataTable([
        ['Name', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael' , 'Male', 12, 5],
        ['Elisa', 'Female', 20, 7],
        ['Robert', 'Male', 7, 3],
        ['John', 'Male', 54, 2],
        ['Jessica', 'Female', 22, 6],
        ['Aaron', 'Male', 3, 1],
        ['Margareth', 'Female', 42, 8],
        ['Miranda', 'Female', 33, 6]
    ]);
    
    data.insertRows(0, [['Drew', 'Male', 32, 1]]);
          
          data.addColumn('string', 'Kontrole');
         for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
    if (data.getValue(y, 4) != 'a') {
      data.setValue(y, 4, '<button id="edit1" class="btn btn-info">edit row</button>');
    }
} 
    
    // Define a slider control for the Age column.
    var slider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Age',
            'ui': {'labelStacking': 'vertical'}
        }
    });
    
    
    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Gender',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });
    var stringFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'control3',
        'options': {
            'filterColumnLabel': 'Name',
            'ui': {'labelStacking': 'vertical'}
        }
    });
    
    // Define a Pie chart
    var pie = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart1',
        'options': {
            'width': 300,
            'height': 300,
            'is3D': 'true',
            'legend': 'none',
            'title': 'Donuts eaten per person',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'label'
        },
        // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
        // from the 'data' DataTable.
        'view': {'columns': [0, 3]}
    });
    
    // Define a table
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2',
        'options': {
            cssClassNames: cssClassNames,
            allowHtml: true
        }
    });
          
   
    new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
              $("#edit").removeClass("btn btn-success disabled")
              $('#edit').addClass('btn btn-success');
              $("#name").val(table.getDataTable().getValue(selection[i].row,0));
              $("#gender").val(table.getDataTable().getValue(selection[i].row,1));
              $("#age").val(table.getDataTable().getValue(selection[i].row,2));
              $("#donuts_eaten").val(table.getDataTable().getValue(selection[i].row,3));
​
            }
        });
    });
    
    // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Establish bindings, declaring the both the slider and the category
    // picker will drive both charts.
    bind([slider, categoryPicker, stringFilter], [pie, table]).
    // Draw the entire dashboard.
    draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});      
}
google.load('visualization', '1', {packages:['controls'], callback: drawVisualization});
      
      
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      
      <div class="col-md-2" id="control1"></div>
            <div class="col-md-2" id="control2"></div>
            <div class="col-md-2" id="control3"></div>
​
          
             
            <div class="table" style="float: left;" id="chart2"></div>
            <div class="col-md-4" style="float: left;" id="chart1"></div>
​
          
    </div>
<!-- Button trigger modal -->
<button id="edit" class="btn btn-success disabled" type="button" data-toggle="modal" data-target="#myModal">
Edit selected row</button>
​
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Add new row</h4>
      </div>
      <div class="modal-body">
        <div class="input-group">
  <span class="input-group-addon" required>Name</span>
  <input type="text" value="" id="name" class="form-control" placeholder="Type name">
        </div></br>
        <div class="input-group">
  <span class="input-group-addon">Gender</span>
  <input type="text" id="gender" class="form-control" placeholder="Gender?">
</div></br>
        <div class="input-group">
  <span class="input-group-addon">Age</span>
  <input type="text" id="age" class="form-control" placeholder="Number of age">
</div></br>
        <div class="input-group">
  <span class="input-group-addon">Donuts eaten</span>
  <input type="text" id="donuts_eaten" class="form-control" placeholder="Number of donuts eaten">
</div></br>
    
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roadvoyagepro
0viewers