problem with dashboard

29 views

Skip to first unread message

Joao castro pereira

unread,

Mar 29, 2019, 8:00:33 AM3/29/19

to Google Visualization API

I'm trying to apply a date based slider to my column chart

So far this is what i have:

google.charts.load('current', {'packages':['corechart', 'bar', 'controls']});
google.charts.setOnLoadCallback(drawChart);



function drawChart() {

 var data = new google.visualization.DataTable(<?php echo $dados_chart;?>);
  
  // criar dashboard
  
  
       var dash_container = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
       myDashboard = new google.visualization.Dashboard(dash_container);
       
  // criar slider
  
           var myDateSlider = new google.visualization.ControlWrapper({
                    'controlType': 'ChartRangeFilter',
                    'containerId': 'filter_div',
                    'options': {
                      'filterColumnLabel': 'Data'
                                    }
                                  });
                              
  // criar grafico de barras
  
  
  
    var linearChart = new google.visualization.ColumnChart(document.getElementById('linear_div'));
       
       

  var options = {
          height:'500',
          isStacked: true,
          min: 0,
          width: '100%',
    bar: {groupWidth: 3},
    chartArea: {left: 50, width: '100%'},
    colors: ['orange'],
     vAxis : { 
        textStyle : {
            fontSize: 12 // or the number you want
        }

    },
    hAxis : { 
        textStyle : {
            fontSize: 12 // or the number you want
        }

    }
    


        };


myDashboard.bind(myDateSlider, linearChart);
myDashboard.draw(data);

  }

And for my html I have:

<div id="dashboard_div">
            <div id="linear_div"></div>
            <div id="filter_div"></div>
        </div>