How can I use palette color or multiple grid color based on data range ?

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

How can I use palette color or multiple grid color based on data range ?

Post by aaron » Tue Apr 25, 2023 12:50 pm

I am unable to use palette colors for the line series.

I would like to display colors based on the line series seen in the image. this image is made from.net steema chart

Code: Select all

 for (var t = 0; t < _data.xData.length; t++) {
        this._series0.data.values[t] = _data.yData[t];
        this._series0.data.x[t] = new Date(_data.timeStampData[t]);
        this._series0.palette.colors[t] =_data.colorData[t];
        }
        
Attachments
line.JPG
line.JPG (26.13 KiB) Viewed 50956 times

Marc
Site Admin
Site Admin
Posts: 1274
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: How can I use palette color or multiple grid color based on data range ?

Post by Marc » Tue Apr 25, 2023 2:44 pm

Hello,

A typical application of palette would go like this:

Code: Select all

colorList = ["rgba(130,155,254,1.0)","rgba(252,209,36,1.0)","rgba(124,188,13,1.0)","rgba(253,133,47,1.0)",
	 "rgba(253,254,252,1.0)","rgba(226,78,33,1.0)","rgba(41,56,214,1.0)","rgba(183,148,0,1.0)",
	 "rgba(90,134,0,1.0)","rgba(210,70,0,1.0)","rgba(211,229,250,1.0)","rgba(216,216,216,1.0)",
	 "rgba(95,113,123,1.0)"];
		 
Chart1.palette.colors = colorList;

if (Chart1.series.items.length > 0) {
  for (var i = 0; i < Chart1.series.items.length; i++)
  {
	Chart1.series.items[i].format.fill=c.palette.get(i);
	if ((Chart1.series.items[i].pointer != null) && (Chart1.series.items[i].pointer.format != null))
	{
	  Chart1.series.items[i].pointer.format.fill=Chart1.palette.get(i);
	}
  }
}	
Regards,
Marc Meumann
Steema Support

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: How can I use palette color or multiple grid color based on data range ?

Post by aaron » Tue Apr 25, 2023 6:42 pm

here is my code & it is not working .
I am only looking for _series0 for color palettes

Code: Select all


 	this.TChart.addSeries(this._series0);
      this.TChart.addSeries(this._series1);

      this._series0.data.x = [];
      this._series1.data.x = [];
      this._series0.palette.colors = [];
       // this._series0.colorEach = "yes";
      // this._series0.visible = true;
      // this._series0.pointer.visible = true;
      
      for (var t = 0; t < _data.xData.length; t++) {
          this._series0.data.values[t] = _data.yData[t];
          this._series0.data.x[t] = new Date(_data.timeStampData[t]);

          const color_rgba = _data.colorData[t];
          this._series0.palette.colors[t] = `rgba(${color_rgba.r},${color_rgba.g},${color_rgba.b},${color_rgba.a})`;
          this._series1.data.values[t] = _data.hookloadData[t];
          this._series1.data.x[t] = new Date(_data.timeStampData[t]);
        }

        this.TChart.series.items[0].format.stroke.size = 2;
        this.TChart.series.items[1].format.stroke.size = 1;
        this.TChart.series.items[0].format.fill = this._series0.palette.colors;

Attachments
line1.JPG
line1.JPG (68.62 KiB) Viewed 50942 times

Marc
Site Admin
Site Admin
Posts: 1274
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: How can I use palette color or multiple grid color based on data range ?

Post by Marc » Thu Apr 27, 2023 8:00 am

Hello,

This is normally achieved by using the series.colorEach property but that influences the colour of line-pointers (when visible) and not the line itself, We are modifying the TeeChart code to include colorEach for the line segments themselves.

Ref: https://www.steema.com/bugs/show_bug.cgi?id=2609

Regards,
Marc
Steema Support

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: How can I use palette color or multiple grid color based on data range ?

Post by aaron » Mon May 01, 2023 1:05 pm

I think its fixed , how can I used it

Marc
Site Admin
Site Admin
Posts: 1274
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: How can I use palette color or multiple grid color based on data range ?

Post by Marc » Tue May 09, 2023 3:54 pm

Hello,

Yes, the latest npm update, v3.0.1, https://www.npmjs.com/package/TeeChart, includes the modification.

Use via:

Code: Select all

Chart1.series.items[0].colorEachLine="yes";   //or true
Regards,
Marc
Steema Support

aaron
Newbie
Newbie
Posts: 30
Joined: Mon Apr 17, 2023 12:00 am

Re: How can I use palette color or multiple grid color based on data range ?

Post by aaron » Sun May 14, 2023 10:25 am

Thanks, Its working now :D :D :D :D :D :D :D

Post Reply