I want a dynamic color on my chart. I use a imported css file with some identity colors.
Like this:
:root
{
--brand-color: {{$color}};
}
I am using the AmChart World chart as visualisation but the a4mchart.color() does not like variables. How do I make sure that it does take in variables? here my code:
let style = getComputedStyle(document.body);
let brandColor = style.getPropertyValue('--brand-color');
const chartWorld = am4core.create(this.$refs.chartdiv, am4maps.MapChart);
polygonSeries.fill = am4core.color(brandColor);
And this is what it returns:
Color {_value: {
alpha: 1
alternative: Color
darkColor: Color
hex: "#000000"
lightColor: Color
rgb: Object
rgba: "rgb(0,0,0)"
_value: {r: 0, g: 0, b: 0, a: 1}
__proto__: Object…}}
It didn't change anything but the BrandColor does return the right string when I log it: "#A4A2A3"
Please help
From my testing, getPropertyValue returns everything after the property name, including any whitespace, which causes the color to not get parsed correctly by AmCharts; your log is likely returning " #A4A2A3". You'll want to call trim on the string beforehand:
polygonSeries.mapPolygons.template.fill = am4core.color(brandColor.trim());
Note that you need to set the fill on the series' mapPolygon template for it to apply to your map regions.
Related
I'm building a data dashboard using DC.js and was wondering if it was possible to change the color of the slices in a pie chart dynamically based on the value in the field it is referring to.
Basically I've built a pie chart aggregating the costume colors of different superheroes and I'd love to be able to color each slice with the color it is referring to - so the slice for 'Black' is colored black, the slice for 'Green' is colored green and so forth.
I'm fairly new to DC.js so accept that it may not be possible, but wanted to throw it out there and see if it could be done!
I tried including an array within .ordinalColors but couldn't figure out if there was a way to pull in the data from the field dynamically. I'm assuming that I'd have to change the data in the .csv file to a string that could be recognised as a color reference, but not sure how to go about doing that.
function show_costume_color(ndx) {
var costume_color_dim = ndx.dimension(dc.pluck('Costume Colour'));
var costume_color = costume_color_dim.group();
dc.pieChart('#costume-color')
.width(500)
.height(500)
.radius(500)
.innerRadius(100)
.slicesCap([7])
.transitionDuration(1500)
.dimension(costume_color_dim)
.group(costume_color);
}
CSV data comes in the below format
ID,name,Gender,Eye color,Race,Hair color,Publisher,Alignment,Superpower,Superpower Strength Level,Costume
Colour
0,A-Bomb,Male,Yellow,Human,No Hair,Marvel Comics,Good,Superhuman
Strength,10,None
1,Abin Sur,Male,Blue,Ungaran,No Hair,DC Comics,Good,Cosmic Power,40,Green
Yes, of course. Everything is specified dynamically in dc.js.
Assuming you are using dc.js v3 (and d3 v4+) the way I would suggest doing this is by creating another CSV file with the color assignments you want, something like
Name, RGB
Red, #ff1122
Blue, #1133ff
...
Then you can load the second file in parallel with your data using Promise.all(),
Promise.all([d3.csv('data.csv'), d3.csv('colors.csv')])
.then(function(data, colors) {
// rest of code will go here
});
ordinalColors is a nice convenience method, but if you want complete control, and to understand exactly what's going on, it's better to supply your own color scale. In this case, we want an ordinal scale, which maps specific discrete values to specific colors.
Under the covers, dc.js always deals with colors by using the colorAccessor to fetch a value for the the item, and then mapping this value using a color scale. You can think of the value that the accessor returns as a "color name", which is pretty convenient because it's exactly what you want here.
So you can populate a d3.scaleOrdinal with the domain of color names and the range of RGB colors:
var colorScale = d3.scaleOrdinal()
.domain(colors.map(row => row.Name))
.range(colors.map(row => row.RGB));
Now supply it to your chart using .colors():
chart.colors(colorScale);
What's really handy about this approach is that you can supply the same color scale for multiple charts, in order to make sure they are consistent. This is something that you don't get automatically in dc.js, because charts don't know very much about each other.
So, I managed to figure it out through an extensive period of trial and error and now I'm off and away with my dashboard. Thanks for your help, Gordon - it really made the difference! It needs a bit of tidying up but my working test code is below.
// Bring in data from both csv files
Promise.all([d3.csv("../data/heroes_information.csv"),
d3.csv("../data/costume_colors.csv")])
.then(function(data) {
// Tidy up data before use
data.forEach(function(d) {
d.Height = +d.Height;
d.Weight = +d.Weight;
d.Strength = +d.Strength;
});
// Bring in colorScale to dynamically color pie chart slices
var ndxcol = crossfilter(data[1]);
var colorScale = d3.scaleOrdinal()
.domain(data[1].map(row => row.Name))
.range(data[1].map(row => row.RGB));
// Bring in superhero data
var ndx = crossfilter(data[0]);
// Define chart types
var publisherSelector = dc.selectMenu('#publisher-selector')
var genderChart = dc.rowChart('#gender-balance');
// Define chart dimensions
var publisherChoice = ndx.dimension(dc.pluck('Publisher'));
var genderBalance = ndx.dimension(dc.pluck('Gender'));
// Define chart groups
var genderNumber = genderBalance.group();
var publisherNumber = publisherChoice.group();
// Draw charts
publisherSelector
.dimension(publisherChoice)
.group(publisherNumber);
genderChart
.width(500)
.height(200)
.margins({ top: 30, right: 30, bottom: 30, left: 30 })
.dimension(genderBalance)
.group(genderNumber)
.gap(6)
.colors(colorScale)
.transitionDuration(500)
.x(d3.scaleOrdinal())
.elasticX(true);
dc.renderAll();
});
I am trying to set the renderer.setClearColor() to a new HSL color using a variable. It works if I define the variable directly, but when I try to change it by using another variable, I get this error:
THREE.Color: Unknown color hsl(color1[0], 96%, 95%)
here is the code I am using to try and just change the hue:
backgroundColor = new THREE.Color("hsl(0, 96%, 95%)");
function getColors(){
color1 = [];
color1h = (data[1] / 359);
color1s = (0.90);
color1l = (0.65);
color1.push(color1h, color1s, color1l);
backgroundColor = new THREE.Color("hsl(color1[0], 96%, 95%)");
}
...
renderer.setClearColor(backgroundColor);
Any advice would be appreciated!
Here is one way to set and change the background color using HSL parameters:
var color = new THREE.Color(); // create once and reuse it
Then, to set or change the clear color
color.setHSL( 0.5, 0.90, 0.95 );
renderer.setClearColor( color );
There is also another pattern that is supported:
scene.background = new THREE.Color().setHSL( 0.5, 0.90, 0.95 );
And to change it:
scene.background.setHSL( 0.9, 0.90, 0.95 );
three.js r.92
I think the actual bug in the OP's code is that it's passing a variable as a string. Using template literal it should be:
backgroundColor = new THREE.Color(`hsl(${color1[0]}%, 96%, 95%)`);
I had this same issue, but it was caused by the hsl values being floats instead of integers. In other words I was passing something like hsl(45.356456%, 96%, 95%). I was able to fix it by just rounding the number to the nearest integer.
backgroundColor = new THREE.Color(`hsl(${Math.round(color1[0])}%, 96%, 95%)`);
I am using nvd3.js discrete bar http://nvd3.org/ghpages/discreteBar.html
I am inspecting the code and seen that the color is been derived inline
style="fill: #ffbb78; stroke: #ffbb78;"
I also track on the discreteBarChart function
color = nv.utils.getColor()
What I don't realizing and asking is what does color takes as a parameter ?
It requires and array of colors => ['#aec7e8', '#7b94b5', '#486192'] , something like this would work.
var chart = nv.models.discreteBarChart()
....
....
.color(['#aec7e8', '#7b94b5', '#486192']);
NVD3 inherits the defaults colurs set by d3 here
Hope it helps.
If you want to use one single colour, then it can be returned from the options object like below :
var options={
....
colour:function(){
return '#ff0000';
},
...
..
}
Consider:
value1 = 5;
v1_color = #ff0000;
value2 = 4;
v2_color = #00ff00;
value3 = 3;
v3_color = #0000ff;
var r = Raphael("holder");
pie = r.piechart(320,320,250,{value1,value2,value3},{colors: [v1_color, v2_color,v3_color]});
This will produce a pie chart where the upper slice is red, the slice on the bottom right is green, and the final slice is blue. However, if the values were changed like this:
value1 = 4;
value2 = 3;
value3 = 5;
the chart would look exactly the same, but the colors wouldn't represent the proper value anymore. In the source code, lines 99-101 show the values being sorted, but nothing else.
I want a color to correspond to a certain variable, no matter how large it is, rather than the largest variable getting the first color listed in the options.
In the part of the code where it draws the slices (line 133), it refers to opts.matchColors, but I can't find any documentation about how to set that when calling the function.
Any ideas how to achieve this?
Unfortunately opts.matchColors is not documented at all because it is exactly what you need.
opts.matchColors forces it to match the order of the colors array with the order of the values array. When the values are reordered by size, the colors will be applied to the wedge with their original values.
matchColors defaults to false, so you will need to explicitly set it in the options array like this:
var pie = r.piechart(320, 320, // center
250, // radius
[
value1,
value2,
value3
],
{
colors : [
v1_color,
v2_color,
v3_color
],
matchColors : true
});
i can change custom color Rectangle with something like : "#A125AA" in xaml.
But i don't know where to find code change custom color i have
i just know code for color arealy have
this.gridgcolor.Background = new SolidColorBrush(Colors.Blue);
you can set the color through RGB. This isn't done in hex like you're doing in your xaml.
Color color = new Color() { R = 255, G = 255, B = 255 };
Brush brush= new SolidColorBrush(color);
the hex values you have in your example #A125AA are also RGB
R = A1,
G = 25,
B = AA
You could convert these values with a helper method so you can add them to your Color object.
If you want to use the names, here is also a list of a lot of RGB codes matched to their names
You can use the hexadecimal number directly in your XAML, as the following shows :-
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0"
Background="#A125AA"></Grid>