0

From Date や To Date などのカレンダー コントロールを 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>

あなたの助けに感謝。

4

1 に答える 1

0

必要な出力を達成するための代替案を思いつくことができました。私が適用した解決策は

  1. 最初のフレームに DatePicker コントロールが表示される HTML で作成されたフレームセット

  2. 送信された値は 2 番目のフレーム ファイルによってキャプチャされ、日付をパラメータとして GoogleChart URL に渡します。

    var jsonData = $.ajax({url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedByDeptID&fdt='<%=fromDate%>'&tdt='<%=toDate%>'", dataType:"json", async : false}).responseText;

于 2012-09-19T08:50:39.843 に答える