년 Google 대시 보드 필터 라인 차트

Question

지난 3 년간 자동차 판매 대수를 기록한 데이터 테이블이 있습니다. 주어진 연도 동안 판매 동향을 보여주는 꺾은 선형 차트를 만들고 싶습니다. 사용자가 연간 매출을 필터링 할 수있는 선택 요소가 필요합니다.

var dataTableSales = google.visualization.arrayToDataTable([ 
    ['Sale Date', 'Sale Type'], 
    [new Date(2016, 0, 16), 'cash sale'], 
    [new Date(2016, 0, 16), 'cash sale'], 
    [new Date(2016, 0, 16), 'leased'], 
    [new Date(2016, 0, 16), 'leased'], 
    [new Date(2016, 0, 16), 'financed'], 
    [new Date(2017, 0, 16), 'cash sale'], 
    [new Date(2017, 0, 16), 'cash sale'], 
    [new Date(2017, 0, 16), 'cash sale'], 
    [new Date(2017, 0, 16), 'financed'], 
    [new Date(2016, 0, 17), 'cash sale'], 
    [new Date(2016, 0, 17), 'financed'], 
    [new Date(2016, 0, 17), 'cash sale'], 
    [new Date(2016, 0, 17), 'leased'], 
    [new Date(2016, 0, 17), 'financed'], 
    [new Date(2017, 0, 17), 'financed'], 
    [new Date(2017, 0, 17), 'financed'], 
    [new Date(2017, 0, 17), 'cash sale'], 
    [new Date(2017, 0, 17), 'financed'], 
    [new Date(2016, 0, 18), 'leased'], 
    [new Date(2016, 0, 18), 'cash sale'], 
    [new Date(2017, 0, 18), 'cash sale'], 
    [new Date(2017, 0, 18), 'cash sale'] 
    ]); 

지금까지 내가 가지고 : 내 테이블 인

은 판매 날짜에 대한 것을 포함하여 많은 열 (열 0)가

 var datePicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'categoryFilter_div', 
     'options': { 
      'filterColumnIndex': 0, 
      'ui': { 
       'labelStacking': 'vertical', 
       'label': 'Year:', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
     } 
    }); 

    // Create a line chart, passing some options 
    var lineChart = new google.visualization.ChartWrapper({ 
     'chartType': 'LineChart', 
     'containerId': 'chart_div', 
     'options': { 
     'width': 720, 
     'height': 300 
     } 
    }); 

    dashboard.bind(datePicker, lineChart); 
    dashboard.draw(gDataTableSales); 

날짜 선택기가 판매 날짜로 채워하지만 내가 필요 그 해. 또한 꺾은 선형 차트가 렌더링되지 않습니다 - 오류가 발생합니다 : 주어진 축의 모든 계열은 동일한 데이터 형식이어야합니다. 솔루션에 대한 모든 조언을 주시면 감사하겠습니다. 'yyyy'

는 다음 'CategoryFilter'
에서 다음 옵션을 사용할 때

Answer 1

첫째,의 수를 집계 'sale type'
데이터가 집계 된 후

(유사 this other answer에), 날짜 열을 포맷해야합니다 useFormattedValue: true

---

는 데이터의 샘플을 공유하시기 바랍니다 수 있다면

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

 
function drawChart() { 
 
    var dataTableSales = google.visualization.arrayToDataTable([ 
 
    ['Sale Date', 'Sale Type'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'financed'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'leased'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'cash sale'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 18), 'leased'], 
 
    [new Date(2016, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'] 
 
    ]); 
 
    dataTableSales.sort({column: 0}); 
 

 
    // build view and aggregation columns 
 
    var viewColumns = [{ 
 
    label: dataTableSales.getColumnLabel(0), 
 
    type: dataTableSales.getColumnType(0), 
 
    calc: function (dt, row) { 
 
     return { 
 
     v: dt.getValue(row, 0), 
 
     f: dt.getValue(row, 0).getFullYear().toString() 
 
     }; 
 
    } 
 
    }]; 
 
    var aggColumns = []; 
 
    var saleTypes = dataTableSales.getDistinctValues(1); 
 
    saleTypes.forEach(function (saleType) { 
 
    var colIndex = viewColumns.push({ 
 
     label: saleType, 
 
     type: 'number', 
 
     calc: function (dt, row) { 
 
     return (dt.getValue(row, 1) === saleType) ? 1 : 0; 
 
     } 
 
    }); 
 
    aggColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: colIndex - 1, 
 
     label: saleType, 
 
     type: 'number' 
 
    }); 
 
    }); 
 

 
    var view = new google.visualization.DataView(dataTableSales); 
 
    view.setColumns(viewColumns); 
 

 
    var summary = google.visualization.data.group(
 
    view, 
 
    [0], 
 
    aggColumns 
 
); 
 

 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'yyyy' 
 
    }); 
 
    formatDate.format(summary, 0); 
 

 
    var datePicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'categoryFilter_div', 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     allowTyping: false, 
 
     allowMultiple: false, 
 
     label: 'Year:', 
 
     labelStacking: 'vertical' 
 
     }, 
 
     useFormattedValue: true 
 
    } 
 
    }); 
 

 
    var lineChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    containerId: 'chart_div', 
 
    options: { 
 
     width: 720, 
 
     height: 300 
 
    } 
 
    }); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
 
    dashboard.bind(datePicker, lineChart); 
 
    dashboard.draw(summary); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard_div"> 
 
    <div id="categoryFilter_div"></div> 
 
    <div id="chart_div"></div> 
 
</div>

는