我在我的页面中使用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);
示例条形图图像:
同样,我想使用其他条形图但使用动态值。
现在请告诉我以下内容:
1)如何使单个jQuery函数共同显示所有11个条形图,条形图id如图1,图2 .....图11?
2)我应该在jQuery / Codebehind中添加什么来显示具有动态值的条形图?
答案 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
中添加了一个方法。
使用Codebehind
在Page.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();
}
}
}
}