C3 Chart Example 2

by skibulk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js" integrity="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js" integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw==" crossorigin="anonymous"></script>
-->

JavaScript

console.clear();

function draw(chartId, label, points){
	'use strict';

	var chart = $(chartId)[0];
  if(chart == undefined) {
  	chart = $('<div id="' + chartId.slice(1) + '"></div>').appendTo('body')[0];
  }
  console.log(chart);

  var linePoints = [
  	['x'],
    [label],
  ];
  
	for(var i = 0; i < points.length; i++){
 		linePoints[0].push(points[i][0]);
 		linePoints[1].push(points[i][1]);
  }

	if(chart.c3 == undefined) {
    chart.c3 = c3.generate({
      bindto: chartId,
      data: {
        x: 'x',
        xFormat: '%Y-%m-%d',
        columns: linePoints
      },
      axis: {
        x:{
          type: 'timeseries',
          tick: {
            format: '%Y-%m-%d'
          }
        }
      }
    });
	}
  else
  {
    chart.c3.load({
			x: 'x',
      xFormat: '%Y-%m-%d',
      columns: linePoints
    });
  }
}

draw("#chart1", "line 1", [
	['2012-12-31',8],
	['2013-01-01',16],
	['2013-01-05',25],
]);

draw("#chart1", "line 2", [
	['2013-01-01',13],
  ['2013-01-05',20],
	['2013-01-11',39],
]);

draw("#chart2", "line 1", [
	['2012-12-31',100],
	['2013-01-01',56],
	['2013-01-05',11],
]);

draw("#chart2", "line 2", [
	['2013-01-01',74],
  ['2013-01-05',68],
	['2013-01-11',16],
]);