CODEWITHSUNDEEP
chartsgoogle-visualizationrangedate-formatdashboard
Robinho
Robinho

Reputation: 45

Rangefilter Google Charts in hours:minutes

Below is my code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  myData.addRows([
    [new Date(2014, 6, 12), 9],    
    [new Date(2014, 6, 13), 8],    
    [new Date(2014, 6, 14), 10],    
    [new Date(2014, 6, 15), 8],    
    [new Date(2014, 6, 16), 0]
  ]);

  // Create a dashboard.
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'Date'
    }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
    'chartType' : 'Table',
    'containerId' : 'table_div'
  });

  // Bind myTable to the dashboard, and to the controls
  // this will make sure our table is update when our date changes
  myDashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  
  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(myData);
}
</script>

<div id="dashboard_div">
  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>

  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>
</div>

le to add hours:minutes to the x-axis. For example: 12 jul. 2014 11:00, 12 jul. 2014 11:02, 12 jul. 2014 11:04 etc.. Because I only have data of one day.

I already tried it with epoch time, but it still doesn't show the hh:mm or it shows the wrong time.

Upvotes: 1

Views: 392

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

first, to include hours:minutes on the x-axis of the chart and control

use option for hAxis.format

this option simply takes a format string, e.g. 

  hAxis: {
    format: 'dd MMM yyyy hh:mm'
  }

to include hours:minutes in the table chart and line chart tooltips,

use the DateFormat formatter to format the data table, e.g. 

var formatDate = new google.visualization.DateFormat({
  pattern: 'dd MMM yyyy hh:mm'
});
formatDate.format(myData, 0);

see following working snippet... 

google.charts.load('current', {
  callback: createTable,
  packages: ['controls']
});

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  myData.addRows([
    [new Date(2014, 6, 12), 9],
    [new Date(2014, 6, 13), 8],
    [new Date(2014, 6, 14), 10],
    [new Date(2014, 6, 15), 8],
    [new Date(2014, 6, 16), 0]
  ]);

  var formatPattern = 'dd MMM yyyy hh:mm';
  var formatDate = new google.visualization.DateFormat({
    pattern: formatPattern
  });
  formatDate.format(myData, 0);


  // Create a dashboard.
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'Date',
      ui: {
        chartOptions: {
          hAxis: {
            format: formatPattern
          }
        }
      }
    }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div'
  });

  // Bind myTable to the dashboard, and to the controls
  // this will make sure our table is update when our date changes
  myDashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'line_div',
    options: {
      hAxis: {
        format: formatPattern
      }
    }
  });

  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(myData);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="control_div"></div>
  <div id="line_div"></div>
  <div id="table_div"></div>
</div>

Upvotes: 1

Related Questions