How to show array data in column of a graph, that will have any number of values in it
I tried below code, and it is not working:
$http.get(getUrl('api/Report/GetDepartmentTargetData') + "?year="+ $scope.selectYear + "&ideaPerUser=" + $scope.ideaPerAssociate).then(function (response) {
$scope.deptChart = c3.generate({
data: {
bindto: '#chart',
x: 'x',
columns: [
['x', response.data.XAxis],
['Achievement', response.data.Data]
],
type: 'bar',
},
zoom: {
enabled: true
},
axis: {
x: {
type: 'categorized',
}
},
});
}, function (errors) {
});
response of the url that is being called from the angular js, it can be of any length:
<DepartmentTargetModel>
<Data>
<d2p1:string>0%</d2p1:string>
<d2p1:string>0%</d2p1:string>
<d2p1:string>100%</d2p1:string>
</Data>
<TargetLine>
<d2p1:string>72%</d2p1:string>
<d2p1:string>72%</d2p1:string>
<d2p1:string>72%</d2p1:string>
</TargetLine>
<XAxis>
<d2p1:string>RBEI/BSW2</d2p1:string>
<d2p1:string>RBVH/ETI1</d2p1:string>
<d2p1:string>BetP/BPS</d2p1:string>
</XAxis>
</DepartmentTargetModel>
Related
I would like to implement a simple line graph with ajax in which only two points
x will be the hours and y will be the count of calls.
CODE :
<script>
function getData() {
$.ajax({
type:'POST',
url: "http://localhost/demo_chart/test.php",
dataType: 'JSON',
success: function(response_data) {
new_data = $.map(response_data, function(i){
return {x: i['date'],y: i['count']};
});
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Count vs. Time'
},
xAxis: {
title: {
text: 'Time'
},
type: 'Time',
},
yAxis: {
title: {
text: 'Count'
}
},
series: [{
name: 'Test',
data: new_data
}]
});
}
})
}
$(document).ready(function () {
getData();
})
</script>
Output of http://localhost/demo_chart/test.php is same as below :
{"date":["13:00:00","13:00:01","13:00:02","13:00:03","13:00:04"],"count":["1","2","3","4","2"]}
But still graph is not generating. So i would like to know what is the problem here.
Anyone like to share some hint which can resolve this problem ?
Expected output is :
X- axis : show all date
Y-axis : show count
You need to correct your mapping function, for example:
var response = {
"date": ["13:00:00", "13:00:01", "13:00:02", "13:00:03", "13:00:04"],
"count": ["1", "2", "3", "4", "2"]
};
new_data = $.map(response.date, function(el, index) {
return {
name: el,
y: parseInt(response['count'][index])
};
});
Additionally, with that data structure, I recommend you to use category axis type.
xAxis: {
...,
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/ptx6fy2q/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
The code is taken as an example..
I need to generate a pie chart having 4 divisions (site1,site2...)each division correspond to its respective upload value.
In the above code i am not able to achieve this(I have specified value:['upload'])...
what is the exact value i have to specify?
Thanks..
chart = c3.generate({
data: {
json: [
{name: 'www.site1.com', upload: 200},
{name: 'www.site2.com', upload: 100},
{name: 'www.site3.com', upload: 300},
{name: 'www.site4.com', upload: 400},
],
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload'],
},
type:'pie'
},
axis: {
x: {
// type: 'category'
}
}
});
The pie chart maps each property to a pie sector. You could reformat your JSON like
var jsonData = [
{name: 'www.site1.com', upload: 200},
{name: 'www.site2.com', upload: 100},
{name: 'www.site3.com', upload: 300},
{name: 'www.site4.com', upload: 400}
]
var data = {};
var sites = [];
jsonData.forEach(function(e) {
sites.push(e.name);
data[e.name] = e.upload;
})
chart = c3.generate({
data: {
json: [ data ],
keys: {
value: sites,
},
type:'pie'
},
});
Working fiddle - http://jsfiddle.net/2nf9a7x4/
I've spent a lot of time with c3's documentation and examples, but have not been able to find a a way to unload or hide a category from a chart using API functions. Removing lines or bars is easy, but removing x-axis categories is proving more challenging. Here is a streamlined version of my chart.
var genderChart = c3.generate({
bindto: '#chart-gender',
data: {
json: [
{
Disease:"Mumps",
"Female":231,
"Male":198
},
Disease:"Tuberculosis",
"Female":18,
"Male":197
}
],
type: 'bar',
keys: {
x: "Disease",
value: ["Female","Male"]
},
selection: {
enabled: true,
grouped: true
},
},
axis: {
x: {
type: 'category',
}
},
});
I would like to dynamically show and hide (load and unload) diseases. For instance, I would like to be able to toggle Tuberculosis on and off. My actual chart has a number of other diseases. If I structured the data such that the diseases were bars and gender was on the x-axis, this would be easy. However, that is not comparison I wish to show with this chart. Is this possible with c3? How do I select all of the values with a given x value (disease) and then unload those data points? I appreciate any insight.
I would build up the json data object and then re-render the chart.
Here's an example:
var data = [{
Disease: "Mumps",
Female: 231,
Male: 198
}, {
Disease: "Tuberculosis",
Female: 18,
Male: 197
}];
$("button").click(function () {
Render();
});
Render()
function Render() {
var selectedData = [];
if ($("#mumps").prop("checked")) selectedData.push(data[0]);
if ($("#tb").prop("checked")) selectedData.push(data[1]);
var genderChart = c3.generate({
data: {
json: selectedData,
type: 'bar',
keys: {
x: "Disease",
value: ["Female", "Male"]
},
selection: {
enabled: true,
grouped: true
},
},
axis: {
x: {
type: 'category',
}
},
});
}
Here's the code in a fiddle:
http://jsfiddle.net/ot19Lyt8/14/
I receive an array json object. And now I don't know how I can process it in javascript code to series section data. I use this example of highchart column-rotated-labels. In this object has two columns AVG and other title, and length of this object might 20.
This is my codes:
$('#showresult').click(function() {
$.ajax({
url : "../../coursestatus",
type : "get",
data : {
major : $('#get').val(),
year : $('#yearlist').val(),
semester : $('#semester').val()
},
success : function(data) {
alert(data.length);
$(function () {
$('#container').highcharts({
chart: { type: 'column'
},
title: { text: 'World\'s largest cities per 2014' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
}
},
yAxis: { min: 0,
title: {
text: 'Population (millions)'
} },
legend: { enabled: false },
tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' },
series: [{ // I don't know how I can process data object to set that's elements to this
name: 'Population',
data: [
JSON.parse("[" + data + "]")
],
dataLabels: { enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: { fontSize: '13px',
fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'
}
}
}]
});
});
And this object include this elements:
title columns includes course name and avg columns includes mark for that course.
And this is data is in data object:
[{"title":"Math","avg":20},{"title":"Network","avg":18},{"title":"Operating system","avg":16}]
And above data is has 3 length and it is simple, in fact this object maybe that's length is >10.
Thank u!
I founded similar problem in this page and I solved my problem.
Populate Highcharts with JSON data using jQuery
I have been encountering issues for the past few days with ajaxing in some sample json data from an api to populate a chart using the Highcharts library.
I tried to chart.series[0].data = json and similar stuff in my ajax callback but nothing works.
my json is an array of data for each day in the month.
"{"month_mentions_graphic":[521,49,81,0,101,0,0,0,21,3071,0,0,0,0,0,1479,6124,2409,2608,0,0,3457,2057,2580,5876,4638,0,0,3337,3479,430]}"
Here's my code:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: requestData
}
},
title: {
text: 'Menções Mensais',
x: -20 //center
},
xAxis: {
categories: [1,2,3,4,5]
},
yAxis: {
title: {
text: 'Menções'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'mentions',
data: []
}
]
});
});
function requestData() {
$.ajax({
url: 'api/v1/dashboard/month_mention_graphic',
type: "GET",
dataType: "json",
data : {username : "demo"},
success: function(data) {
chart.series[0].data = data;
},
cache: false
});
}
Call chart.addSeries to add the whole series in one go instead of adding just the point array to the initial empty series:
function requestData() {
$.ajax({
url: 'api/v1/dashboard/month_mention_graphic',
type: "GET",
dataType: "json",
data : {username : "demo"},
success: function(data) {
chart.addSeries({
name: "mentions",
data: data.month_mentions_graphic
});
},
cache: false
});
}