Jump to content

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

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
Link to post
Share on other sites
  • 4 weeks later...

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,

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
Link to post
Share on other sites
  • 3 weeks later...

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...