[英]Select Query for Stacked Bar Chart Display
I am trying to make a stacked bar graph I have a Table with Name FeedbackPOS and columns are Q1,Q2,Q3,Q4,Q5,...Q11 and each have values between 5 to 1 like 5 or 4 or 3..1 我正在尝试制作一个堆叠的条形图,我有一个名称为FeedbackPOS的表,列为Q1,Q2,Q3,Q4,Q5,... Q11,每个值的范围在5到1之间,例如5或4或3..1
Graph(JQuery)
图(JQuery的)
<script>
$(document).ready(function () {
$.ajax({
type: "Post",
url: "FeedBackGraph.aspx/getdata",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Response) {
var d = Response.d.toString();
var final_string = d;
var result = final_string.substring(1, final_string.length - 1);
var res = final_string.split(",").map(Number);
console.log(res);
//final_string = [1,3,2,4];
var options = {
chart: {
height: 500,
type: 'bar',
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
series: [{
name: '5 *****',
data: [4, 2, 5, 3, 4, 1, 2,5, 3, 1, 4]
}, {
name: '4 ****',
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]
}, {
name: '3 ***',
data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]
}, {
name: '2 **',
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]
}, {
name: '1 *',
data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]
}],
title: {
text: 'FeedBack'
},
xaxis: {
categories: ['Ambience', 'EfficiencyofService', 'FriendlyandAttentive', 'VarietyinMenu', 'Presentation', 'BeveragesQuality', 'FoodQuality', 'Anticipated', 'Money', 'ValuedGuest', 'Recommend'],
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
},
error: function (result) {
}
});
});
</script>
public static string getdata()
{
DateTime CurrentDate = System.DateTime.Now;
string finldata = "";
string customers = "";
clsDBOperation obj = new clsDBOperation();
string Query = @"select '5star' as Star, COUNT(q1) as Q1 from CRM0001FeedbackPOS where q1=5
union all select '4star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=4
union all select '3star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=3
union all select '2star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=2
union all select '1star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=1
select COUNT(q2) as Q2 from CRM0001FeedbackPOS where q2=5
union all select COUNT( q2) from CRM0001FeedbackPOS where q2=4
union all select COUNT( q2) from CRM0001FeedbackPOS where q2=3
union all select COUNT( q2) from CRM0001FeedbackPOS where q2=2
union all select COUNT(q2) from CRM0001FeedbackPOS where q2=1";
DataTable dtProductMaster = obj.GetDataTable(Query);
if (dtProductMaster.Rows.Count > 0)
{
finldata = GetJsonData(dtProductMaster);
}
return finldata;
}
OutPut Of SQLQuery SQLQuery的输出
Rating| Q1
5star | 2
4star | 0
3star | 1
2star | 0
1star | 0
Q2
3
0
0
0
0
ExpectedOutput ExpectedOutput
Rating| Q1 | Q2....Q11
5star | 2 | 3
4star | 0 | 0
3star | 1 | 0
2star | 0 | 0
1star | 0 | 0.....Q11
but i have no idea how to join all columns(q1...q11) in single select query? 但是我不知道如何在单个选择查询中加入所有列(q1 ... q11)? then i will use these values in series (in json format) series:
然后我将在系列(以json格式)系列中使用这些值:
series: [{
name: '5 *****',
data: [4, 2, 5, 3, 4, 1, 2,5, 3, 1, 4] // 5STAR
}, {
name: '4 ****',
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1] // 4STAR
}, {
name: '3 ***',
data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4] // 3STAR
}, {
name: '2 **',
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1] // 2STAR
}, {
name: '1 *',
data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4] // 1STAR
}],
sorry can't put comments due to rep limit. 抱歉,由于代表人数限制,无法发表评论。 as i see from your query it will be slow and give a lot of work to sql because of all those union's how about you put something to identify data comes from Database inside the JS?
正如我从您的查询中看到的那样,由于所有这些联合,您将放置一些东西来标识数据来自JS内部的数据,所以它会很慢并且会给sql大量工作。 like create a series for data in Q1 column for row data '5' and another series for Q1 data row value '4'?
像在Q1列中为行数据'5'创建一个数据系列,并在Q1数据行值'4'中创建另一个系列? so you can simply make a
所以你可以简单地做一个
Select Count(q1) from Table query
also to give you an idea you can and should check devexpress charts within demo. 还可以给您一个想法,您可以并且应该在演示中查看devexpress图表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.