Jump to content

uniChart Set Color On BarSeries


andyhill

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

  • Like 1
  • Upvote 1
Link to comment
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 comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...