uniChart Set Color On BarSeries

[andyhill]

I want to set the Bar Brush Color on a Chart BarSeries - please advise - thanks.

 

My Delphi code:-

 

      UniBarSeries1.Title:= 'Processed';

      UniBarSeries1.XLabelsSource:= 'DepartmentName';

      UniBarSeries1.YValues.ValueSource:= 'ServicedCalls';

      UniBarSeries1.YValues.Brush.Color:= clBlue; this is what I want to achieve but no such property - FAILS ?

      UniBarSeries1.DataSource:= UniMainModule.DataSource1;

 

My Ajax Code (copied from pie example - FAILS ?):

 

function chart.beforeInit(sender, config)

{

  config.series = [

  {  

    type: "bar",

    highlight: true,

    renderer: function(sprite, record, attr, index, store) 

    {

      return Ext.apply(attr, 

      {

        fill: ["#bdea74", "#36a9e1", "#ff5454", "#fabb3d", "#efe767"] [index%5] I will need Blue and Red for now

      });

    },

showInLegend: true,

    style: 

    {

      stroke: 'white', lineWidth: 2

    },

    field: "A", label: {field: "LL"}                  

  } ]; 

}

 

[Sherzod]

Hi,

 

Can you try this approach ?!:

http://forums.unigui.com/index.php?/topic/2663-how-to-customize-unichart/&do=findComment&comment=23057

 

Best regards,

[Abaksoft]

Hello DD,

 

Is it possible to set different colors for the same  UnibarSerie  ?

As below.

Thx

 

[Sherzod]

Hi,

 

Sorry, please can you clarify again?

[Abaksoft]

Thank you DD for your fast reply.

 

OK, I have an UniChart, with one uniSeriesBar1.

By default, the graphic gives one color for all bars (top figure)

 

Is it possible to give for each bar a different color (bottom figure) ?

I have only 3 bars (pump 1, pump 2, pump 3).

 

(

I tried to do it by creating 3 uniSeriesBar :

 

uniSeriesBar1

uniSeriesBar2

uniSeriesBar3

Here, I got my different colors

But, i could'nt show in abscissa pump1 pump2 and pump3.

)

 

Thx again.

[Sherzod]

Hi,

 

OK, I have an UniChart, with one uniSeriesBar1.
By default, the graphic gives one color for all bars (top figure)

Is it possible to give for each bar a different color (bottom figure) ?

 

under what conditions ?!

[Abaksoft]

Hi DD

No special conditions.

 

If possible :

Bar one : color Red

Bar two : yellow

Bar tree : blue

 

Thx

[Sherzod]

Hi,

 

We will try to analyze this

 

Best regards,

[Sherzod]

Hi,

 

No special conditions.

If possible :
Bar one : color Red
Bar two : yellow
Bar tree : blue

 

Can you try this approach for now ?!:

 

1. UniChart -> ClientEvents -> UniEvents -> function chart.beforeInit:

function chart.beforeInit(sender, config)
{
    sender.colors=['red', 'yellow', 'blue', '#ff7788'];
}

2. UniChart -> ClientEvents -> ExtEvents -> function chart.beforerender:

function chart.beforerender(sender, eOpts)
{
    sender.series.items[0].renderer = function(sprite, record, attributes, index, store) {
        if (record) {
            if (sender.colors[index]) {
                attributes.fill = sender.colors[index];
            }
        }
        return attributes;
    };

}

Result:

 

 

Best regards,

[Abaksoft]

Oh Maestro DD,

 

thank you very much.

A rainbow of  hapiness 

This is exactly the purpose.

 

All the best

And sorry for your  rest week-end !

[Abaksoft]

Hello DD,

On topic #9 you found a solution for changing colors in the same UnibarSerie1

That is Ok.

Now, is it possible to change colors at runtime ?

 

Here is in attachment a testcase.

Thx

SetColor_UniChart.zip

[Sherzod]

Hi,

 

Can you try this ?!

 

For example:

procedure TMainForm.UniButton1Click(Sender: TObject);
var st:string;
begin
  st:='''Red'',''Yellow'',''Green''';
  
  with UniChart1.JSInterface do
  begin
    JSAssign('chart.colors', [JSArray(['green','yellow','red'])]);
    JSCall('chart.refresh', []);
  end;
  
  //Set_Colors(st);
end;

Best regards,

[Abaksoft]

Thank DD,

This works fine.

 

Steel a problem with JsArray,

wich needs array, when i send a set of colors.

 

Can you see in attachment please.

SetColor_UniChart_2.zip

[Sherzod]

Ok, I will see

[Sherzod]

"Another solution":

procedure TMainForm.Set_Colors(L:Tstrings);
begin

  with UniChart1.JSInterface do
  begin

    //    'blue','green','yellow'   // works fine but not my List L ?

    L.Delimiter:=',';
    JSCode(#1'.chart.colors="'+L.DelimitedText+'".split(",");');
    JSCall('chart.refresh', []);
  end;

end;

[Abaksoft]

Wow !

excellent code.

You are our Maestro.

Thank you very much DD.

[Abaksoft]

Hello DD,

 

When updating yesterday to Buil 1426  (Sencha 6.5.2)   I lost my rainbow  !

 

because  UniChart -> ClientEvents -> ExtEvents -> function chart.beforerender:   not exist !

( Your code in #9 ).

 

I tried many functions  section  Chart.cartesian, refresh, draw...but nothing.

  

____

Here is in atachment a TestCase in Buil 1426.

Thx in advance.

SetColor_UniChart_3_Sencha_6_5_2.zip

[Sherzod]

Hi,

 

Ok I will check it

[Sherzod]

Hi,

 

Ok, one possible solution,

 

Can you try to use this approach for now ?!:

 

1. UniChart1 -> ClientEvents -> UniEvents -> function chart.beforeInit:

function chart.beforeInit(sender, config)
{
    sender.colors=['red', 'yellow', 'blue', '#ff7788'];
}

2. UniChart1 -> ClientEvents -> ExtEvents -> function beforerender:

function beforerender(sender, eOpts) 
{    
    var me=sender.chart;
    me.refill=function(sprite, config, rendererData, index) {
        return {fillStyle: me.colors[index]}
    };   
    me.series[0].setRenderer(me.refill);
}

3.

procedure TMainForm.Set_Colors(L:Tstrings);
begin
  with UniChart1.JSInterface do
  begin
    L.Delimiter:=',';
    JSCode(#1'.chart.colors="' + L.DelimitedText + '".split(",");');
    JSCode(#1'.chart.series[0].setRenderer();');
    JSCode(#1'.chart.series[0].setRenderer('#1'.chart.refill);');
  end;

end;

Best regards,

[Abaksoft]

Ho...Ho  !

That works, Maestro.

Thank you very much.

[RobYost]

I was reading this thread and noticed Abaksoft has Sencha 6.5.2

 

When I look in my ServerModule I see ExtJsVer=ext-4.2.5.1763

 

Is that my Sencha version? 

 

Have I missed some sort of upgrade?  I have 1.0.0.1420

[Sherzod]

http://forums.unigui.com/index.php?/topic/9621-unigui-102-beta/&do=findComment&comment=49940

[Abaksoft]

Hello DD,

 

Sorry for this simple question :

1.  I can'nt refresh UniBarSeries  color  in  RunTime  !

Attachment a TestCase (Build 1421)  

 

2. Also, to not disturb you too much, where can we find Sencha examples ?

 

Thx

SetColor_RunTime_Build_1421.zip

[Abaksoft]

Hello DD,

Can you see, please my code in topic #23 (refresh 1 UniBarSeries = 1 Color)

Thx again.

[Sherzod]

Hi,

 

Sorry for the late reply.

 

http://forums.unigui.com/index.php?/topic/9344-unichart-set-color-on-barseries/&do=findComment&comment=49410doesn't work?