Page 1 of 1

Highlight a volume or bar using JavaScript

Posted: Wed Apr 19, 2017 1:48 pm
by 17780715
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.

Re: Highlight a volume or bar using JavaScript

Posted: Thu Apr 20, 2017 11:41 am
by yeray
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";
            }

Re: Highlight a volume or bar using JavaScript

Posted: Fri Apr 21, 2017 8:16 am
by 17780715
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.

Re: Highlight a volume or bar using JavaScript

Posted: Fri Apr 21, 2017 10:55 am
by yeray
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 36225 times

Re: Highlight a volume or bar using JavaScript

Posted: Fri Apr 21, 2017 11:22 am
by 17780715
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();
}

Re: Highlight a volume or bar using JavaScript

Posted: Fri Apr 21, 2017 4:09 pm
by Marc
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