Нужно привязать диапазоны диапазонов к диаграмме

Question

Я пытаюсь выяснить, как добавить слайдер диапазона/фильтра в мои диаграммы с помощью графиков Google. Я прочитал документ, но, как вы можете видеть, я написал код другим. Мне нужно знать, где мне нужно привязать ползунок диапазона для управления «приборной панелью».

Вот мой код:

var line_data, line_json, line_chart, rangeSlider; 

var lineChartOptions = { 
    "backgroundColor": { "fill": "#fff" }, 
    "width": 800, 
    "height": 600, 
    "chartArea": { "height": "65%", "width": "80%", "top": "5" }, 
    "fontName": "samo_sans_regular, arial, sans-seif", 
    "legend": { "position": "none" }, 
    "lineWidth": "2", 
    "pointSize": "0", 
    "vAxis": { "format": "#%", "textStyle": { "color": "#333", "bold": "true" }, "baselineColor": "#eee", "gridlines": { "color": "#eee", "count": "10" }, "minorGridlines": { "color": "#eee", "count": "1" }}, 
    "hAxis": { "format": "MMM yy", "textStyle": { "color": "#333", "bold": "true" }, "baselineColor": "#eee", "gridlines": { "color": "#eee" }, "minorGridlines": { "color": "#eee", "count": "10" }, "slantedText": "true", "slantedTextAngle": "90", "viewWindowMode": "pretty" }, 
    "series": [{ "color": "#62BA8C" }], 
    "focusTarget": "category" 
}; 

var rangeSliderOptions = { 
    "controlType": "NumberRangeFilter", 
    "containerId": "filter" 
}; 

function drawLineChart(el) { 
    var $this = $(el); 
    console.log($this); 
    var aId = $this.attr("data-id"); 
    var line_json = $.ajax({ 
     //url: "/umbraco/surface/Master/FetchStrategyGraphData/?distId="+aId, 
     url: $this.attr("data-distUrl"), 
     dataType: "json", 
     async: false 
    }).responseText; 

    line_data = new google.visualization.DataTable(line_json);    
    line_chart = new google.visualization.LineChart(document.getElementById("chart-" + aId)); 
    //chart.draw(data, lineChartOptions); 
    $("#chart-" + aId).css("opacity", "0"); 
    setTimeout(function() { 
     line_chart.draw(line_data, lineChartOptions, rangeSliderOptions); 
     $("#chart-"+aId).css("opacity", "1"); 
    }, 500);  
} 

Answer 1

Должно быть что-то вроде этого:

function drawLineChart(el) { 
    var $this = $(el); 
    console.log($this); 
    var aId = $this.attr("data-id"); 
    var line_json = $.ajax({ 
     //url: "/umbraco/surface/Master/FetchStrategyGraphData/?distId="+aId, 
     url: $this.attr("data-distUrl"), 
     dataType: "json", 
     async: false 
    }).responseText; 

    line_data = new google.visualization.DataTable(line_json); 

    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')); 

    var chart = new google.visualization.ChartWrapper({ 
     'chartType': 'LineChart', 
     'containerId': "chart-" + aId, 
     'options': lineChartOptions 
    }); 

    var control = new google.visualization.ControlWrapper({ 
     'controlType': 'NumberRangeFilter', 
     'containerId': 'filter', 
     'options': {filterColumnIndex: 1 } 
    }); 

    dashboard.bind(control, chart); 
    dashboard.draw(line_data); 

}