Google visualization 与日期字段绑定的动态Google图表

需要一些关于如何在谷歌图表中嵌入日历控件（如“从日期”和“到日期”）的提示，图表值会根据所选日期进行更改。单击按钮时，图表将刷新

下面是我用来在一个页面上显示多个图表的代码，其中数据以JSON格式从数据库中获取

<script type="text/javascript">
    <!--

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.    
    google.setOnLoadCallback(drawChart);

    function drawChart()
    {

    // set the default options
        var options =   {
                            width: "100%",
                            height: 350, 
                            chartArea: {left:50,top:20,width:"70%",height:"70%"},
                            legend: {position: 'bottom'},
                            vAxis: {title: "" },
                            hAxis: {title: "No.of Jobs"},
                            is3D: false
                        };

    // 1st Chart-----------------------------------------------------------------------------
        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedByDeptID",
            dataType:"json",
            async: false
                            }).responseText;


        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart1  =   new google.visualization.BarChart(document.getElementById('chart_OpenByFunction'));
        chart1.draw(data, options);

    // 2nd Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedToDeptID",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart2  =   new google.visualization.BarChart(document.getElementById('chart_OpenToFunction'));
        chart2.draw(data, options);

    // 3rd Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct_status.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart3  =   new google.visualization.PieChart(document.getElementById('chart_OpenByStatus'));
        chart3.draw(data, options);

    // 4th Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_reject_reasons.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart4  =   new google.visualization.BarChart(document.getElementById('chart_OpenByReason'));
        chart4.draw(data, options);     


        // 5th Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_pack_type.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart5  =   new google.visualization.BarChart(document.getElementById('chart_OpenByPackType'));
        chart5.draw(data, options);

    } 
</script>

我设法想出了一个替代方案来实现所需的输出。我应用的解决方案是

在HTML中创建的框架集，其中第一个框架显示DatePicker控件
提交的值由第二个框架文件捕获，并将日期作为参数传递给GoogleChart URL

var jsonData=$.ajax（{url:jsonData.asp？q=json_construct.asp&id=FK_IssuedByDeptID&fdt=''&tdt=''，数据类型：“json”，异步：false}）

您是否试图让图表包更改其时间轴？你的数据来自哪里？更改用于获取数据的任何查询，以便只获取所需时间段的数据，不是更好吗？还是我误解了你的问题？Jamie，图表中显示的数据将来自使用JSON的数据库（如问题中所述），这部分工作非常好。需要应用日期，以便用户可以缩小图表结果的范围。但是，您不能限制来自数据库的结果吗？@Jamie:在页面加载时显示结果时，数据已经根据一周进行了筛选，但是如果用户希望根据所选日期范围查看图表，则我需要下拉列表。