Community Chart Components

CCC stands for Community Charting Components, the CTools charting library, which is build on top of Protovis, a very powerful free and open-source visualization toolkit.

The aim of CCC is to provide developers the path to include into their dashboards the basic chart types, without losing the main principle: Extensibility.

You should prefer CCC over other kind of charts because of the CCC chart properties inherited from Protovis:

  • The CCC charts look great, are flexible, allow interaction and much more.
  • The most attractive feature of CCC charts is the huge customization capability.

Credits: Webdetails Team, Lead - Pedro Alves; Cees van Kemenade     Van Inzicht Naar Zorg Innovatie

Protovis is a visualization library that seamlessly integrates with our tools.

Unlike low-level graphics libraries, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify the construction of charts.

Main Features

  • It is free and open-source, provided under the BSD License. It is written in JavaScript and runs on the browser without the need for any plugins;
  • Its graphics are also viewable on a selected list of mobile devices;
  • It requires a modern browser, which means any recent version of Safari, Chrome, Firefox, Opera or IE8 or later;
  • Despite being designed for custom visualization, it allows you to create standard chart types such as areas, bars, scatter plots, pies & donuts, lines and step charts in a very easy way.

Protovis Version

During the creation of CCC, we had to make some changes / improvements to Protovis itself. We're using a patched version of Protovis 3.3, transition branch. The main differences are:

  • Added backend support for server-side batik rendering;
  • Integrated and improved DataMarket's Protovis MSIE/VML add-on for supporting IE 8;
  • Added support for multiple event handlers per event;
  • Added support for fill and stroke linear and radial gradients;
  • Added the new line and area "smart" segmentation mode;
  • Added support for miter limit and miter joins in the normal lines segmentation mode;
  • Added support for delegation in mark's property functions, allowing to call base implementations of specified properties.

CCC charts are integrated in CDE out-of-the-box. In the editor you can add CCC charts from the Components perspective in the same way you add any other visual component.

Looking at the list of Charts components, you will see that CCC implements all kind of classic charts as pie, bar, dot, stacked area, and so on. For each of them you may provide not only the data that feeds the chart, but also several attributes as colors, title, X axis position, etc., all of which are quite self-explanatory.

Two properties however deserve special attention: Crosstab mode and Series in rows . These properties are flags - false by default - that indicate the format of your data:

  • If your data resembles a matrix (like the output of a MDX query) you have to set the Crosstab mode flag to true ;
  • If you have two columns (categories, values) or three (series, categories, values), leave the Crosstab mode flag in false ;
  • If the series are in the rows you have to set the Series in rows flag to true ;
  • If not, leave the default false .

Protovis Component

If you want to add to your dashboard a kind of chart not present in the list of CCC components, you still have the chance: there is a component named Protovis component meant for that purpose.

In a Protovis component all you have to do is to supply the function that draw the Protovis chart. You do it by typing the function in the Custom Script. The function should be like the following:

function(vis,data) {
    // vis - the container where protovis objects will be drawn
    // data - result of the query, if applicable
    // your code

Be aware that in the code you don't have to create the visualization object (the Protovis root panel), nor call the render() method. CDF takes care of that for you.

When you configure CCC components, you can see that the most commonly used properties such as width and height, title, legends or colors are already implemented. However you may notice that the charts lack some other properties as, for example, the font for the x-axis, or the rotation angle for the y-labels.

Not only that: You know that Protovis has those features; it just happens that CCC has not implemented them yet. It is not the end of the world. Certainly you can live without those particular features, but if you really want to configure those attributes in your chart, you're lucky because you can define an extension point.

An Extension Point is a CCC concept that allows you to implement all the Protovis properties not implemented directly in CCC. When defining an extension point you have to provide a name and a value . The name should have this format:

<CCC identification> + _ + <Protovis_property_name>

For example for defining the angle for the y-label you define an extension point named yAxisLabel_textAngle . A CCC component can have as many extension points as you need.

You can find a list of the supported Protovis properties right here, on each chart type's page, on the CCC reference documentation page, or, even, in the Protovis documentation page.


Need a non-standard visualization solution? Consider asking an estimate to Webdetails.

Need a non-standard visualization solution? Consider asking an estimate to Webdetails.


What does CCC mean?

CCC stands for Community Chart Components.

Is CCC free?

CCC is released under the MPLv2 license.

How do I add CCC charts to my dashboard?

CCC is integrated in CDE. In CDE, just look for the CCC components inside the Chart category.

Check our demo. We can build a matching solution for your scenario too. Ask us for a quote.

Is there a GUI for testing or evaluating CCC charts?

There is no GUI tool for this, but we have developed an interactive playground for that purpose. Go to the Charts menu in this site, pick the chart of your choice, and try the code.

Does CCC require other CTools and the Pentaho Business Intelligence Server?

No, CCC is a plain JavaScript library and can be used standalone, as you can see in the Chart gallery above.

Where can I find information about the changes made in CCC2?

We maintain a FAQ wiki that covers this. It also shows how common customizations can be done in CCC2.

Check our demo. We can build a matching solution for your scenario too.

Recommend this article:

Registered in Portugal. NIF 508 528 283