CODEWITHSUNDEEP
javascriptc3.js
Cloud
Cloud

Reputation: 1034

Can I rendered javascript object data into c3js chart?

I make a chart by using c3js library. Normally when I click legend, its only shows legend data.

Now, I want to add new Simple Moving Average data without remove existing data when I click a legend.

Here is the sample image of what I want, sample chart

If I click dept1 legend, I want to add new SMV value to chart.

Here is what I tried,

function show_svm(data) {
        chart.load({
            bindto: '#chart',
            x: 'date',
            xFormat: m_d_format,
            json: data,
            keys: {
                x: 'date',
                value:  ['Dept1','Dept2','Dept3', 'Dept4','SMV']
                }
            });
        }

In the function argument data is like this,

{
    'date':["2015-11-23","2015-11-24","2015-11-25","2015-11-26","2015-11-27","2015-11-30","2015-12-01","2015-12-02","2015-12-03","2015-12-04","2015-12-08","2015-12-09","2015-12-11","2015-12-14","2015-12-15","2015-12-16","2015-12-17","2015-12-18","2015-12-19","2015-12-21","2015-12-22","2015-12-23","2015-12-24","2015-12-25","2015-12-28","2015-12-29","2015-12-30","2016-01-04","2016-01-05","2016-01-06","2016-01-07","2016-01-08","2016-01-09","2016-01-11","2016-01-12","2016-01-13","2016-01-14","2016-01-15","2016-01-18","2016-01-19","2016-01-20","2016-01-21","2016-01-22","2016-01-23","2016-01-24","2016-01-25","2016-01-26","2016-01-27","2016-01-28","2016-01-29","2016-02-01","2016-02-02","2016-02-03","2016-02-04","2016-02-05","2016-02-08"],
    'Dept1':["100.00","50.00","57.14","71.43","100.00","42.86","85.71","85.71","71.43","66.67","33.33","100.00","50.00","57.14","66.67","71.43","100.00","57.14","0.00","28.57","57.14","66.67","57.14","57.14","71.43","57.14","57.14","71.43","71.43","71.43","85.71","83.33","100.00","42.86","57.14","57.14","66.67","100.00","71.43","100.00","71.43","14.29","28.57","100.00","50.00","28.57","57.14","57.14","57.14","100.00","42.86","57.14","71.43","71.43","42.86","71.43"],
    'SMV':[null,null,null,null,null,null,null,70.407142857143,73.468571428571,74.83,69.387142857143,69.387142857143,70.407142857143,66.325714285714,63.605714285714,63.605714285714,68.367142857143,71.768571428571,57.482857142857,54.421428571429,54.421428571429,54.421428571429,52.38,46.257142857143,48.298571428571,56.461428571429,60.542857142857,62.584285714286,63.264285714286,65.305714285714,69.387142857143,71.087142857143,77.21,75.17,73.128571428571,71.087142857143,70.407142857143,72.448571428571,70.748571428571,70.748571428571,74.83,68.708571428571,64.627142857143,69.388571428571,62.245714285714,56.122857142857,50,47.958571428571,54.08,64.284285714286,56.121428571429,57.141428571429,63.264285714286,65.305714285714,63.265714285714,65.307142857143]
}

This data are came from ajax. But, this SVM data cannot render on chart and I don't get any error. I don't know why.

The another thing I want to know is, can I use javascript object to json of c3js chart like this: json:data,. Is it correct way or not?. I'm very appreciate for any suggestion.

Upvotes: 0

Views: 1003

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16079

You have just a few mistakes in your code. First, you used the attribute json. For using that attribute, your data needs to be in the following form:

var data = [
    { 'date': '2015-01-01', 'Dept1': null, 'SMV': 3},
    { 'date': '2015-01-02', 'Dept1': 1, 'SMV': 4}
];

Your data however looks different. You separated all the date, the Dept1 and the SMV data into separate arrays. The way to go here is the following: The data should contain one array of several arrays. The first argument is defined as the key of the dataset. An example dataset looks then like this:

var data = [
    ['date', '2015-01-01', 2015-01-02'],
    ['Dept1', null, 1],
    ['SMV', 3, 4]
];

You then also do not need the keys attribute anymore.

Lastly, you forgot to add the c3 and d3 dependencies in your jsFiddle, what led to the error c3 is not defined. You can find a fixed example of your jsFiddle here: jsFiddle.

Upvotes: 2

Related Questions