I am using C3.js to create a bar chart.
My case is as such:
I want to collect an X number of data and display them in my chart for this i have created the following script:
$.ajax({
type: 'POST',
url: '/AcademyStat/academy_module_user_report',
dataType: 'json',
data: {
request: 'ajax',
team_id: team_id,
module_id: module_id
},
success: function (data)
{
if(data != null)
{
for (var i = 0; i < data.length; i++)
{
var add_data = [data[i]['name'], data[i]['score']]
char_data.push(add_data);
}
var chart = c3.generate({
bindto: '#score_chart',
data: {
columns: [
char_data
],
type: 'bar'
}
});
}
}
});
As you can see from the above example i am looping through the data and then adding it to an array untill i have an array of array's (unknown number of data).
However when i run this in my browser i get the following error in the console:
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 286.6,NaN L286.6,NaN L531.4,NaN L531.4,NaN z" d3.min.js:5
Error: Invalid value for <path> attribute d="M 1102.6,NaN L1102.6,NaN L1347.3999999999999,NaN L1347.3999999999999,NaN z
However if i instead use the method pop the data is displayed fine. The only problem with pop(); is that i would have to know how many arrays my char_data array has and that is impossible for me to know.
Has anyone tried something similar or know how i might fix this issue?
It looks like you are setting the charts columns to an array inside an array columns: [ [ ['name', 'score'] ] ]
Change the columns: [ char_data ] to columns: char_data
$.ajax({
type: 'POST',
url: '/AcademyStat/academy_module_user_report',
dataType: 'json',
data: {
request: 'ajax',
team_id: team_id,
module_id: module_id
},
success: function (data) {
if (data != null) {
for (var i = 0; i < data.length; i++) {
var add_data = [data[i]['name'], data[i]['score']]
char_data.push(add_data);
}
var chart = c3.generate({
bindto: '#score_chart',
data: {
columns: char_data,
type: 'bar'
}
});
}
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments