[CLOSED] Custom colors for individual bars in bar chart

[Vamsi]

Hi Sir,

I have an requirement in barchart(Ext.Net Version4 WebApp).

Here is my requirement : I have "ok","pending","Failed","inProgress","declined " scenerios.

If OK --Green color
Pending - Orange
Failed -Red
In progress- Blue
Declined - Yellow

How to apply custom colors mentioned above.Individual bar in barcharts.

Thank you,
Vamsi.

[fabricio.murta]

Hello Vamsi!

Simply use a renderer and paint it according to the value. Much like this example:
- Charts - Bar - Renderer

Hope this helps!

[Vamsi]

Thank you for reply.. I see 'Data1' is hard coded value in example..but in my case more than 2 values that too dynamic values..

I have model with dynamic values.(more than 4 values)..

Let me know how to handle based on color code coming from database and attach to particular bar based on condition... If see 'OK' then attach color and I see different value then attach some other color code.

[fabricio.murta]

Hello @vamsi!

As far as I understand, chart bar colors come from the theme predefined with the component, not database. If you mean there's a field with a color code coming from the model, you can just fetch it from record.get('myColorCodeField') during the above example's color code, then return the color the same way as done with the example.

In the example, it just fetches a code given the result of (record.get('Data1') >> 0) % 5, which is a number between 0 and 4, and uses it to fetch the corresponding index in the array of colors defined there. You can use any logic with the record you feel like, even use the own record color code as the color of the bar.

Maybe we could better help you if you could provide a test case illustrating your scenario; with a simplified/base sample of how your data look like (so we know what you expect to use in order to determine the output of the chart bar); say, if data value is X, then color is Y, if data value is between A and B, then color is Z, and so on.

I believe that way we could better follow your needs, but I am pretty confident the example linked in our last post takes you to the point you could do almost anything with the available bar data in order to output it whatever way you wanted it to.

Hope this somehow clarifies and ultimately helps; if not, we're looking forward to your follow-up!

[Vamsi]

Here is my Code Im trying to achieve this.

function barRenderer(sprite, config, rendererData, index) {
    var fld = document.getElementById('EventCharts_hdnFields').value;     // fld= "ok","Cancel","Failed","Progress"
    var colors = document.getElementById('EventCharts_hdncolorItems').value;//Color= "green","orange","Red","Blue"
    var arrcolors = colors.split(',');
    var arrfld = fld.split(',');
    for (i = 0; i < arrcolors.length; i++) {
        var store = rendererData.store,
        storeItems = store.getData().items,
        record = storeItems[index],
        ieldValue = Math.random() * 20 + 10,
        value = (record.get(arrcolors[i]) >> 0) % 5,
        value = i;
        color = [arrcolors[i]][value];
        fill: color
    }
}

Let me know some where wrong in above code.

[Vamsi]

Hi,

What we are trying to do is change the colors of each segment in a STACKED bar chart to be different than the default colors you have provided without changing the order of the data. In other words we don't want data1 to be Green and data2 to be blue and data3 to be Red etc. We want to change these colors including the color of the circles in the legends to be different.

For Instance we want the colors to match those shown in the legends of the attached chart. I.E., we want Held to be ORANGE,Pending to be LIGHT ORANGE,INProcess to be BLUE,OK to be GREEN and Failed to be RED without changing the order of the data.



Thank you,
Vamsi.