Highlight a volume or bar using JavaScript

TeeChart for Javascript for the HTML5 Canvas
Post Reply
myTeeChart219
Newbie
Newbie
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Highlight a volume or bar using JavaScript

Post by myTeeChart219 » Wed Apr 19, 2017 1:48 pm

I'm trying to recreate the attached image using javascript. I want to highlight a specific bar with a specific colour.

Something like:

Code: Select all

  Chart1.series.items[0].data.values[117].format.stroke.fill="red";
or
 Chart1.series.items[0].data.ValuesIndex[117].ValueColour("red");
How would I do that?

I'd appreciate any suggestions or help on how to achieve it. Many thanks.
Attachments
image.png
image.png (32.78 KiB) Viewed 1403 times

Yeray
Site Admin
Site Admin
Posts: 8514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Highlight a volume or bar using JavaScript

Post by Yeray » Thu Apr 20, 2017 11:41 am

Hello,

You could set a color for each point in a series. Ie:

Code: Select all

            var barSeries1 = Chart1.addSeries(new Tee.Bar()).addRandom(50);
            
            barSeries1.palette.colors = [];
            for (var i=0; i<barSeries1.count(); i++) {
                if (i!=5)
                    barSeries1.palette.colors[i] = barSeries1.format.fill;
                else
                    barSeries1.palette.colors[i] = "red";
            }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Image Please read our Bug Fixing Policy

myTeeChart219
Newbie
Newbie
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Highlight a volume or bar using JavaScript

Post by myTeeChart219 » Fri Apr 21, 2017 8:16 am

Thanks for the quick response, but unfortunately I can't get this to work using your volume graph demo?

Taking the volume example from your demo, I added the code below and nothing changes:

Code: Select all

            volume.palette.colors = [];
            for (var i=0; i<volume.count(); i++) {
                if (i<100)
                    volume.palette.colors[i] = volume.format.fill;
                else
                    volume.palette.colors[i] = "red";
            }
Using your own demo with this addition should make the remaining 100 random bars red. But they don't?

Please help.
Thank you.

Yeray
Site Admin
Site Admin
Posts: 8514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Highlight a volume or bar using JavaScript

Post by Yeray » Fri Apr 21, 2017 10:55 am

Hello,

It does it for me here:
chrome_2017-04-21_12-54-42.png
chrome_2017-04-21_12-54-42.png (22.17 KiB) Viewed 1391 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Image Please read our Bug Fixing Policy

myTeeChart219
Newbie
Newbie
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Highlight a volume or bar using JavaScript

Post by myTeeChart219 » Fri Apr 21, 2017 11:22 am

That's great Yeray - but not for me :(

Would you be kind enough to send me your example. I've tried this in Chrome and IE and cannot get it to work.

I'm using version "TeeChart_for_JavaScript_Non_Commercial_v2015.05.02.1.8"? Is this the correct version? Here's my function:

Code: Select all

function draw() {

  Chart1=new Tee.Chart("canvas");

  // Create series:
  var volume=Chart1.addSeries(new Tee.Volume());

   volume.palette.colors = [];
     for (var i=0; i<volume.count(); i++) {
        if (i<100)
           volume.palette.colors[i] = volume.format.fill;
        else
           volume.palette.colors[i] = "red";
         }
        
// Random data:

  var value=Math.random()*10;
  for(var t=0; t<200; t++) {
    value+=Math.random()*20-10;
    volume.data.values.push(value);
  }

  // Cosmetics:

  Chart1.legend.visible=false;
  Chart1.axes.bottom.title.text="Session";
  Chart1.axes.bottom.grid.visible=false;
  Chart1.axes.left.title.text="Quantity";
  Chart1.title.text="Volume Series";



  Chart1.draw();
}

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

Re: Highlight a volume or bar using JavaScript

Post by Marc » Fri Apr 21, 2017 4:09 pm

Hello,

Just checked and the latest inhouse, pre-release version contains a bugfix that resolves the Volume colour for this test code. For the current, publicly available version the test code will work for Bar Series, setting the fill colour for the bars but is not correctly applying to the Volume Series (Stroke Color).

We will publish the updated version at the beginning of next week for general availablility.

Apologies for the inconvenience caused.

Regards,
Marc Meumann
Steema Support

Post Reply