ChartJS - Gradient color overlap - javascript

I have a line chart with 2 datasets, and both of them are filled with a gradient. The issue is that the gradients overlap, which changes the color of the 'bottom' dataset significantly.
Codepen: https://codepen.io/SimeriaIonut/pen/ydjdLz
My gradients and their positions:
var gradientFillPlanned = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillPlanned.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFillPlanned.addColorStop(1, "rgba(128, 182, 244, 0.0)");
var gradientFillActual = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillActual.addColorStop(0, "rgba(244, 144, 128, 0.6)");
gradientFillActual.addColorStop(1, "rgba(244, 144, 128, 0.0)");
Is there a way to only render the 'top' dataset only to the point where the bottom dataset starts? Like a css mask or something like that?
Thank you!


This is due to the transparency in rgba such as 0.6. You can try this
var gradientFillActual = ctx.createLinearGradient(250.0, 0.0, 150.0, 500.0);
gradientFillActual.addColorStop(0, "rgba(249,190,240, 1)");
gradientFillActual.addColorStop(1, "rgba(255,255,255, 1)");
CodePen

Related

Interpolate stroke width between points in Paper.js

I am using Paper.js to create some shapes. It has worked great so far. One thing where I am stuck is variable stroke width. I want to stroke width to change between different points just like the color changes in gradients. Here is some code:
var firstSegment = new Segment({
point: [100, 50],
handleOut: [80, 100]
});
var secondSegment = new Segment({
point: [300, 50],
handleIn: [-80, -100]
});
var path = new Path({
segments: [firstSegment, secondSegment],
strokeColor: 'black',
strokeWidth: 4
});
In the above example, the strokeWidth is 4 everywhere along the path. How can I create a path such that it starts with a stroke width of 1px and then gets 6px wide at the other end?

How to show only the intersecting part of a drawn shape (javascript)?

I'm try to show the entirety of the green circle, and only the intersecting point of the pink circle.
context
Anyone have any idea if this is possible in Javascript?
function setup() {
createCanvas(500,500);
}
function draw() {
noStroke();
fill(3, 252, 102);
ellipse(100, 100, 100, 100);
fill(255, 46, 206, 100);
ellipse(130,130, 100, 100);
}

Can't change css background property with jQuery

I have an element with 2 backgrounds
I want to add an image beneath the last one so I'm taking the current background and adding a base64 image
It doesn't seem to work though, the style attribute of the element never changes... If I used background-image, the picture would not stay beneath the color though
a snippet:
let src = "data:image/jpeg;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").css("background", data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>
EDIT
Weirdest thing:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
#252d47,
url("+src+")";
doesn't work, but following does:
e.style.background =
"linear-gradient(to right, rgba(37, 45, 71, 0), #252d47 20%),
url("+src+")"
I have no idea...
EDIT 2
After realising js was not gonna let me do what i wanted, i just wrapped my element in another one and attached the background to the parent

Not sure why .css() doesn't work, but if you use .attr with style, it seems to work properly:
let src = "data:image/gif;base64,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";
let data = $("#obj").css("background") + `, url("${src}")`;
$("#obj").attr("style", "background: " + data);
#obj{
background: linear-gradient(to right, rgba(37, 45, 71, 0), rgba(37, 45, 71, 1) 20%), rgba(255, 45, 71, 0.25);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="obj">Test object</div>

How can I get mouseClick to find a variable and randomize it?

Im working my way through the Khanacademy site and a a bit confused on how to make randomly sized(within certain parameters), and colored fish after mouseClick. I cant even get mouseClick working.
background(89, 216, 255);
var mouseClicked = function(drawFish){
};
^^^^^^^^^^^^^^^ What am I missing here? ^^^^^^^^^^
var drawFish = function(centerX, centerY, bodyLength, bodyHeight, bodyColor, tailWidth,
tailHeight, eyeColor,tailColor, eyeWidth, eyeHeight){
noStroke();
fill(bodyColor);
// body
ellipse(centerX, centerY, bodyLength, bodyHeight);
// tail
fill(tailColor);
triangle(centerX-bodyLength/2, centerY,
centerX-bodyLength/2-tailWidth, centerY-tailHeight,
centerX-bodyLength/2-tailWidth, centerY+tailHeight);
// eye
fill(eyeColor);
ellipse(centerX+bodyLength/3, centerY, eyeWidth, eyeHeight);
};
drawFish(296, 281, -57,52, color(245, 227, 30),-15, 60,color(13, 12, 12),color(66, 58, 58),4,4); // yellowFish
drawFish(290, 80, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
drawFish(146,233, 218, 141, color(62, 110, 67), 30, 10, color(245, 240, 245), color(0, 51, 255),12,48); // greenFish
drawFish(233, 370, 322, 36, color(133, 34, 199), 61,15, color(255, 0, 0), color(34, 255, 0),67,20); // purpFish
Any other pointers or recommendations would be greatly appreciated.
Thanks guys!

Cool fishes! I'm learning Processing too. I ran your code and came up with this function for having random fishes appear when you click.
void mouseReleased() {
var c1 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c2 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c3 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var s1 = random(10,100)
var s2 = random(10,100)
var s3 = random(10,100)
var s4 = random(10,100)
var s5 = random(5,s1)
var s6 = random(5,s2)
drawFish(mouseX, mouseY, s1, s2, c2, s3,s4, c2, c3,s5,s6); //randFish
}
To make an animation, I think you will want to use the draw() function, use variables for the x,y locations and redraw the background each time. This example has the red fish follow the mouse around.
void draw(){
background(89, 216, 255);
drawFish(mouseX, mouseY, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
}
I hope your aquarium comes out really great!

How can I rotate a pie chart in charts.js?

It looks like a pie in charts.js is drawn by taking a vertical radius on the top half of the circle, and then moving clockwise from there. This works great most of the time, but for a pie with only 2 categories, it would be nice if it could be rotated so that the slice is centered, like this:
The rotation is calculated by taking the percentage of 360 and dividing by 2. (.14*360)/2 = 25.2 degrees left, so if I could just apply
transform: rotate(-25.2deg);
to the circle I would be good.
Since charts.js puts this on a canvas (as opposed to <svg>) I don't know how to apply any transformations to this. Not sure if relevant, but here is my code for the chart:
HTML
<canvas id=canvas style='width:300px;height:300px;'></canvas>
JS
openRate = [
{
value: 488,
color: "#FF9030",
highlight: "rgba(255, 144, 48, 0.44)",
},
{
value: 3475,
color: "#008DB7",
highlight: "rgba(0, 141, 183, 0.82)"
}
];
var ctx=document.getElementById('canvas').getContext("2d");
var chart=new Chart(ctx).Pie(openRate);
And a fiddle:
http://jsfiddle.net/msy6kf3a/

You Can use the
Rotation Options in chartjs
I'm using "Version: 2.1.6"
var options = {
rotation: (-0.5 * Math.PI) - (25/180 * Math.PI)
}
var Chart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});
Updated fiddle

You can rotate using CSS3: JSFIDDLE DEMO
#canvas{
width:300px;
height:300px;
-ms-transform: rotate(-25.2deg); /* IE 9 */
-webkit-transform: rotate(-25.2deg); /* Chrome, Safari, Opera */
transform: rotate(-25.2deg);
}

Categories

Resources