Community Chart Components

Document created by Pedro Goncalves Employee on Aug 10, 2017Last modified by Diogo Belem on Nov 9, 2017
Version 10Show Document
  • View in full screen mode


CCC stands for Community Chart 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.


Check out the CCC interactive demos and it's API, here.


Credit: Webdetails Team, Lead - Pedro Alves; Cees van Kemenade VINZI


Version: 16.01.22

License: MPLv2

Available in: Marketplace




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's free and open-source, provided under the BSD License.
  • It's written in JavaScript and runs on the browser without requiring 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, scatterplots, 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'll see that CCC implements all kind of classic charts, such 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 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 that's not part of 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.


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

   // your code


You can find some examples of Protovis Component implementations here.

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.



Extension Points

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.


<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.



2 people found this helpful