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 (22.17 KiB) Viewed 51842 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