显示两个Google图表

时间:2014-10-20 12:15:06

标签: javascript c# jquery ajax graph

我正在尝试在我的网页上显示2个Google图表。目前我可以毫无问题地显示一个。

当我试图在第一个图表下显示另一个图表时出现问题。

我的前端代码如下所示:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                url: 'MindYourMatterDash.aspx/GetData',
                data: '{}',
                dataType: "json",
                success:
                    function (response) {
                        drawVisualization(response.d);
                    },
                    error: function (result) {
                        console.log(result);
                        alert("Please Contact Support with the following code in the subject :404 graph");
                    }
            });
        })

        function drawVisualization(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }

            new google.visualization.PieChart(document.getElementById('visualization')).
                draw(data, { title: "Broken PTP's Graph" });
        }

        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                url: 'MindYourMatterDash.aspx/GetDataFollowing',
                data: '{}',
                dataType: "json",
                success:
                    function (response) {
                        drawVisualization(response.d);
                    },
                error: function (result) {
                    console.log(result);
                    alert("Please Contact Support with the following code in the subject :404 graph");
                }
            });
        })

        function drawVisualization2(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }

            new google.visualization.PieChart(document.getElementById('FollowGraph')).
                draw(data, { title: "Follow Ups Graph" });
        }


    </script>    

和页面背后的代码:

[WebMethod]
    public static List<Data> GetData()
    {
        string cat = "";
        int val = 0;
        DataTable dt = new DataTable();

        cQuery _GraphInfo = new cQuery();
        _GraphInfo.Sqlstring = "SQL Statement";

        DataSet ds = _GraphInfo.SelectStatement();

        dt = ds.Tables[0];

        List<Data> datalist = new List<Data>();

        foreach (DataRow dr in dt.Rows)
        {
            cat = dr[0].ToString();
            val = Convert.ToInt32(dr[1]);
            datalist.Add(new Data(cat, val));

        }
        return datalist;
    }
    [WebMethod]
    public static List<Data> GetDataFollowing()
    {
        string cat = "";
        int val = 0;
        DataTable dt = new DataTable();

        cQuery _GraphInfo2 = new cQuery();
        _GraphInfo2.Sqlstring = "SQL Statement";

        DataSet ds = _GraphInfo2.SelectStatement();

        dt = ds.Tables[0];

        List<Data> datalist2 = new List<Data>();

        foreach (DataRow dr in dt.Rows)
        {
            cat = dr[0].ToString();
            val = Convert.ToInt32(dr[1]);
            datalist2.Add(new Data(cat, val));

        }
        return datalist2;
    }

目前,当此代码运行时,它会加载第一个图形,然后将第一个图形替换为第二个图形,而不是将其加载到第二个div标记中。

非常感谢任何帮助。

0 个答案:

没有答案