[英]Create bar chart using mysql data
I want create bar using mysql data which is returned in JSON Format. 我想使用以JSON格式返回的mysql数据创建栏。
[
{
"Score": "84",
"Trainer": "Jamshaid",
"Subject Name": "Java"
},
{
"Score": "50",
"Trainer": "Zaid",
"Subject Name": "Android"
},
{
"Score": "40",
"Trainer": "Sajjad",
"Subject Name": "iOS"
},
{
"Score": "50",
"Trainer": "Jamshaid",
"Subject Name": "iOS"
}
]
I want to create like this chart 我想创建像这样的图表
But problem is that this gets formatted from Table. 但是问题是,这是从Table格式化的。 But I have data in JSON as shown above.
但是我有JSON中的数据,如上所示。
Here is the link I am following. 这是我关注的链接。 Can we convert the JSON Data in a Format so that it can populate chart based on the Data as shown
我们可以将JSON数据转换为一种格式,以便它可以根据所示数据填充图表吗
https://blueflame-software.com/bar-chart-with-data-from-mysql-using-highcharts/ https://blueflame-software.com/bar-chart-with-data-from-mysql-using-highcharts/
You can process the JSON in the Javascript to build the data required for the chart as shown below: 您可以在Javascript中处理JSON来构建图表所需的数据,如下所示:
var jsonFromServer = [
{
"Score": "84",
"Trainer": "Jamshaid",
"Subject Name": "Java"
},
{
"Score": "50",
"Trainer": "Zaid",
"Subject Name": "Android"
},
{
"Score": "40",
"Trainer": "Sajjad",
"Subject Name": "iOS"
},
{
"Score": "50",
"Trainer": "Jamshaid",
"Subject Name": "iOS"
}
];
The above is data from server captured in a variable 上面是来自服务器的数据,捕获在一个变量中
The below code helps you to extract the Y axis Values (ie the unique subject names) from the JSON response: 以下代码可帮助您从JSON响应中提取Y轴值(即唯一的主题名称):
function getSubjects(){
var subjectsMap = {};
$.each(jsonFromServer, function(index, value){
if(!subjectsMap[value['Subject Name']]){
subjectsMap[value['Subject Name']] = 1;
}
});
return $.map(subjectsMap, function(index, val){ return val; });
}
Then we need to extract the Scores for each trainer in different subject which should be of form: [{name: "Trainer", data: []}] where data is an array of scores in subject whose order should be same as the order of subjects appearing in the Y axis data. 然后,我们需要提取不同主题中每个培训者的分数,其形式应为:[{name:“ Trainer”,data:[]}]其中,data是主题中分数的数组,其顺序应与顺序相同Y轴数据中出现的对象的数量。 Which can be achieved using the below code:
可以使用以下代码实现:
function getTrainers(){
var trainersMap = {};
$.each(jsonFromServer, function(index, value){
if(!trainersMap[value['Trainer']]){
trainersMap[value['Trainer']] = 1;
}
});
return $.map(trainersMap, function(index, val){ return val; });
}
function getMarks(){
var subjects = getSubjects();
var trainers= getTrainers();
var marks = {};
//initialize the trainers scores in all subjects to 0
$.each(trainers, function(index, trainer){
if ( !marks[trainer]){
marks[trainer] = {};
}
$.each(subjects, function(idx2, sub){
marks[trainer][sub] = 0;
});
});
//now populate with the actual values obtained from server
$.each(subjects, function(idx2, sub){
$.each(jsonFromServer, function(index, value){
var trainer = value['Trainer'];
var subName = value['Subject Name'];
var score = value['Score'];
if ( sub == subName){
marks[trainer][sub] = score;
}
});
});
//now format the marks object into the format required for highcharts
//i.e an array of object with properties [{name: "", data:[]}]
return $.map(marks, function(val, index){
var scoreArray = [];
$.each(val, function(index, score){
scoreArray.push(parseInt(score));
});
return {"name": index, "data": scoreArray};
});
}
The working code can be found in the fiddle here . 工作代码可以在这里的小提琴中找到 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.