Skip to Content

Visualization extension developers often ask how to apply Lumira’s color palette to their extensions. It’s now easy to do in Web IDE. Be sure to check out Dong Pan’s guide to creating extensions using Web IDE first, though. The instructions here assume familiarity with visualization extension development and that Web IDE, rather than the older vizpacker utility, has been used to create the extension.

First we have to ensure that our extension has declared its interest in receiving the color palette as a property. We do this in the file flow.js. Newly generated extensions will already have a block of code that looks like this:


element.addProperty({
            name: "colorPalette",
            type: "StringArray",
            supportedValues: "",
            defaultValue: d3.scale.category20().range().concat(d3.scale.category20b().range()).concat(d3.scale.category20c().range())
        });

Existing extensions might not have this code in place. If your extension doesn’t already have this code, add it. Now we can access this property from within our render function (in render.js) as follows:


var colors = this.properties().colorPalette;

In Lumira, the colors applied to your chart’s colorPalette property match those that were selected in the preferences dialog.

/wp-content/uploads/2015/04/preferences_681452.png

Testing the color palette within Web IDE is also easy. In the root folder of your project, find and make a copy of preview.html. Open up the copy and look for the code that specifies chart options, like this:


      require([ "mybundlename-bundle" ], function() {
                    //chart option
                    var chartPoperties = {
                      
                        "mymodulename Module": {
                            borderColor: "none"
                        }
                    };

We need to add the color palette setting for the plot module, as follows:


require([ "testcvomdefaults-bundle" ], function() {
                    //chart option
                    var chartPoperties = {
                      
                        "testcvomdefaults Module": {
                            borderColor: "none"
                        },
                        "plotArea": {
                            colorPalette: ["#9CC677", "EACF5E"] // Apply whichever colors you desire
                        },
                    };

Now just click the run button on the toolbar to run your copy of preview.html and you should see the new colors applied.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Utku Kalay

    David,

    I want to add color palette to Mini Donut Chart. I need only three colors and donut color must be changeable via Compose tab -> Visualization Properties.

    I applied the steps that you have mentioned. But color palette didn’t show up in compose tab.

    Is there anything that i have missed? Or, is there any code line to add render.js?

    Thanks,

    Utku Kalay

    (0) 
  2. Peter Langkafel

    Hi David,

     

    does this still work with Lumira 1.31.8 ?

    I get an array with 60 colors, but not the selected dimensions color palette from the preferences dialog…

     

    Any ideas?

    Thanks!

    Peter

    (0) 

Leave a Reply