Customizable

ccd3 has many custome options. You can easily customize your chart.

Simple Setup & Usage

ccd3 depends only on d3.js. No messy setups are needed.

Interactive

ccd3 has many interactive functions, such as drag&drop zoom and toggling series.

And ...
  • ccd3 is released under the MIT License. Free for commercial and non-commercial use.

Chart Examples

Quick Tutorial

1. Download and setup d3.js

<head>   
  ...
  <script type="text/javascript" src="./vendor/d3.v3/d3.v3.js"></script>
  ...
</head>

2. Download and setup ccd3

  • Latest version from here.
  • Stable old versions from here.
<head>   
  ...
  <script type="text/javascript" src="./ccd3/ccd3.js"></script>
  <link rel="stylesheet" href="./ccd3/ccd3.css" type="text/css" />
  ...
</head>

3. Prepare dataset

var dataset =
[
  {
    name : "series1",
    color : "gray",
    series_type : "bar",
    visible : true,
    values : 
        {
            x: new Date("2014/01/27"),
            y: 68.15791393164545
        },
        {
            x: new Date("2014/01/28"),
            y: 65.25313461665064
        },
        {
            x: new Date("2014/01/29"),
            y: 84.24908308777958
        },
        {
            x: new Date("2014/01/30"),
            y: 68.07700398843735
        },
        {
            x: new Date("2014/01/31"),
            y: 84.82268058229239
        }
    ]
  }
];

4. Prepare options

var options = {
  title : "Tutorial Sample Charts",
  width : 320,
  height : 320
};

5. Create instance and render chart

var chart = new ccd3.Chart("chart",dataset); // create instance
chart.setup_options(options); // setup options
chart.render(); // render chart

Tutorial HTML Source

  • See working sample here
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="./vendor/d3.v3/d3.v3.js"></script>
    <script type="text/javascript" src="./ccd3/ccd3.js"></script>
    <link rel="stylesheet" href="./ccd3/ccd3.css" type="text/css" />
    <script type="text/javascript">
      window.onload = function(){
        var dataset =
        [
          {
            name : "series1",
            color : "gray",
            series_type : "bar",
            visible : true,
            values : [
              {
                x: new Date("2014/01/27"),
                y: 68.15791393164545
              },
              {
                x: new Date("2014/01/28"),
                y: 65.25313461665064
              },
              {
                x: new Date("2014/01/29"),
                y: 84.24908308777958
              },
              {
                x: new Date("2014/01/30"),
                y: 68.07700398843735
              },
              {
                x: new Date("2014/01/31"),
                y: 84.82268058229239
              }
            ]
          }
        ];

        var options = {
          title : "Tutorial Sample Charts",
          height: 320,
          width: 320
        };

        var chart = new ccd3.Chart("chart",dataset);
        chart.setup_options(options);
        chart.render();
      };
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>