I am using the jquery circle progress library. I need to have the full progress represent as 100%, however the actual value placed on is 150%.
I need to change the colour of that extra 50%.
Here is the HTML:
<div id="circle"></div>
Here is the JS:
$('#circle').circleProgress({
value: 1.50,
size: 100,
fill: { color: "#ff1e41" }
});
The following is a fiddle: https://jsfiddle.net/2pekq9zw/
How can I change the colour of that extra 50% ?
This is not exactly what you want (because you can't use number > 1 in the value), but the final view is what you are looking for:
https://jsfiddle.net/vz9dr78a/2/
I created two circles that overlap each other, the first is 100% and the second is 50%.
Once the animation of the first circle is done - the animation of the second circle will start:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).on('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
here is a snippet:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).one('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
.circle-container {
position: relative;
}
.circle-container .circle {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div class="circle-container">
<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
</div>
Basically the same as the other attempts, though I tried to eliminate the lagging feel of the second circle starting so it feels more natural.
// js
$('#circle1').circleProgress({
value: 1,
size: 100,
animation: { duration: 1200, easing: "linear" },
fill: { color: "#ff1e41" }
});
$('#circle1').on('circle-animation-end', () => {
$('#circle2').circleProgress({
value: .50,
animation: { duration: 1200, easing: "linear"},
size: 100,
fill: { color: "#00FF00" },
emptyFill: 'rgba(0, 0, 0, 0)'
});
})
// css
#circle1 {
position: absolute;
}
#circle2 {
position: absolute;
}
// html
<div id="circle1"></div>
<div id="circle2"></div>
https://jsfiddle.net/2pekq9zw/10/
If you notice, my circles blend together a bit nicer than the other answers
By creating a second, smaller circle overlayed on the first you could show the extra, for example:
$('#circle').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
});
$('#circle2').circleProgress({
value: 0.50,
size: 94,
fill: { color: "darkred" }
});
#circle { position:absolute; top:0;left:0}
#circle2 { position:absolute;top: 3px; left: 3px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div id="circle"></div>
<div id="circle2"></div>
Related
I want to have two Plotly charts appear next to one another on the same line. Presently one chart appears above the other.
This is my JavaScript code for the two graphs:
var barData = [
{
x: x_names,
y: y_data,
text: y_names,
marker: { color: 'rgba(202,210,211,.90)' },
type: 'bar',
orientation: 'v',
width: 0.8,
options: { offset: true }
}];
var barLayout = {
title: "<b>Arrears Balance Managed by CSM</b>",
showlegend: false,
xaxis: { tickangle: 45, zeroline: true },
yaxis: { gridwidth: 1, zeroline: true },
height: 400,
width: 500,
};
Plotly.newPlot('bar', barData, barLayout);
var donutData = [{
labels: y1_names,
values: x1_data,
hole: .4,
type: "pie"
}];
var donutLayout = {
height: 400,
width: 500,
margin: {"t": 0, "b": 0, "l": 0, "r": 0},
showlegend: true
}
Plotly.newPlot('pie', donutData, donutLayout);
The following is from my html document:
<h3 class='display-4'>Graphs</h3>
<div class="col-md-6">
<div id="bar">
</div>
<div class="col-md-6">
<div id="pie">
</div>
Is there a way to get the two charts to line up next to one another?
Thanks in advance for your help.
If you are using a modern browser with your web page. I suggest you use the following CSS: display: flex;. Here is a link to a good guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can also see the example I made in the code snippet:
.graph-container {
display: flex;
}
#bar {
flex: 1;
width: 50px;
height: 50px;
background-color: #FF0000;
}
#pie {
flex: 1;
width: 50px;
height: 50px;
background-color: #0000FF;
}
<h3 class='display-4'>Graphs</h3>
<div class='graph-container'>
<div id="bar"></div>
<div id="pie"></div>
</div>
I want same color of line and area of a time series chart in highcharts. I am attaching the link of jsfiddle
here the shaded area and line color of chart is blue but i want with this hex code #70843A. can anyone help me? https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
Highcharts.getJSON(
"https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json",
function (data) {
Highcharts.chart("container", {
chart: {
zoomType: "x",
},
title: {
text: "USD to EUR exchange rate over time",
},
subtitle: {
text:
document.ontouchstart === undefined
? "Click and drag in the plot area to zoom in"
: "Pinch the chart to zoom in",
},
xAxis: {
type: "datetime",
},
yAxis: {
title: {
text: "Exchange rate",
},
},
legend: {
enabled: false,
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
},
marker: {
radius: 2,
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1,
},
},
threshold: null,
},
},
series: [
{
type: "area",
name: "USD to EUR",
data: data,
},
],
});
}
);
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in and
inspect the data.
</p>
</figure>
If I understand the question right, you don't want that gradient.
Highcharts offers it, and its in your working example, specifically
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
}
This can be updated, towards the end with the setOpacity..
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(1).get('rgba')]
As it says, you just set the opacity to 1. Full block colour.
If you just want to change the colour itself, you can just set the fill colour to a CSS colour..
fillColor: '#FF0000',
Ugly Red JSfiddle
Documentation is here : Highcharts Documentation
And if you want the line colour etc set to the HEX you metnioned.
You can set lineColor in the marker ..
Green LineColour
The documentation is very well laid out.
How can i make a transparent rectangle selectable only when i click on the stroke? I tried two different approach as you can see from the snippet below, the object on the left is a rectangle with a transparent background, the object on the right is a group object with multiple lines. I want to know how to be able to select the element only when i click on the stroke, with both objects if you click on the inner transparent area the object becomes selected.
var canvas = new fabric.Canvas('a');
canvas.add(new fabric.Rect({
left: 10,
top: 20,
height: 160,
width: 80,
fill: 'transparent',
stroke: 'red'
}));
var rectLine1 = new fabric.Line([0, 0, 80, 0], {
stroke: 'red',
left: 100,
top: 20
});
var rectLine2 = new fabric.Line([0, 160, 0, 0], {
stroke: 'red',
left: 100,
top: 20
});
var rectLine3 = new fabric.Line([0, 160, 0, 0], {
stroke: 'red',
left: 180,
top: 20
});
let rectLine4 = new fabric.Line([0, 0, 80, 0], {
stroke: 'red',
left: 100,
top: 180
});
var group = new fabric.Group([rectLine1, rectLine2, rectLine3, rectLine4], {
left: 110,
top: 20
})
canvas.add(group)
canvas.renderAll();
.c {
border: 2px solid black;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>
I found that setting perPixelTargetFind: true solves the problem, you can also set a tolerance on the canvas targetFindTolerance: 10 to be able to select objects with thin strokes. I'll paste the working code below in case anyone needs it.
var canvas = new fabric.Canvas('a', {
targetFindTolerance: 10
});
canvas.add(new fabric.Rect({
left: 10,
top: 20,
height: 160,
width: 80,
fill: 'transparent',
stroke: 'red',
perPixelTargetFind: true,
}));
canvas.renderAll();
.c {
border: 2px solid black;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>
At the left and right side of the white container, you can see the graph isn't touching entirely on either side, there's a small amount of padding, and I cannot remove it at all.
I tried setting the layout.padding.left to a negative value, but that had no affect, however positive value does move the chart inward, same applies for top and bottom padding.
The only solution that I came up with was adding another div inside the container, and making the canvas width bigger and then using a left negative margin position it, making the line touch the .container corners. Like this jsfiddle but it's only a temporary solution.
JSFIDDLE
var options = {
type: 'line',
data: {
labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''],
datasets: [{
data: [80, 100, 100, 115, 119, 105, 100, 90],
pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0],
pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0],
borderColor: '#3ca2e0',
backgroundColor: 'rgba(60, 162, 224, .1)',
lineTension: 0.6,
// points
pointBackgroundColor: '#3ca2e0',
pointHoverBackgroundColor: '#3ca2e0',
pointBorderColor: '#ffffff',
pointHoverBorderColor: '#ffffff',
pointBorderWidth: 2.5,
pointHitRadius: 10,
radius: 5,
borderWidth: 2.5
}],
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
},
gridLines: {
drawBorder: false,
display: false,
drawTicks: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks:{
fontColor: '#858585'
}
}]
},
layout: {
padding: {
top: 10,
}
}
},
}
var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, options);
body { background-color: #1c2128 }
.container {
width: 500px;
background-color: #ffffff;
margin: 20px auto;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<div class="container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</body>
One solution would be to use a second container.
The canvas seems to resize based on its parent width.
<body>
<div class="container">
<div class="canvas-container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
body {
background-color: #1c2128;
}
.container {
width: 490px;
overflow: hidden;
margin: 20px auto;
}
.canvas-container {
width: 500px;
background-color: #ffffff;
height: 200px;
margin-left: -5px;
}
I have something like browser game.
On click user throw dices. Dices fall through shadow, but there are different block and dice has z-index : 3 and shadow z-index : 2;
This problem only on iOS.
For animation use library anime.js.
Maybe someone had the same problem.
Try to add screenshot for show the problem:
.dice {
width: 144px;
height: 144px;
left: -200px;
top: -450px;
z-index: 3;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translateZ(-72px) rotateX(313deg) rotateY(226deg) scale3d(0.35, 0.35, 0.35);
z-index: 3;
.cube_face {
width: 144px;
height: 143px;
border: 1px solid #f5f3e6;
border-radius: 15px;
}
}
<div class="diceShadow"></div>
<div class="dice">
<div class="cube_face cube_face_front"></div>
<div class="cube_face cube_face_back big-shadow"></div>
<div class="cube_face cube_face_right"></div>
<div class="cube_face cube_face_left shadow"></div>
<div class="cube_face cube_face_top"></div>
<div class="cube_face cube_face_bottom"></div>
</div>
anime({
targets: dices[count],
left: [{
value: '-200px',
duration: 0
},
{
value: dicePositions[count].x - 56,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].x + 15,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].x + 30,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].x + 84,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
top: [{
value: '-850px',
duration: 0
},
{
value: dicePositions[count].y - 30,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].y - 95,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].y + 10,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].y + 50,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
translateZ: [{
value: '-72px',
duration: 0
}, ],
rotateX: [{
value: dicePositions[count].rotateX + 132,
duration: 0
},
{
value: dicePositions[count].rotateX + 32,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateX,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutCubic',
},
],
rotateY: [{
value: dicePositions[count].rotateY - 100,
duration: 0
},
{
value: dicePositions[count].rotateY - 39,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateY,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutQuad',
},
],
rotateZ: [{
value: dicePositions[count].rotateZ,
duration: 0
}, ],
scaleX: [{
value: 0.35,
duration: 0
}, ],
scaleY: [{
value: 0.35,
duration: 0
}, ],
scaleZ: [{
value: 0.35,
duration: 0
}, ],
});
Problem solved! I had DOM elements that were outside parent`s block. When I positioned them to parent block area and add opacity, to hide them - my dices fell into place.
Example:
were :
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: -100%;
top: -100%;
}
&[data-show='true'] {
left: 9%;
top: 14%;
}
}
now:
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: 0%;
top: 17px;
opacity: 0;
}
&[data-show='true'] {
left: 9%;
top: 14%;
opacity: 1;
}
}