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 Graph(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
Rating| Q1
5star | 2
4star | 0
3star | 1
2star | 0
1star | 0
Q2
3
0
0
0
0
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? then i will use these values in series (in json format) series:
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? like create a series for data in Q1 column for row data '5' and another series for Q1 data row value '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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.