I am using progressBar.Circle, and this is my code that draws a single circle:
function AnimateCircle(container_id, animatePercentage,type) {
var startColor = '#FFFFFF';
var endColor = '#F18F01';
var element = document.getElementById(container_id);
var circle = new ProgressBar.Circle(element, {
color: startColor,
trailColor: '#eee',
trailWidth: 3,
duration: 1400,
easing: 'easeInOut',
strokeWidth: 3,
text: {
value: "<h4>"+type+"</h4>"+ "<h4>"+(animatePercentage )*10+ "</h1>",
className: 'progressbar__label'
},
// Set default step function for all animate calls
step: function (state, circle) {
circle.path.setAttribute('stroke', state.color);
}
});
circle.animate(animatePercentage, {
from: {
color: startColor
},
to: {
color: endColor
}
});
circle.path.style.strokeLinecap = 'round';
}
Is there a way for me to draw another circle within it? That would result in something similar to this:
Related
I am using SciChart Library for showing JS Heatmap Chart.
According to the below documentation, the zValues variable is generated using iterate function but when I try to use it in my HTML & CSS based website, Its not working.
https://demo.scichart.com/javascript-heatmap-chart
The error I am getting is:
Uncaught SyntaxError: Unexpected token ':'
I have written the following Code:
Code:
var {sciChartSurface, wasmContext} = await SciChart.SciChartSurface.create("line_chart_3");
// Add XAxis and YAxis
sciChartSurface.xAxes.add(new SciChart.NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new SciChart.NumericAxis(wasmContext));
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
var heatmapDataSeries = new SciChart.UniformHeatmapDataSeries(wasmContext,
{
xStart: 100,
xStep: 1,
yStart: 100,
yStep: 1,
zValues: initialZValues
});
// Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
// HeatmapDataSeries which correspond to gradient stops at 0..1
var heatmapSeries = new SciChart.UniformHeatmapRenderableSeries(wasmContext,
{
dataSeries: heatmapDataSeries,
colorMap: new SciChart.HeatmapColorMap(
{
minimum: 0,
maximum: 200,
gradientStops:
[
{ offset: 0, color: "#00008B" },
{ offset: 0.2, color: "#6495ED" },
{ offset: 0.4, color: "#006400" },
{ offset: 0.6, color: "#7FFF00" },
{ offset: 0.8, color: "#FFFF00" },
{ offset: 1.0, color: "#FF0000" }
]
})
});
The above code is arising error on: var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
Please help.
The following line of code is Typescript
var initialZValues: number[][] = iterate(WIDTH, HEIGHT, 200, 0, MAX_SERIES);
remove the : number[][] and it should run.
So I try to make an interactive map for one of my projects.
Here what I have done:
I want a help on how these two dots can be connected with a line.
Note: This is not google maps API
Here is the code:
<script>
$(function() {
$("#world_map").vectorMap({
map: "world_mill",
normalizeFunction: "polynomial",
hoverOpacity: .7,
hoverColor: false,
regionStyle: {
initial: {
fill: "#e3eaef"
}
},
markerStyle: {
initial: {
"r": 9,
"fill": window.theme.primary,
"fill-opacity": .95,
"stroke": "#fff",
"stroke-width": 7,
"stroke-opacity": .4
},
hover: {
"stroke": "#fff",
"fill-opacity": 1,
"stroke-width": 1.5
}
},
backgroundColor: "transparent",
zoomOnScroll: false,
markers: [{
latLng: [49.009724, 2.547778],
name: "Paris"
},
{
latLng: [37.983810, 23.727539],
name: "Athens"
}
]
});
setTimeout(function() {
$(window).trigger('resize');
}, 250)
});
</script>
I can't test this, but let me know if it works. The idea is you pass into this function the index of the markers from your markers array.
Also, you'll need to add a <canvas> element to overlay your map
<canvas id="canvas" height="400" width="500"></canvas>
function drawLine(fromIndex, toIndex) {
const canvas = document.querySelector('#canvas');
var fromMarker = $('circle [data-index="'+fromIndex+'"]').position();
var toMarker = $('circle [data-index="'+toIndex+'"]').position();
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
// draw a red line
ctx.beginPath();
ctx.moveTo(fromMarker.x, fromMarker.y);
ctx.lineTo(toMarker.x, toMarker.y);
ctx.stroke();
}
// know the indexes of the 2 markers in order of the way they're listed
drawLine(0, 1);
I got a progress bar like this one jsfiddle and I would like to change the color of the trail which is by default white.
// progressbar.js#1.0.0 version is used
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: {
color: '#aaa',
width: 1
},
to: {
color: '#333',
width: 4
},
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
#container {
margin: 20 px;
width: 200 px;
height: 200 px;
position: relative;
}
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>
The "white bar" under the purple bar in this example
Do you have an idea how can I do that ?
Thanks in advance
You can simply add trailColor property and set its value. Example: trailColor: 'silver',
Have an issue with line rendering when resizing object.
I've locked line endings positions to exact point on circles and when moving, scaling, rotating etc I have to edit lines connected to current circle.
Here is fiddle
Just try to resize circles and at some point you'll see that rendering is crashed a bit which corresponds to lines. Need a help for it, maybe rerender or something.
Or that's an issue of fabric.js
var circlesData = [{
id: 1,
x: 80,
y: 80,
r: 60
}, {
id: 2,
x: 440,
y: 190,
r: 90
}];
var connectionsData = [{
from: {id: 1, angle: 0, rdist: .8},
to: {id: 2, angle: 0, rdist: .4},
}]
var fcircles = [];
var fconnections = [];
var fcanvas;
init();
function init() {
fcanvas = new fabric.Canvas('c', {
imageSmoothingEnabled: false,
allowTouchScrolling: true,
});
fcanvas.preserveObjectStacking = true;
fcanvas.selection = false;
fcanvas.setBackgroundColor('#fff');
fcircles = circlesData.map(function(circleData) {
var circle = new fabric.Circle({
left: circleData.x,
top: circleData.y,
radius: circleData.r,
fill: 'rgba(100,100,255,0.2)',
originX: 'center',
originY: 'center'
});
circle.initialData = circleData;
circle.setControlsVisibility({
mt: false,
mb: false,
ml: false,
mr: false,
mtr: false,
});
return circle;
});
fconnections = connectionsData.map(function(connectionData) {
var line = new fabric.Line([0,0,0,0], {
strokeWidth: 6,
strokeLineCap: 'round',
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
line.from = copyJson(connectionData.from);
line.to = copyJson(connectionData.to);
line.selectable = false;
return line;
});
fcircles.concat(fconnections).forEach(function(fobj){
fcanvas.add(fobj)
});
updateConnections(fconnections);
fcanvas.renderAll();
console.log(fcanvas.getObjects())
fcanvas.on('object:moving', onObjChange);
fcanvas.on('object:scaling', onObjChange);
fcanvas.on('object:rotating', onObjChange);
}
function onObjChange(e) {
if(['line'].indexOf(e.target.type) > -1) {
return;
}
var circle = e.target;
updateConnections(fconnections.filter(function(fconnection){
return fconnection.from.id === e.target.initialData.id || fconnection.to.id === e.target.initialData.id;
}))
}
function updateConnections(fconnections) {
fconnections.forEach(function(fconnection) {
var from = fcircles.filter(function(c){return c.initialData.id === fconnection.from.id})[0];
var to = fcircles.filter(function(c){return c.initialData.id === fconnection.to.id})[0];
var fromAngle = fconnection.from.angle - from.angle / 180 * Math.PI;
var toAngle = fconnection.to.angle - from.angle / 180 * Math.PI;
debugger;
fconnection.set({
x1: from.left + fconnection.from.rdist * from.radius * Math.cos(fromAngle),
y1: from.top + fconnection.from.rdist * from.radius * Math.sin(fromAngle),
x2: to.left + fconnection.to.rdist * to.radius * Math.cos(toAngle),
y2: to.top + fconnection.to.rdist * to.radius * Math.sin(toAngle)
});
fconnection.setCoords();
});
}
function copyJson(obj) {
return JSON.parse(JSON.stringify(obj));
}
Add to your Line object property:
objectCaching: false
From fabricjs documentation:
objectCaching :Boolean When true, object is cached on an additional
canvas. default to true since 1.7.0
Ok, solved. Place the tween in the click function.
http://jsfiddle.net/2GLF4/2/
star.on('click', function() {
Spin60 = new Kinetic.Tween({
node: star,
rotationDeg: star.rotation()+60,
duration: 1,
easing: Kinetic.Easings.EaseInOut,
onFinish: function() {
console.log(star.rotation());
}
}).play();
});
I am attempting to rotate the star element with Kinetic.Tween using an on click event. The first tween works but consecutive clicks do not. Is this my error, the limitation of the function, or should i be using Kinetic.Animation instead?
http://jsfiddle.net/2GLF4/
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: stage.width() / 2,
y: stage.height() / 2,
numPoints: 17,
innerRadius: 30,
outerRadius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
});
star.on('click', function () {
Spin60.play();
});
layer.add(star);
stage.add(layer);
console.log(star.rotation());
var Spin60 = new Kinetic.Tween({
node: star,
rotation: +60,
duration: 3,
easing: Kinetic.Easings.EaseInOut,
onFinish: function () {
console.log(star.rotation());
}
});
You can use supply a callback function to the tween's .finish event.
The callback is fired when the tween is complete.
myTween.finish(callback)