在asp.net c#中使用jquery在仪表板上显示仪表图表

Question

我想在 c# 中使用 jquery 在仪表板上显示实时连接的呼叫。以不同中心的连接呼叫为例。所以让我知道我可以在电话中显示现场工作.. 提前谢谢..
这段代码试过了..

string str_caption = "Month Wise Sales";
                string str_Sub_caption = "No Of Sales";

                string x_axis = "Month";
                string y_axis = "No. Of Sales";

                string str_xml = null;

                str_xml = @"<graph caption='" + str_caption + @"' subCaption='" + str_Sub_caption + @"' decimalPrecision='0'
                          pieSliceDepth='30' formatNumberScale='0' xAxisName='" + x_axis + @"' yAxisName='" + y_axis + @"' rotateNames='1' >";

                int i = 0;

                foreach (DataRow dr in dt.Rows)
                {


                    str_xml += "<set name='" + dr[0].ToString() + "' value='" + dr[1].ToString() + "' color='" + color[i] + @"' "
                                + " link=&quot;JavaScript:myJS('" + dr["x_month"].ToString() + ", " + dr["no_of_sales"].ToString() + "'); &quot;/>";

                    i++;
                }

                str_xml += "</graph>";

                FCLiteral1.Text = FusionCharts.RenderChartHTML("Bootstrap/FusionCharts/FCF_Doughnut2D.swf", "", str_xml, "mygraph1",
                                        graph_width, graph_height, false);

这是aspx代码..

<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>

Answer 1

经过一番挣扎，我成功地在 asp.net c# 中使用 javascript 显示实时通话。这是我在页面加载时调用的 C 语言代码。

 public void sales_rpt()
        {
            string sql_data = "Select grp.Group_Name,count(ccls.caller_id) as x_calls from currentcalls as ccls "
                                + " inner join group_master as grp on ccls.group_id=grp.ID where ccls.`Status`=1";
            ViewState["data"] = sql_data;

            DataSet ds = BusinessLogic.GetDataSet(ViewState["data"].ToString());
            dt = ds.Tables[0];


            str.Append(@"<script type=text/javascript>
                        google.load( *visualization*, *1*, {packages:[*corechart*], callback:drawChart});
                        function drawChart() {
                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Group_Name');
                        data.addColumn('number', 'x_calls');
                        data.addColumn({type: 'string', role: 'style'});
                        data.addRows(" + dt.Rows.Count + ")");

            lbl_grp_name.Text = dt.Rows[0]["Group_Name"].ToString();

            for(int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["Group_Name"].ToString() + "'");
                str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["x_calls"].ToString() + "'");
            }


            str.Append(@" var view = new google.visualization.DataView(data);
                        view.setColumns([0, {
                        sourceColumn: 1,
                        calc: function () {return 0;}
                    }, 2]);

                        var chart = new google.visualization.ColumnChart(document.getElementById('g2'));
                            google.visualization.events.addOneTimeListener(chart, 'ready', function () {
                            chart.draw(data, {
                                        width: 700,
                                        height: 400,
                                        title: 'Group Name',
                                        color: '#0092CB',
                                          min:  0,
                                          max:  '100',
                                        hAxis: {
                                        title: 'Connected Calls',
                                        label: 'No Of Calls'

                            },
                            animation: {
                                    duration: 1000
                                }
                        });
                    });
                      chart.draw(view, {
                                    width: 700,
                                    height: 400,
                                    title: 'Group Name',
                                    color: '#0092CB',
                                    hAxis: {
                                    title: 'Connected Calls',
                                    label: 'No Of Calls'

                            },
                            animation: {
                                    duration: 1000
                                }
                        });
                    }
                    </script>");

            FCLiteral1.Text = str.ToString().TrimEnd(',').Replace('*','"');
        }

在上述代码之前，您需要在aspx页面上添加javascript和图形样式。

<style>
      body {
        text-align: left;
      }

      #g1 {
        width:600px; height:400px;
        display: inline-block;
        margin: 1em;
      }

      #g2, #g3, #g4 {
        width:100px; height:80px;
        display: inline-block;
        margin: 1em;
      }

      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>
//JavaScript
<script>
        var graph;

        window.onload = function () {
            var graph = new JustGage({
                id: "g2",
                value: getRandomInt(0, 100),
                min: 0,
                max: 100,
                title: "Connected Calls",
                label: "No of  Calls"
            });
        }

    </script>

//表单代码，这里需要调用g1,g2,g3的id。

<div id="g2" class="form-horizontal">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>

  </div>