CODEWITHSUNDEEP
javascriptjqueryjsonc3.js
web developer
web developer

Reputation: 527

Specific JSON value restriction in C3 charts

In my application, I am using c3 charts for dynamic chart implementation. In that I am in need to display the bars only for the values >0. Here is the fiddle link.

In that I need to display the bars only from year 2010. I know it is possible to achieve this by using JSON reconstruction in front end side. Other than this, is there any other ways to achieve this?

Fiddle link

JS:

var data = { "results": [{ year: 2006, amnt: 0 }, { year: 2007, amnt: 0 }, { year: 2008, amnt: 0 }, { year: 2009, amnt: 0 }, { year: 2010, amnt: 279 }, { year: 2011, amnt: 440 }, { year: 2012, amnt: 350 }, { year: 2013, amnt: 649 }, { year: 2014, amnt: 874 }, { year: 2015, amnt: 833 }, { year: 2016, amnt: 801 }] };

 var chart = c3.generate({
                bindto: '#chart',
                data: {
                    json: data.results,
                    keys: { x: 'year', value: ['amnt'] },
                    type: 'bar',
                    colors: { 'amnt': '#8c651c' }
                },
                axis: {
                    x: {
                        label: {
                            text: 'Year',
                            position: 'outer-center',
                        },
                        type: 'category',
                        tick: {
                            centered: true
                        }
                    },
                    y: {
                        tick: {
                            format: d3.format("$,")
                        },
                        label: {
                            text: '($ in millions)',
                            position: 'outer-middle'
                        },
                        padding: {
                            top: 0,
                            bottom: 0
                        }
                    }
                },
                grid: {
                    y: { show: true }
                },
                legend: {
                    show: false
                }
            });

Html:

<div id="chart"></div>

Upvotes: 1

Views: 46

Answers (1)

4b0
4b0

Reputation: 22323

use filter on json data to get desire result.

var result = data.results.filter(function(item) { 
   return item.amnt !== 0;  
});

Working Fiddle

Upvotes: 1

Related Questions