Jump to content


Photo

uniChart Set Color On BarSeries

Chart Color

  • Please log in to reply
28 replies to this topic

#1 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 158 posts
  • LocationMelbourne Australia

Posted 23 October 2017 - 12:39 AM

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

  • 0

Andy


#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 23 October 2017 - 06:45 AM

Hi,

 

Can you try this approach ?!:

http://forums.unigui...art/#entry23057

 

Best regards,


  • 0

#3 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 26 October 2017 - 05:06 PM

Hello DD,

 

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

As below.

Thx

 

Attached Files


  • 0

#4 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 26 October 2017 - 05:42 PM

Hi,

 

Sorry, please can you clarify again?


  • 0

#5 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 26 October 2017 - 08:48 PM

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.
  • 0

#6 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 27 October 2017 - 06:59 PM

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


  • 0

#7 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 28 October 2017 - 09:29 AM

Hi DD
No special conditions.

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

Thx
  • 0

#8 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 28 October 2017 - 09:41 AM

Hi,

 

We will try to analyze this

 

Best regards,


  • 0

#9 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 28 October 2017 - 05:15 PM

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:

 

Attached File  barSeriesColors.png   5.84KB   1 downloads

 

Best regards,


  • 1

#10 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 28 October 2017 - 06:12 PM

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 !


  • 1

#11 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 20 November 2017 - 10:42 AM

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

Attached Files


  • 0

#12 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 20 November 2017 - 11:12 AM

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,


  • 0

#13 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 20 November 2017 - 02:47 PM

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.

Attached Files


  • 0

#14 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 20 November 2017 - 02:51 PM

Ok, I will see
  • 0

#15 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 20 November 2017 - 03:37 PM

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

  • 1

#16 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 20 November 2017 - 03:51 PM

Wow !
excellent code.
You are our Maestro.
Thank you very much DD.
  • 0

#17 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 07 December 2017 - 09:13 AM

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.

Attached Files


  • 0

#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 07 December 2017 - 09:34 AM

Hi,

 

Ok I will check it


  • 0

#19 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3643 posts

Posted 07 December 2017 - 05:32 PM

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,


  • 1

#20 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 490 posts
  • LocationAlgeria

Posted 07 December 2017 - 07:16 PM

Ho...Ho  !

That works, Maestro.

Thank you very much.


  • 0





Also tagged with one or more of these keywords: Chart, Color

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users