Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This example demonstrates collaborative visualization of a pie chart using Chart.js and Convergence. The example also integrates the noUiSlider component to allow easy manipulation of the chart data. The example primarily makes use of the Model API to syncrhonize data in real time between multiple users editing the chart data.

Data Model

The data model for this example follows the standard Chart.js data model for a pie chart. The data could be modeled in any way. This data schema does not necessarily follow the best practices for Data Modeling in Convergence. For example deleting a pie chart wedge would require deleting the same index in four different arrays. However, for this example, the easiest thing to do was to simply adopt the model used by Chart.js. This way users can view the Chart.js Documentation for Pie Charts to understand the data.

The data model looks something like this:

  labels: ["Red", "Blue", "Yellow"],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]

Advanced Editing

You can edit a segment's label, background color and value in the Model Editor of the Convergence Admin Console. The chart will respond to changes in the Admin Console in real time, but be careful, you can easily corrupt the data if you don't maintain a valid Chart.js pie chart schema.

You can’t perform that action at this time.