Setting the graph name in C3.js

114 views
Skip to first unread message

miketis...@gmail.com

unread,
May 26, 2015, 1:47:21 PM5/26/15
to c3...@googlegroups.com
I have a graph that in which I load new data, using the following function:

function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: [
yAxis,
xAxis
]
});
}, 100);
}

An Example of values for yAxis, xAxis, and Header that are passed in look as follows:

yAxis:

["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

xAxis:

["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]

Header:

MakeModeChange

Everything works great except that when the chart is loaded it gives the data name "y", I need it to have `Header` (in this case MakeModeChange) as the data name. I tried using `name` like the code below but nothing happened:

function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
console.log(Header);
console.log(yAxis);
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: [
yAxis,
xAxis
],
names: {
y: 'Header'
}
});
}, 100);
}

I also tried changing what I passed into `yAxis` to look like this:

["MakeModeChange", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

And then change the load function to look like this:

function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
chart.load ({
bindto: "#graph",
xs: {
Header:'x'
},
columns: [
yAxis,
xAxis
],
});
}, 100);
}

But then I get the following error:

Uncaught Error: x is not defined for id = "MakeModeChange".

Any idea how to make this work?

miketis...@gmail.com

unread,
May 29, 2015, 10:19:54 AM5/29/15
to c3...@googlegroups.com, miketis...@gmail.com
Reply all
Reply to author
Forward
0 new messages