CODEWITHSUNDEEP
javascriptcssd3.jsc3.js
Rajan
Rajan

Reputation: 426

How to overcome x-axis styling problems when multiple X-axis Values with single point to load in C3 graph?

Codepen link

var chart = c3.generate({
      bindto: '#c3',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-10'],
            ['sample', 30]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                // this also works for non timeseries data
                values: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04','2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12','2013-01-13', '2013-01-14', '2013-01-15']
            }
        }
    }
      });

When you have multiple values for x-axis ticks and there is single point to load on the graph ended in timestamps overlap.

Screen Shot 2020-04-02 at 10 29 51 AM

This issue won't come if you have more than one point to load in same graph. How to resolve this when you have single point first for sometime and then second point loads after certain period of time ?

Upvotes: 2

Views: 87

Answers (1)

schustischuster
schustischuster

Reputation: 761

You could solve this by removing the tick values for the x axis and replacing them by format (you already define the date within the x data):

axis: {
      x: {
           type: 'timeseries',
           tick: {
              format: '%Y-%m-%d'
           }
       }
}

Please have a look at the executable snippet below. I have added a Timeout function for demonstration. 

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ["x", "2013-01-10"],
          ["sample", 30]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2015-01-09', '2015-01-10', '2015-01-11'],
            ['sample', 20, 30, 45],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

If you already want to display all the times as ticks on the x axis at the beginning when only one data point is present, you could add "null" to the data string: 

data: {
    x: 'x',
    columns: [
        ['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
        ['sample', null, 30, null, null]
    ]
}

Below the executable snippet:

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
          ['sample', null, 30, null, null]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
            ['sample', 20, 30, 15, 25],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

Upvotes: 1

Related Questions