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/
Related
I want to generate an array of charts and insert them into the DOM.
(I want to use these charts as templates and insert them at the right time)
like that:
Var array = [];
array[0].kendoChart ({// .........});
array[1].kendoChart ({// .........});
array.forEach (function (el) {
$('body').append(el);
})
Tell me how to be?
I would keep an array of the data used to generate the charts, and then generate them at the time of insert.
In HTML provide a container for the charts to be inserted (could be body as in your example):
<div id="chartsContainer" ></div>
Then in script have an array of the data needed to generate the multiple charts, e.g. :
var charts = [
{
chartid: "id1", title: "Chart 1",
data: [{ x: "item1", y: 2}, { x: "item2", y: 4},{ x: "item3", y: 1}]
},
{
chartid: "id2", title: "Chart 2",
data: [{ x: "item1", y: 8}, { x: "item2", y: 3},{ x: "item3", y: 7},{ x: "item4", y: 2}]
},
{
chartid: "id3", title: "Chart 3",
data: [{ x: "item1", y: 1}, { x: "item2", y: 2},{ x: "item3", y: 4} ]
},
];
Finally loop through the array, insert DIVs in the container and create a chart in each DIV:
$("#chartsContainer").empty();
var arrayLength = charts.length;
for (var i = 0; i < arrayLength; i++) {
var div = $('<div id="' + charts[i].chartid + '"></div>');
$("#chartsContainer").append(div);
div.kendoChart({
theme: "Flat",
chartArea: { height: 200 },
dataSource: {data: charts[i].data },
title: { text: charts[i].title},
seriesDefaults: {type: "column"},
series: [{field: "y" }],
categoryAxis: {
field: "x",
majorGridLines: {visible: false },
}
});
}
Working DEMO
I have a JSON array and want to make a chart with C3.js. My example gives me only one line. I want to display however one line for every user. How can I achieve this?
Here is my code:
this.chart = c3.generate({
data: {
json: [
{
ExamID: 'Exam1',
result: 80,
user:"user1"
},
{
ExamID: 'Exam2',
result: 90,
user:"user1"
},
{
ExamID: 'Exam1',
result: 70,
user:"user2"
},
{
ExamID: 'Exam2',
result: 60,
user:"user2"
}
],
keys: {
x: 'ExamID',
value: ['result'],
},
},
axis: {
x: {
type: 'category',
}
}
});
You need to have a different JSON structure. Every object in the array (every exam) needs to have the results of all students in it. You can use a key for every student and rename the key for the legend with the attribute names. Here is a Fiddle: https://jsfiddle.net/b5pd3wn6/
var chart = c3.generate({
bindto: "#element",
data: {
json: [
{
ExamID: 'Exam1',
user1: 80,
user2: 50
}, {
ExamID: 'Exam2',
user1: 90,
user2: 40
}
],
keys: {
x: 'ExamID',
value: ['user1', 'user2']
},
names: {
'user1': 'Peter Miller',
'user2': 'Vladimir Peterhans'
}
},
axis: {
x: {
type: 'category'
}
}
});
I use jquery.dataTables.min.js for Data table..
then i try to use highcharts. but when i put highcharts code in document ready function then dataTable lost his functionality.. such as search box, scroll, design.
$(function() {
/*For Highcharts*/
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'my_chart',
type: 'line'
},
title: {
text: 'Monthly National Trend of SOMA-JECT Administration'
},
xAxis: {
categories: ['January', 'February', 'March']
},
yAxis: {
title: {
text: 'No. of SOMA-JECT Administration'
}
},
series: [{
name: 'Soma-JECT',
data: [1, 0, 4]
}, {
name: 'Sayana PRESS',
data: [5, 7, 3]
}]
});
/*For Data Table*/
$('#example').DataTable({
scrollX: true
});
});
Try to change order of scripts. highcharts scripts move to bottom of dataTable scripts then may be everything is OK.
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>
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/