Highlight a volume or bar using JavaScript

TeeChart for Javascript for the HTML5 Canvas

Highlight a volume or bar using JavaScript

Postby 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 399 times
myTeeChart219
Newbie
Newbie
 
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Highlight a volume or bar using JavaScript

Postby 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 ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8032
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Re: Highlight a volume or bar using JavaScript

Postby 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.
myTeeChart219
Newbie
Newbie
 
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Highlight a volume or bar using JavaScript

Postby 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 381 times
Best Regards,

ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image ImagePlease read our Bug Fixing Policy
Yeray
Site Admin
Site Admin
 
Posts: 8032
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Re: Highlight a volume or bar using JavaScript

Postby 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();
}
myTeeChart219
Newbie
Newbie
 
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Highlight a volume or bar using JavaScript

Postby 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
Marc
Site Admin
Site Admin
 
Posts: 799
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona


Return to Javascript / HTML5

Who is online

Users browsing this forum: No registered users and 1 guest

cron