Clever Geek Handbook

C3.js - show / hide points independently for data series

I am creating a line chart for a data series using C3.js.

I am struggling to show "dots" for just one episode.

Basically, first I create a multi-row ruler with some reference data, and then load (using char.load) a new specific data line in which I want to show points, only for that specific line while the other anchor lines remain with hidden points.

Is this possible through C3.js? If so, could you please urge me to do this, thanks! Also, any way to do it using D3.js while using C3.js is welcome.

This is an official example where all points are hidden for a data series, for reference only: http://c3js.org/samples/point_show.html

+3


source to share


2 answers


c3.js

provides overarching class attributes for all of its elements, so you can customize them with CSS. For example, to hide the dots in the second series, add this CSS:

#chart .c3-circles-data2 {
  display: none;
}


An example is here .

+6


source


Here's an example of using the show and hide methods of a chart object to selectively display rows:



<!DOCTYPE html>
<html lang="en">
<head>
    <title>show hide</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                    ['x',     1, 2, 3, 4, 5],
                    ['y1', 3, 5, 6, 4, 5],
                    ['y2', 2, 4, 7, 6, 5]
              ]
            }
        });

        function cbclick(a){
            var lineData = "y" + a;
            var cbID = "cb" + a
            var cb = document.getElementById(cbID);
            if (cb.checked) {
                chart.show([lineData]);
            } else {
                chart.hide([lineData]);
            }
        }
    </script>

    <div align="center">
        <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
        <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
    </div>
</body>
0


source






More articles:


All Articles