Google Diagramm: Datumsformat

Ich versuche, ein Google-Diagramm zu erstellen, ich erhalte einen Fehler in dem Datum, das überlappt. Ich habe keine Ahnung, wie ich es zum Laufen bringen kann. Spalte A muss als columnfilterindex definiert werden ...Google Diagramm: Datumsformat

Wer macht das schon mal?

Dies ist die visualization. Dies ist die für den Anfang database

<html> 
    <head> 
    <!--Load the AJAX API--> 


</head> 

<body style="font-family: Arial;border: 0 none;"> 
     <div id="dashboard" style="width:1300px;overflow:scroll;"> 
      <div id="chart" style="position: relative; width: 1300px; height: 400px;"></div> 
      <div id="control" style="position: relative; width: 1300px; height: 100px;"></div> 
     </div> 

     <div id="junk_div" style="display: none;"></div> 


<script type="text/javascript"> 

var data; 
var dataTable; 
var dashboard; 

google.load("jquery", "1.4.2"); 
google.load("visualization", "1.1", {packages:["controls,corechart, table"]}); 
google.setOnLoadCallback(drawVisualization); 

function setupData(){ 
    var control = new google.visualization.ControlWrapper({ 
     'controlType': 'ChartRangeFilter', 
     'containerId': 'control', 
     'options': { 
      // Filter by the date axis. 
      'filterColumnIndex': 0, 
      'ui': { 
       // 'chartType': 'BarChart', 
       'chartOptions': { 
        'chartArea': {'width': '90%'}, 
       'hAxis': {'format': 'dd/MM/yyyy'} 
       }, 
       'chartView': { 
        'columns': [ 0, 1, 3] 
       } 
      } 
     }, 


    }); 

    //then reverse the process in the ChartWrapper's view.columns: 

    var chart = new google.visualization.ChartWrapper({ 
     'chartType': 'ScatterChart', 
     'containerId': 'chart', 
     'options': { 
        'filterColumnIndex': 0, 

     'pointSize': 2, 
      // Use the same chart area width as the control for axis alignment. 
      'chartArea': {'height': '80%', 'width': '90%'}, 
      'hAxis': {'format': 'dd/MM/yyyy'}, 
      // 'vAxis': {'viewWindow': {'min': 0, 'max': 20}}, 
      'legend': {'position': 'none'} 
     }, 
     view: { 
      columns: [ 0, 1, 3] 
     } 
    }); 
// console.log('label: ' + data.getColumnLabel(0)); 
    dashboard.bind(control, chart); 
    dashboard.draw(data); 

} 

function drawVisualization() { 

    dataTable = new google.visualization.DataTable(); 

// var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'}); 
// dateFormatter.format(data, 0); 
// data.addColumn('date', 0); 
    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')); 

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0'); 

    query.setQuery("select A,B,C,D where A is not null"); 
    query.send(handleQueryResponse); 

} 



function handleQueryResponse(response) { 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
    } 

    data = response.getDataTable(); 

    setupData(); 
} 

</script> 

</body> 

</html>

Quelle

2016-05-31 Lean

ist, empfiehlt es sich loader.js zu verwenden, um die Grafik-Bibliothek
im Vergleich zu den älteren jsapi

neben zu laden, muss jedes Paket separat aufgeführt werden ...
packages: ['controls', 'corechart', 'table']

anders als das, so etwas wie dies sollte ... arbeiten

google.charts.load('current', { 
 
    callback: function() { 
 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0'); 
 
    query.setQuery('select A,B,C,D where A is not null'); 
 
    query.send(function (response) { 
 
     if (response.isError()) { 
 
     console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
     return; 
 
     } 
 

 
     var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control', 
 
     options: { 
 
      filterColumnIndex: 0, 
 
      ui: { 
 
      chartOptions: { 
 
       chartArea: {width: '90%'}, 
 
       hAxis: {format: 'dd/MM/yyyy'} 
 
      }, 
 
      chartView: { 
 
       columns: [ 0, 1, 3] 
 
      } 
 
      } 
 
     } 
 
     }); 
 

 
     var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'ScatterChart', 
 
     containerId: 'chart', 
 
     options: { 
 
      filterColumnIndex: 0, 
 
      pointSize: 2, 
 
      chartArea: {height: '80%', 'width': '90%'}, 
 
      hAxis: {format: 'dd/MM/yyyy'}, 
 
      legend: {position: 'none'} 
 
     }, 
 
     view: { 
 
      columns: [ 0, 1, 3] 
 
     } 
 
     }); 
 

 
     dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 
     dashboard.bind(control, chart); 
 
     dashboard.draw(response.getDataTable()); 
 
    }); 
 
    }, 
 
    packages: ['controls', 'corechart', 'table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard" style="width:1300px;overflow:scroll;"> 
 
    <div id="chart" style="position: relative; width: 1300px; height: 400px;"></div> 
 
    <div id="control" style="position: relative; width: 1300px; height: 100px;"></div> 
 
</div>

Quelle

2016-05-31 14:57:12 WhiteHat

vielen Dank für Ihre Hilfe !!! Ich bin in der Tat ein Anfänger, ich lerne ... – Lean

Antwort

Verwandte Themen