Jump to content
uniGUI Discussion Forums
andyhill

uniChart Set Color On BarSeries

Recommended Posts

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"}                  
  } ]; 
}
 

Share this post


Link to post
Share on other sites

Hello DD,

 

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

As below.

Thx

 

post-1785-0-29155500-1509037607_thumb.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?!

Share this post


Link to post
Share on other sites

Hi DD

No special conditions.

 

If possible :

Bar one : color Red

Bar two : yellow

Bar tree : blue

 

Thx

Share this post


Link to post
Share on other sites

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:

 

post-906-0-97915900-1509210902_thumb.png

 

Best regards,

  • Upvote 1

Share this post


Link to post
Share on other sites

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 !

  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

"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;
  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hello DD,

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

Thx again.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×