Hide values on the X axis

[pierpaolocira]

Hi, I would like to know if it is possible to "filter" values on the X axis.

Let me explain: imagine to have 3 data rows (or columns) A,B,C and 5 values for each (one for category: V,W,X,Y,Z).

As we know, C3 automatically puts the legend for A,B,C and allows, by clicking them, to toggle the data serie. But what if I would like to hide the representation for the values in the category X (so, to draw values just for V,V,Y,Z)? It is possible? I know there is the zoom feature... but does a feature for my request exist? Or have I to manually implement it modyfing the existing data serie?

Thanks

[netil]

Want to hide text on X axis? Just set below option for that.

onrendered: function() {
    d3.selectAll(".c3-axis.c3-axis-x .tick text")
        .style("display", "none");
}

If not, attach screenshot or code to make more clear your question.

[pierpaolocira]

Hi, and thanks for reply.

To be honest I think my question in clear enough if you read it carefully: "I would like to hide the representation for the values in the category X".

In any case, imagine a situation as the following:

I would like to hide the www.site2.com (so to have only site1 and site4 x-category and data).

From the documentation, it seems the only solution is to redraw all the graph.

[netil]

@pierpaolocira, I said more clear because the way of pointing name or interaction result of some specific part of the chart isn't really clear and these arises communication problem. If you(or somebody else) want to receive a better answer the person who is asking should put more effort posting clear question.

Anyway, according your question, the chart has 3 data columns with 5 categories.

var chart = c3.generate({
    "bindto":"#chart",
    "data":{
        type: "bar",
        x: 'x',
        columns: [
            ['x', 'V','W','X','Y','Z'],
            ['A', 11, 8, 7, 6, 5 ],
            ['B', 9, 3, 6, 2, 8 ],
            ['C', 3, 4, 5, 6, 7 ]
        ]
    },
    "axis":{
        "x":{
           "type":"category"
        }
    }
});

Toggling legend will hide data, and you want hide not entire of data, just some categories of data, isn't it? For example, want to hide(or filtering as you said) 'W' and 'Y' categories like this?

[pierpaolocira]

Hi, and thank you for your time.

Yes, your note is right, so to be sure I'll be fully understood, I try to better explain what I'm asking, also for future readers.

As you said, my original situation is like the following:

var chart = c3.generate({
  "bindto":"#chart",
  "data":{
      type: "bar",
      x: 'x',
      columns: [
          ['x', 'V','W','X','Y','Z'],
          ['A', 11, 8, 7, 6, 5 ],
          ['B', 9, 3, 6, 2, 8 ],
          ['C', 3, 4, 5, 6, 7 ]
      ]
  },
  "axis":{
      "x":{
         "type":"category"
      }
  }
});

BUT I would like, when a specific event triggers, to reach the following situation:

As you can see, the entire "W category" has been hidden (this is what I meant by writing: "toggle the representation for the values in the category, such as for the data series").

I'm asking if there is a way to achieve that (without having to redraw all the graph, after manually implement slicing/caching mechanism on the data arrays).

Honestly I think it can also be a nice feature (at least with category-based x-axis type), but this is another point... :)

Bye

[netil]

Hiding data is easy(using .hide() method), but hiding category there's no API provided for that.

One approach is loading again without the category data that you don't want to. (C3 internally call redraw whatever when data area need to be re-drawing is required)

I made a simple demo which input category will be unloaded from the chart

• http://jsbin.com/filuci/edit?html,js,output

Check out how it works

[pierpaolocira]

Thank you for your reply.

It is similar to the function I implemented... thanks.

In fact the keypoint of my question is "Does a feature for my request exist? Or have I to manually implement it modyfing the existing data serie?"

From your replies, it seems the answer is: "No, it doesn't exist as a feature, and you have to maually implement it". So, ok.

Now I would like to know if other users consider (or not) useful this feature. If it is useful we can propose it as a "feature request" for future releases...

[netil]

For category manipulation there're .category() and .categories() APIs, but they're only to update category text values. As you said there's no API for that purposes.

[pierpaolocira]

Yes, it make me think that categories and values are managed separetely in the low-level implementarion.

Does someone think can be useful to have an API for managing the categories in the same way of the data series?

[trollfred]

@pierpaolocira I do :) i.e. it is useful sometimes to hide a category which has zero values

[pierpaolocira]

@kittee Indeed my original point was not "how to code a feature", but "is that feature implemented? If not, who is interested in?" Thank you... ;)

[AnamikaD]

@pierpaolocira Good question!! @netil Amazing explanation with an example!!! Can you guys guide me through my doubts? I have a bar graph that is similar to netil's graph. Instead of hiding, can I load only a specific x axis bar. Example in the search box: I type "w", I am able to see that w bar only (may be highlighted).

[zteric]

@pierpaolocira Good question. I have the same problem. @netil has already showed the example about loading data again.But this method can not work if the chart is dynamic, i.e. building a chart via websocket data(flow data to chart). I have tried to get data from the chart and filter chart data then put it back.But the format of received data is different from what I send to chart.So it seems I have to generate data from current chart and filter it then put it back and render chart.