如何使用常见的jqPlot函数用于11个条形图,其中动态获取数据?

时间:2013-11-29 13:26:22

标签: c# javascript jquery asp.net jqplot

我在我的页面中使用jqPlot。我想使用11 bar graphs,条形图显示为:

六个图表:动态值显示“是”/“否”

五个图:动态值显示'优秀'/'好'/'平均'/'差'/'非常差'

每个条形图都具有从数据库中提取的动态值。

C#代码:

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void FetchGraphData(string questionId)
{
  string stQuery = @"SELECT 
                        SUM(RESPONSE2=0) AS OBJECTIVE_CLEAR_NO,
                        SUM(RESPONSE2=1) AS OBJECTIVE_CLEAR_YES,

                        SUM(RESPONSE3=0) AS ACTIVE_PARTICIPATION_NO,
                        SUM(RESPONSE3=1) AS ACTIVE_PARTICIPATION_YES,

                        SUM(RESPONSE4=0) AS QUESTIONS_ANSWERED_NO,
                        SUM(RESPONSE4=1) AS QUESTIONS_ANSWERED_YES,

                        SUM(RESPONSE5=0) AS SPEAKER_INTERACTIVE_NO,
                        SUM(RESPONSE5=1) AS SPEAKER_INTERACTIVE_YES,

                        SUM(RESPONSE6=0) AS SESSION_ON_TIME_NO,
                        SUM(RESPONSE6=1) AS SESSION_ON_TIME_YES,

                        SUM(RESPONSE14=0) AS SESSION_HELPFUL_NO,
                        SUM(RESPONSE14=1) AS SESSION_HELPFUL_YES,

                        SUM(RESPONSE7=1) AS OBJECTIVES_CLARIFIED_EXCELLENT,
                        SUM(RESPONSE7=2) AS OBJECTIVES_CLARIFIED_GOOD,
                        SUM(RESPONSE7=3) AS OBJECTIVES_CLARIFIED_AVERAGE,
                        SUM(RESPONSE7=4) AS OBJECTIVES_CLARIFIED_POOR,
                        SUM(RESPONSE7=5) AS OBJECTIVES_CLARIFIED_VERY_POOR,

                        SUM(RESPONSE8=1) AS CONTENT_CLEAR_EXCELLENT,
                        SUM(RESPONSE8=2) AS CONTENT_CLEAR_GOOD,
                        SUM(RESPONSE8=3) AS CONTENT_CLEAR_AVERAGE,
                        SUM(RESPONSE8=4) AS CONTENT_CLEAR_POOR,
                        SUM(RESPONSE8=5) AS CONTENT_CLEAR_VERY_POOR,

                       SUM(RESPONSE9=1) AS SPEAKER_LEVEL_INTERACTION_EXCELLENT,
                       SUM(RESPONSE9=2) AS SPEAKER_LEVEL_INTERACTION_GOOD,
                       SUM(RESPONSE9=3) AS SPEAKER_LEVEL_INTERACTION_AVERAGE,
                       SUM(RESPONSE9=4) AS SPEAKER_LEVEL_INTERACTION_POOR,
                       SUM(RESPONSE9=5) AS SPEAKER_LEVEL_INTERACTION_VERY_POOR,

                       SUM(RESPONSE10=1) AS UTILIZE_LEARNING_SESSION_EXELLENT,
                       SUM(RESPONSE10=2) AS UTILIZE_LEARNING_SESSION_GOOD,
                       SUM(RESPONSE10=3) AS UTILIZE_LEARNING_SESSION_AVERAGE,
                       SUM(RESPONSE10=4) AS UTILIZE_LEARNING_SESSION_POOR,
                       SUM(RESPONSE10=5) AS UTILIZE_LEARNING_SESSION_VERY_POOR,

                        SUM(RESPONSE11=1) AS OVERALL_ABILITY_EXCELLENT,
                        SUM(RESPONSE11=2) AS OVERALL_ABILITY_GOOD,
                        SUM(RESPONSE11=3) AS OVERALL_ABILITY_AVERAGE,
                        SUM(RESPONSE11=4) AS OVERALL_ABILITY_POOR,
                        SUM(RESPONSE11=5) AS OVERALL_ABILITY_VERY_POOR
                      FROM  
                        M_CTC_PARTICIPANT_FEEDBACK MCPF 
                      LEFT JOIN 
                        M_CTC_USERS MCU 
                      ON 
                        MCPF.FK_USER_CTC_MAPPING_ID = MCU.PK_ID 
                      LEFT JOIN 
                        M_CTC_INFO MCI 
                      ON 
                        MCI.PK_ID = MCU.FK_CTC_ID 
                      WHERE  
                        MCI.FK_INTERNAL_PRESENTER_ID = 
                           DDLPRESENTERLIST.SELECTEDVALUE ;";

               //Some codes need to be added now
        }

如果可以使用简单的方法或者应该使用ajax,请告诉我。

用于绘图的jQuery示例(它具有静态值,查询中需要动态值):

function bargraph7() {

        $.jqplot.config.enablePlugins = true;
        // For horizontal bar charts, x an y values must will be "flipped"
        // from their vertical bar counterpart.
        line1 = [[50, "very_poor"], [100, "poor"], [120, "average"], [135, "good"], [150, "excellent"]];
        $.jqplot('chart7', [line1], {
            seriesColors: ['#FF0000', '#FF8C00', '#FFFF00', '#32CD32', '#006400'],
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,

                // Show point labels to the right ('e'ast) of each bar.
                // edgeTolerance of -15 allows labels flow outside the grid
                // up to 15 pixels.  If they flow out more than that, they 
                // will be hidden.
                pointLabels: { show: true, location: 'e' },
                // Rotate the bar shadow as if bar is lit from top right.
                shadowAngle: 135,
                // Here's where we tell the chart it is oriented horizontally.
                rendererOptions: {
                    barDirection: 'horizontal',
                    barWidth: 11,
                    // Set varyBarColor to true to use the custom colors on the bars.
                    varyBarColor: true
                }
            },
            axesDefaults: {
                tickOptions: {
                    fontFamily: 'Georgia',
                    fontSize: '10pt',
                    angle: -30
                }
            },
            grid: {
                drawGridlines: false,
                borderColor: 'transparent',
                shadow: false,
                drawBorder: false,
                shadowColor: 'transparent'
            },
            axes: {
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });
    }

我现在正在使用Page_Load中的以下语句来显示具有静态值的条形图:

Page.ClientScript.RegisterStartupScript(Page.GetType(), "PostbackClick", "bargraph7();", true);

示例条形图图像:

enter image description here

同样,我想使用其他条形图但使用动态值。

现在请告诉我以下内容:

1)如何使单个jQuery函数共同显示所有11个条形图,条形图id如图1,图2 .....图11?

2)我应该在jQuery / Codebehind中添加什么来显示具有动态值的条形图?

2 个答案:

答案 0 :(得分:4)

当您在StatupScript中触发方法时,您可以传递绘图的所有值,以便在加载时显示它们。

 Page.ClientScript.RegisterStartupScript(Page.GetType(), "Graph", 
    "PlotBarGraph(" + "'chartId'" + ","
      + reader.value1 + "," + reader.value2 + ");", true);

并在js文件(客户端)中,您可以将PlotBarGraph()定义为

function PlotBarGraph(id , value1, value2) {

    $.jqplot.config.enablePlugins = true;
    // For horizontal bar charts, x an y values must will be "flipped"
    // from their vertical bar counterpart.
    line1 = [[value1, "No"], [value2, "Yes"]];


    $.jqplot(id, [line1], {
        seriesColors: ['#FF0000', '#006400'],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,

            // Show point labels to the right ('e'ast) of each bar.
            // edgeTolerance of -15 allows labels flow outside the grid
            // up to 15 pixels.  If they flow out more than that, they 
            // will be hidden.
            pointLabels: { show: true, location: 'e' },
            // Rotate the bar shadow as if bar is lit from top right.
            shadowAngle: 135,
            // Here's where we tell the chart it is oriented horizontally.
            rendererOptions: {
                barDirection: 'horizontal',
                barWidth: 11,
                // Set varyBarColor to true to use 
                //the custom colors on the bars.
                varyBarColor: true
            }
        },
        axesDefaults: {
            tickOptions: {
                fontFamily: 'Georgia',
                fontSize: '10pt',
                angle: -30
            }
        },
        grid: {
            drawGridlines: false,
            borderColor: 'transparent',
            shadow: false,
            drawBorder: false,
            shadowColor: 'transparent'
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
}

希望这将正常运作,你的问题将得到解决..: - )

答案 1 :(得分:1)

仍然没有答案。 我已经做了。让我回答它,以便它可以帮助某人。

JS文件中创建了两个函数,在codebehind中添加了一个方法。

使用CodebehindPage.ClientScript.RegisterStartupScript中调用js函数,并在js function中传递所需的参数。

JS文件:

function barGraphWithTwoValues(id , barValue1, barValue2) {

    $.jqplot.config.enablePlugins = true;
    // For horizontal bar charts, x an y values must will be "flipped"
    // from their vertical bar counterpart.
    line1 = [[barValue1, "No"], [barValue2, "Yes"]];


    $.jqplot(id, [line1], {
        seriesColors: ['#FF0000', '#006400'],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,

            // Show point labels to the right ('e'ast) of each bar.
            // edgeTolerance of -15 allows labels flow outside the grid
            // up to 15 pixels.  If they flow out more than that, they 
            // will be hidden.
            pointLabels: { show: true, location: 'e' },
            // Rotate the bar shadow as if bar is lit from top right.
            shadowAngle: 135,
            // Here's where we tell the chart it is oriented horizontally.
            rendererOptions: {
                barDirection: 'horizontal',
                barWidth: 11,
                // Set varyBarColor to true to use the custom colors on the bars.
                varyBarColor: true
            }
        },
        axesDefaults: {
            tickOptions: {
                fontFamily: 'Georgia',
                fontSize: '10pt',
                angle: -30
            }
        },
        grid: {
            drawGridlines: false,
            borderColor: 'transparent',
            shadow: false,
            drawBorder: false,
            shadowColor: 'transparent'
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
}

function barGraphWithFiveValues(id, barValue1, barValue2, barValue3, barValue4, barValue5) {

    $.jqplot.config.enablePlugins = true;
    // For horizontal bar charts, x an y values must will be "flipped"
    // from their vertical bar counterpart.
    line1 = [[barValue1, "Very_Poor"], [barValue2, "Poor"], [barValue3, "Average"], [barValue4, "Good"], [barValue5, "Excellent"]];


    $.jqplot(id, [line1], {
        seriesColors: ['#FF0000', '#FF8C00', '#FFFF00', '#32CD32', '#006400'],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,

            // Show point labels to the right ('e'ast) of each bar.
            // edgeTolerance of -15 allows labels flow outside the grid
            // up to 15 pixels.  If they flow out more than that, they 
            // will be hidden.
            pointLabels: { show: true, location: 'e' },
            // Rotate the bar shadow as if bar is lit from top right.
            shadowAngle: 135,
            // Here's where we tell the chart it is oriented horizontally.
            rendererOptions: {
                barDirection: 'horizontal',
                barWidth: 11,
                // Set varyBarColor to true to use the custom colors on the bars.
                varyBarColor: true
            }
        },
        axesDefaults: {
            tickOptions: {
                fontFamily: 'Georgia',
                fontSize: '10pt',
                angle: -30
            }
        },
        grid: {
            drawGridlines: false,
            borderColor: 'transparent',
            shadow: false,
            drawBorder: false,
            shadowColor: 'transparent'
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
}

aspx文件

<div class="row-fluid" id="divBarGraphQuestions" runat="server" visible="false">
            <div class="row-fluid">
                <div class="span6">
                    <strong>Was the objective made clear? </strong>
                    <br />
                    <div id="chart1" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
                <div class="span6">
                    <strong>Was there active participation from all?</strong>
                    <br />
                    <div id="chart2" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <strong>Were your questions answered? </strong>
                    <br />
                    <div id="chart3" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
                <div class="span6">
                    <strong>Was the speaker interacting with the participants?</strong>
                    <br />
                    <div id="chart4" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <strong>Did the session get over on time? </strong>
                    <br />
                    <div id="chart5" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
                <div class="span6">
                    <strong>Was the session helpful?</strong>
                    <br />
                    <div id="chart6" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <strong>To what extent did the speaker clarify the objectives of the module? </strong>
                    <br />
                    <div id="chart7" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
                <div class="span6">
                    <strong>Was the content clear & organized logically?</strong>
                    <br />
                    <div id="chart8" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <strong>How do you rate the speaker's level of interaction? </strong>
                    <br />
                    <div id="chart9" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
                <div class="span6">
                    <strong>To what extent can you utilize the learning from this session?</strong>
                    <br />
                    <div id="chart10" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <strong>How do your rate the overall ability of the speaker? </strong>
                    <br />
                    <div id="chart11" class='plot' style="margin-top: 20px; margin-left: 20px; width: 250px; height: 100px;">
                    </div>
                </div>
            </div>
        </div>

C#代码背后:

public void FetchGraphData()
        {
            if (int.Parse(ddlPresenterList.SelectedValue) != 0)
            {
                divBarGraphQuestions.Visible = true;
                MySqlConnection myConnection = new MySqlConnection(ConfigurationManager.AppSettings["SQLConnectionString"]);
                MySqlDataReader oReader = null;
                try
                {
                    //Open Connection
                    myConnection.Open();

                    string strQuery = @"SELECT 
                                    IFNULL(SUM(RESPONSE2=0),0) AS OBJECTIVE_CLEAR_NO,
                                    IFNULL(SUM(RESPONSE2=1),0) AS OBJECTIVE_CLEAR_YES,

                                    IFNULL(SUM(RESPONSE3=0),0) AS ACTIVE_PARTICIPATION_NO,
                                    IFNULL(SUM(RESPONSE3=1),0) AS ACTIVE_PARTICIPATION_YES,

                                    IFNULL(SUM(RESPONSE4=0),0) AS QUESTIONS_ANSWERED_NO,
                                    IFNULL(SUM(RESPONSE4=1),0) AS QUESTIONS_ANSWERED_YES,

                                    IFNULL(SUM(RESPONSE5=0),0) AS SPEAKER_INTERACTIVE_NO,
                                    IFNULL(SUM(RESPONSE5=1),0) AS SPEAKER_INTERACTIVE_YES,

                                    IFNULL(SUM(RESPONSE6=0),0) AS SESSION_ON_TIME_NO,
                                    IFNULL(SUM(RESPONSE6=1),0) AS SESSION_ON_TIME_YES,

                                    IFNULL(SUM(RESPONSE14=0),0) AS SESSION_HELPFUL_NO,
                                    IFNULL(SUM(RESPONSE14=1),0) AS SESSION_HELPFUL_YES,

                                    IFNULL(SUM(RESPONSE7=1),0) AS OBJECTIVES_CLARIFIED_EXCELLENT,
                                    IFNULL(SUM(RESPONSE7=2),0) AS OBJECTIVES_CLARIFIED_GOOD,
                                    IFNULL(SUM(RESPONSE7=3),0) AS OBJECTIVES_CLARIFIED_AVERAGE,
                                    IFNULL(SUM(RESPONSE7=4),0) AS OBJECTIVES_CLARIFIED_POOR,
                                    IFNULL(SUM(RESPONSE7=5),0) AS OBJECTIVES_CLARIFIED_VERY_POOR,

                                    IFNULL(SUM(RESPONSE8=1),0) AS CONTENT_CLEAR_EXCELLENT,
                                    IFNULL(SUM(RESPONSE8=2),0) AS CONTENT_CLEAR_GOOD,
                                    IFNULL(SUM(RESPONSE8=3),0) AS CONTENT_CLEAR_AVERAGE,
                                    IFNULL(SUM(RESPONSE8=4),0) AS CONTENT_CLEAR_POOR,
                                    IFNULL(SUM(RESPONSE8=5),0) AS CONTENT_CLEAR_VERY_POOR,

                                    IFNULL(SUM(RESPONSE9=1),0) AS SPEAKER_LEVEL_INTERACTION_EXCELLENT,
                                    IFNULL(SUM(RESPONSE9=2),0) AS SPEAKER_LEVEL_INTERACTION_GOOD,
                                    IFNULL(SUM(RESPONSE9=3),0) AS SPEAKER_LEVEL_INTERACTION_AVERAGE,
                                    IFNULL(SUM(RESPONSE9=4),0) AS SPEAKER_LEVEL_INTERACTION_POOR,
                                    IFNULL(SUM(RESPONSE9=5),0) AS SPEAKER_LEVEL_INTERACTION_VERY_POOR,

                                    IFNULL(SUM(RESPONSE10=1),0) AS UTILIZE_LEARNING_SESSION_EXELLENT,
                                    IFNULL(SUM(RESPONSE10=2),0) AS UTILIZE_LEARNING_SESSION_GOOD,
                                    IFNULL(SUM(RESPONSE10=3),0) AS UTILIZE_LEARNING_SESSION_AVERAGE,
                                    IFNULL(SUM(RESPONSE10=4),0) AS UTILIZE_LEARNING_SESSION_POOR,
                                    IFNULL(SUM(RESPONSE10=5),0) AS UTILIZE_LEARNING_SESSION_VERY_POOR,

                                    IFNULL(SUM(RESPONSE11=1),0) AS OVERALL_ABILITY_EXCELLENT,
                                    IFNULL(SUM(RESPONSE11=2),0) AS OVERALL_ABILITY_GOOD,
                                    IFNULL(SUM(RESPONSE11=3),0) AS OVERALL_ABILITY_AVERAGE,
                                    IFNULL(SUM(RESPONSE11=4),0) AS OVERALL_ABILITY_POOR,
                                    IFNULL(SUM(RESPONSE11=5),0) AS OVERALL_ABILITY_VERY_POOR
                                FROM  
                                    M_CTC_PARTICIPANT_FEEDBACK MCPF 
                                LEFT JOIN 
                                    M_CTC_USERS MCU 
                                ON 
                                    MCPF.FK_USER_CTC_MAPPING_ID = MCU.PK_ID 
                                LEFT JOIN 
                                    M_CTC_INFO MCI 
                                ON 
                                    MCI.PK_ID = MCU.FK_CTC_ID 
                                WHERE  
                                    MCI.FK_INTERNAL_PRESENTER_ID = " + ddlPresenterList.SelectedValue + ";";

                    oReader = cSQLHelper.myExecuteReader(strQuery);

                    MySqlCommand myCommand = new MySqlCommand(strQuery, myConnection);

                    if (oReader.HasRows)
                    {
                        oReader.Read();
                    }

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart1", "barGraphWithTwoValues(" + "'chart1'" + "," 
                                                + oReader.GetInt32("OBJECTIVE_CLEAR_NO") + "," + oReader.GetInt32("OBJECTIVE_CLEAR_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart2", "barGraphWithTwoValues(" + "'chart2'" + ","
                                                + oReader.GetInt32("ACTIVE_PARTICIPATION_NO") + "," + oReader.GetInt32("ACTIVE_PARTICIPATION_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart3", "barGraphWithTwoValues(" + "'chart3'" + ","
                                                + oReader.GetInt32("QUESTIONS_ANSWERED_NO") + "," + oReader.GetInt32("QUESTIONS_ANSWERED_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart4", "barGraphWithTwoValues(" + "'chart4'" + ","
                                                + oReader.GetInt32("SPEAKER_INTERACTIVE_NO") + "," + oReader.GetInt32("SPEAKER_INTERACTIVE_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart5", "barGraphWithTwoValues(" + "'chart5'" + ","
                                                + oReader.GetInt32("SESSION_ON_TIME_NO") + "," + oReader.GetInt32("SESSION_ON_TIME_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart6", "barGraphWithTwoValues(" + "'chart6'" + ","
                                                + oReader.GetInt32("SESSION_HELPFUL_NO") + "," + oReader.GetInt32("SESSION_HELPFUL_YES") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart7", "barGraphWithFiveValues(" + "'chart7'" + ","
                                                + oReader.GetInt32("OBJECTIVES_CLARIFIED_VERY_POOR") + "," + oReader.GetInt32("OBJECTIVES_CLARIFIED_POOR") + ","
                                                + oReader.GetInt32("OBJECTIVES_CLARIFIED_AVERAGE") + "," + oReader.GetInt32("OBJECTIVES_CLARIFIED_GOOD") + ","
                                                + oReader.GetInt32("OBJECTIVES_CLARIFIED_EXCELLENT") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart8", "barGraphWithFiveValues(" + "'chart8'" + ","
                                                + oReader.GetInt32("CONTENT_CLEAR_VERY_POOR") + "," + oReader.GetInt32("CONTENT_CLEAR_POOR") + ","
                                                + oReader.GetInt32("CONTENT_CLEAR_AVERAGE") + "," + oReader.GetInt32("CONTENT_CLEAR_GOOD") + ","
                                                + oReader.GetInt32("CONTENT_CLEAR_EXCELLENT") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart9", "barGraphWithFiveValues(" + "'chart9'" + ","
                                                + oReader.GetInt32("SPEAKER_LEVEL_INTERACTION_VERY_POOR") + "," + oReader.GetInt32("SPEAKER_LEVEL_INTERACTION_POOR") + ","
                                                + oReader.GetInt32("SPEAKER_LEVEL_INTERACTION_AVERAGE") + "," + oReader.GetInt32("SPEAKER_LEVEL_INTERACTION_GOOD") + ","
                                                + oReader.GetInt32("SPEAKER_LEVEL_INTERACTION_EXCELLENT") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart10", "barGraphWithFiveValues(" + "'chart10'" + ","
                                                + oReader.GetInt32("UTILIZE_LEARNING_SESSION_VERY_POOR") + "," + oReader.GetInt32("UTILIZE_LEARNING_SESSION_POOR") + ","
                                                + oReader.GetInt32("UTILIZE_LEARNING_SESSION_AVERAGE") + "," + oReader.GetInt32("UTILIZE_LEARNING_SESSION_GOOD") + ","
                                                + oReader.GetInt32("UTILIZE_LEARNING_SESSION_EXELLENT") + ");", true);

                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "GraphForChart11", "barGraphWithFiveValues(" + "'chart11'" + ","
                                                + oReader.GetInt32("OVERALL_ABILITY_VERY_POOR") + "," + oReader.GetInt32("OVERALL_ABILITY_POOR") + ","
                                                + oReader.GetInt32("OVERALL_ABILITY_AVERAGE") + "," + oReader.GetInt32("OVERALL_ABILITY_GOOD") + ","
                                                + oReader.GetInt32("OVERALL_ABILITY_EXCELLENT") + ");", true);
                }

                catch (Exception ex)
                {
                    ExceptionLogger.LogException(ex);
                    lblError.Text = "Error occurred while loading graphs";
                }

                finally
                {
                    if (oReader != null)
                    {
                        oReader.Close();
                    }
                    if (myConnection != null)
                    {
                        myConnection.Close();
                    }
                }
            }
        }