Question

需要一些有关如何在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>

感谢您的帮助。

Answer 1

我设法找到了实现所需输出的替代方案。我申请的解决方案是

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

var jsonData = $ .ajax（{url：“jsondata.asp？q = json_construct.asp＆amp; id = FK_IssuedByDeptID＆amp; fdt ='＆lt;％= fromDate％＆gt;'＆amp; tdt ='＆lt;％= toDate ％＆gt;'“，dataType：”json“，async：false}）。responseText;

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

1 个答案: