I know that there is full of question about this problem, but I have this strange scenario where:
Initially I have one C3JS pie chart, where on click needs to generate another C3JS bar chart. Until here it work fine without any problems. The C3JS bar chart on click should also generate another C3Js chart. The problem is when I click C3JS bar chart it gives me error:
c3.min.js?v=1031:2 Uncaught TypeError: Cannot read properties of undefined (reading 'getItem');
Here is example of my code with dummy data
var data1 = [
[
"setosa",
0.2,
0.2,
0.2,
0.2,
0.2,
0.4,
0.3,
0.2,
0.2,
0.1,
0.2,
0.2,
0.1,
0.1,
0.2,
0.4,
0.4,
0.3,
0.3,
0.3,
0.2,
0.4,
0.2,
0.5,
0.2,
0.2,
0.4,
0.2,
0.2,
0.2,
0.2,
0.4,
0.1,
0.2,
0.2,
0.2,
0.2,
0.1,
0.2,
0.2,
0.3,
0.3,
0.2,
0.6,
0.4,
0.3,
0.2,
0.2,
0.2,
0.2,
],
[
"versicolor",
1.4,
1.5,
1.5,
1.3,
1.5,
1.3,
1.6,
1.0,
1.3,
1.4,
1.0,
1.5,
1.0,
1.4,
1.3,
1.4,
1.5,
1.0,
1.5,
1.1,
1.8,
1.3,
1.5,
1.2,
1.3,
1.4,
1.4,
1.7,
1.5,
1.0,
1.1,
1.0,
1.2,
1.6,
1.5,
1.6,
1.5,
1.3,
1.3,
1.3,
1.2,
1.4,
1.2,
1.0,
1.3,
1.2,
1.3,
1.3,
1.1,
1.3,
],
[
"virginica",
2.5,
1.9,
2.1,
1.8,
2.2,
2.1,
1.7,
1.8,
1.8,
2.5,
2.0,
1.9,
2.1,
2.0,
2.4,
2.3,
1.8,
2.2,
2.3,
1.5,
2.3,
2.0,
2.0,
1.8,
2.1,
1.8,
1.8,
1.8,
2.1,
1.6,
1.9,
2.0,
2.2,
1.5,
1.4,
2.3,
2.4,
1.8,
1.8,
2.1,
2.4,
2.3,
1.9,
2.3,
2.5,
2.3,
1.9,
2.0,
2.3,
1.8,
],
];
var data2 = [
["data1", 30],
["data2", 120],
];
try {
c3.generate({
bindto: "#myChart",
pie: {
label: {
format: function (value, ratio, id) {
return value;
},
},
},
tooltip: {
format: {
value: function (value, ratio, id) {
var perc = `${parseFloat(ratio * 100).toFixed(1)}%`;
return value " (" perc ")";
},
},
},
data: {
columns: data1,
type: "pie",
onclick: function (event) {
console.log(event);
c3.generate({
bindto: "#myChart2",
legend: {
show: false,
},
axis: {
x: {
type: "category",
},
},
data: {
columns: data2,
type: "bar",
onclick: function (event2) {
myFunction(event2)
}
},
});
},
},
});
} catch (ex) {
console.log(ex);
}
function myFunction(event2){
console.log(event2)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<div id="myChart"></div>
<div id="myChart2"></div>Versions that I have:
C3js: 0.4.8
D3js: 3.4.4
Why with C3JS pie chart onclick event works fine and with the C3JS bar chart it gives me this error? Any solution to fix this?
CodePudding user response：
The issue is because you're using an incredibly outdated version of C3JS - it's from 2014!!
You should update that library to the latest version, which is 0.7.20. You will also need to update D3 to v5 to maintain support.
var data1=[["setosa",.2,.2,.2,.2,.2,.4,.3,.2,.2,.1,.2,.2,.1,.1,.2,.4,.4,.3,.3,.3,.2,.4,.2,.5,.2,.2,.4,.2,.2,.2,.2,.4,.1,.2,.2,.2,.2,.1,.2,.2,.3,.3,.2,.6,.4,.3,.2,.2,.2,.2,],["versicolor",1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,],["virginica",2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8,],]
var data2 = [["data1", 30],["data2", 120]];
try {
c3.generate({
bindto: "#myChart",
pie: {
label: {
format: function(value, ratio, id) {
return value;
},
},
},
tooltip: {
format: {
value: function(value, ratio, id) {
var perc = `${parseFloat(ratio * 100).toFixed(1)}%`;
return value " (" perc ")";
},
},
},
data: {
columns: data1,
type: "pie",
onclick: function(event) {
c3.generate({
bindto: "#myChart2",
legend: {
show: false,
},
axis: {
x: {
type: "category",
},
},
data: {
columns: data2,
type: "bar",
onclick: myFunction
},
});
},
},
});
} catch (ex) {
console.log(ex);
}
function myFunction(event2) {
console.log(event2)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<div id="myChart"></div>
<div id="myChart2"></div>If you absolutely have to retain the outdated version of C3JS, then there's a polyfill you can use to solve the problem available here