I managed to update easy pie chart, but I don't know how to display the percentage and update it, for example from 1% to 25%, number by number, as the chart updates. Any help?
This is the block of code where I am updating my chart:
var chart = new EasyPieChart(existing, {
lineWidth: '6',
barColor: '#fff',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: false,
});
chart.update(25);
You could use easy-pie-chart's onStep callback function, which will be called on every step to update the number somewhere on the page.
Also, you probably want to round the number using Math.round
var element = document.querySelector('.chart');
var chart = new EasyPieChart(element, {
lineWidth: '6',
barColor: '#000',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: true,
onStep: function(from, to, currentValue) {
// Inside the callback, 'this.el' refers to
// the element that EasyPieChart was created with
// - `.chart`
this.el.querySelector('.number').innerText = `${Math.round(currentValue)}%`;
},
});
chart.update(25);
.chart {
display: inline-block;
position: relative;
}
.number {
font-size: 1.8rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="chart">
<span class="number"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/easypiechart.min.js"></script>
Related
I'm using https://www.chartjs.org/. I want to make a chart like a picture.
enter image description here.
but created one is this. enter image description here
It is Sharing X-Axis but has Different Y-Axis by chart type. Left Y-axis is for bar, but the right one is for scatter.
I want the scatter values to be positioned according to each bar chart categories.
current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1a1a1a;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.8.0)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script>
const labels = ["label1", "label2", "label3", "label4", "label5"];
// setup
const data = {
labels: labels,
datasets: [
{
type: "bar",
label: "bar 1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack1",
},
{
type: "bar",
label: "bar 2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack2",
},
{
type: "scatter",
label: "scatter1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack1",
},
{
type: "scatter",
label: "scatter2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack2",
},
],
};
// config
const config = {
data,
options: {
scales: {
x: {
grouped: true,
},
leftY: {
grouped: true,
position: "left",
beginAtZero: true,
},
rightY: {
type: "linear",
position: "right",
beginAtZero: true,
stacked: true,
grouped: true,
},
},
},
};
// render init block
const myChart = new Chart(document.getElementById("myChart"), config);
</script>
</body>
</html>
I am trying to put another pie chart from chart.js, so that there can be two pie charts with different values to be visualized. I tried copying the script two times one for the first one another for the second one but it did not appear how can there be no pie-chart in the second card
$(document).ready(function() {
var ctx = $("#chart-line");
var myLineChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Spring", "Summer", "Fall", "Winter"],
datasets: [{
data: [1200, 1700, 800, 200],
backgroundColor: ["rgba(255, 0, 0, 0.5)", "rgba(100, 255, 0, 0.5)", "rgba(200, 50, 255, 0.5)", "rgba(0, 100, 255, 0.5)"]
}]
},
options: {
title: {
display: true,
text: 'Weather'
}
}
});
});
$(document).ready(function() {
var ctx = $("#chart-line");
var myLineChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Spring", "Summer", "Fall", "Winter"],
datasets: [{
data: [1200, 1700, 800, 200],
backgroundColor: ["rgba(255, 0, 0, 0.5)", "rgba(100, 255, 0, 0.5)", "rgba(200, 50, 255, 0.5)", "rgba(0, 100, 255, 0.5)"]
}]
},
options: {
title: {
display: true,
text: 'Weather'
}
}
});
});
and here the html code `
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">Pie chart</div>
<div class="card-body" style="height: 400px">
<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
</div>
<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
</div>
</div>
<canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
</div>
</div>
</div>
`
assuming you are trying to show the same chart twice. We can separate out the chart codes into a standalone function.
$(document).ready(function() {
renderChart($("#chart-line"));
renderChart($("#chart-line2"));
})
function renderChart(ctx) {
var myLineChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Spring", "Summer", "Fall", "Winter"],
datasets: [{
data: [1200, 1700, 800, 200],
backgroundColor: ["rgba(255, 0, 0, 0.5)", "rgba(100, 255, 0, 0.5)", "rgba(200, 50, 255, 0.5)", "rgba(0, 100, 255, 0.5)"]
}]
},
options: {
title: {
display: true,
text: 'Weather'
}
}
});
};
Then in your html, add an additional canvas below with different id.
<canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
<canvas id="chart-line2" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
I have a project with some rects and I need to put text inside them. Is there a Konva class that does this?
I have tried using Konva.group (), label ...
This was my last attempt, at the beginning the text stands as it should but when moving the Rect the position is not updated.
var rect = new Konva.Rect({
x: 20,
y: 60,
stroke: '#123456',
strokeWidth: 5,
fill: '#ddd',
width: 600,
height: 450,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10,
draggable: true,
})
var complexText = new Konva.Text({
x: ((rect.attrs.width + rect.attrs.x) - 300)/2 ,
y: ((rect.attrs.height + rect.attrs.y))/2,
text:
"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
height:300,
align: 'center',
draggable: true,
});
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var rectangleLayer = new Konva.Layer();
function spawnRectangle(angle){
var rectangle = new Konva.Group({
x: 25,
y: 25,
width: 130,
height: 25,
rotation: angle,
draggable: true,
});
rectangle.add(new Konva.Rect({
width: 130,
height: 25,
fill: 'lightblue'
}));
rectangle.add(new Konva.Text({
text:'123',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#000',
width: 130,
padding: 5,
align: 'center'
}));
rectangleLayer.add(rectangle);
stage.add(rectangleLayer);
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D3D3D3;
background-size: cover;
}
#desc {
position : absolute;
top: 5px;
left: 5px;
}
<script src="https://unpkg.com/konva#4.0.18/konva.min.js"></script>
<body>
<div id="container"></div>
<div id="desc">
<button onclick="spawnRectangle(0)">spawn rectangle</button>
<button onclick="spawnRectangle(90)">spawn rotated rectangle</button>
</div>
</body>
Your options are:
Use Konva.Label
Create a draggable group with rectangle and text inside
Create one custom shape. Draw rectangle and text inside sceneFunc
I'm a novice in jQuery and I'm using jquery-circle-progress plugin by kottenator. I've four circles and I want to animate its bar and percentage text when it's area visible on the screen. Like most of websites make the effect.
Could anyone please help me to make that effect with a little explanation? Thanks in advance, Dear. My fiddle
HTML:
<section class="firstDiv"></section>
<section class="secondDiv"></section>
<div class="thirdDiv">
<div id="circle1">
<span class="rate">85%</span>
</div>
<div id="circle2">
<span class="rate">90%</span>
</div>
<div id="circle3">
<span class="rate">80%</span>
</div>
<div id="circle4">
<span class="rate">70%</span>
</div>
</div>
CSS:
section{ height: 700px; overflow: hidden;}
.firstDiv{ background: blue;}
.secondDiv{ background: yellow;}
.thirdDiv div{
float: left;
width: 25%;
overflow: hidden;
margin: 50px 0;
position: relative;
}
.rate{
position: absolute;
top: 40%;
left: 25%;
}
JS:
$('#circle1').circleProgress({
value: 0.85,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$('#circle2').circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$('#circle3').circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$('#circle4').circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
My fiddle
Ok, It was a pretty good experience. I've solved the problem by using jquery.appear plugin. I've insert my full code into this portion of code:
var el = $('.circle'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
el.circleProgress({ value: 0.7 });
inited = true;
}
});
It's a nice plugin, which execute the code when the div(in my case .thirdDiv) on screen. My full JS code is below:
var el = $('.thirdDiv'),
inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if (!inited) {
$("#circle1").circleProgress({
value: 0.7,
size: 100,
fill: {
gradient: [ "#FD0000" , "#FD7300", "#FDBD00"]
}
});
$("#circle2").circleProgress({
value: 0.90,
size: 100,
fill: {
gradient: ["#00B050", "#00CA00", "#9EEC00"]
}
});
$("#circle3").circleProgress({
value: 0.80,
size: 100,
fill: {
gradient: ["#FDFD00", "#FDE700", "#CDF500"]
}
});
$("#circle4").circleProgress({
value: 0.70,
size: 100,
fill: {
gradient: ["#123FAA", "#3914AE", "#0B63A3"]
}
});
inited = true;
}
});
Thanks everybody :)
I've made a pie chart using Chart.js, and I'd like to detect when a segment is hovered over. I've found plenty of documentation regarding manipulating the tooltips that appear when hovering over segments, but nothing regarding doing something else when a tooltip would appear. Is this possible?
I know this has already been given an accepted answer, and im not sure if this does satisfy your use case but Chart js released an update (maybe a month ago or so) that allowed for custom tooltips. This allows for a custom function to run when a tooltip would normally have been drawn. They have an example in the samples section of git hub
in short you define a custom function
Chart.defaults.global.customTooltips = function(tooltip){//do what you want}
here is the example they give in the samples with an extra bit of text added to an html tooltip. The only annoying thing I see is that don't provide the segment/point/bar that triggered this tooltip which would be really handy as then you could do some thing to the graph knowing this information but you are given the tooltip data which means you can do something with that instead.
Chart.defaults.global.customTooltips = function (tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text+ " anythign custom you want");
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>
The way I'm doing it is slightly more simple:
assuming you already have some code defining the canvas like
canvas = document.getElementById("chart"); and your pie chart is
window.myPie. You can use the onmousemove javascript event, or jQuery hover
canvas.onmousemove = function(evt) {
var el = window.myPie.getElementsAtEvent(evt);
//do something with the el object to display other information
//elsewhere on the page
}
In my case highlight a table row based on the value of el[0]._index
No...
There's nothing in the ChartJS API to override or extend the tooltip,
But, a workaround...
You can modify the draw method of the Chart.Tooltip class. This would allow you to "do something else" when the tooltip would normally be rendered by ChartJS.
The draw method you want to tie into starts at line 1351 of the source here:
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
For v2.0 version:
Chart.defaults.global.hover.onHover = function(x) {
if(x[0]) {
var index = x[0]._index;
// Place here your code
}
};
UPDATE 2020 : For Chartjs 3.5
Here is a quick fix that I used with Chartjs 3.5 to trigger events on hover over Doughnut or Pie parts. It relies on using the existing onHover option :
onHover : (event, activeElements) => {
if (activeElements.length > 0) {
// get active chart element
let elt = activeElements[0];
// retrieve element label
let lbl = elt._model.label;
// Get element value
let elt_index = elt._chart.tooltip._data.labels.indexOf(lbl);
let val = elt._chart.tooltip._data.datasets[0].data[elt_index];
// trigger your event here :
// ex for vuejs : this.$emit('element-hovered', { label : lbl, value : val });
}
else {
// No active elements
}
}
Working fine so far :)
If found a small trick using customTooltip, too. I searched for a solution to get an Event if the user moves with the mouse over a Value and a Tooltip is shown. Mainly i liked to present in a different frame some detail informations besides the raw Plot values.
var options = {
customTooltips: function (tooltip)
{
if (!tooltip) return;
tooltip.custom = false;
tooltip.draw();
OnEntrySelected(tooltip.title);
tooltip.custom = this;
}
}
The custom tooltip is drawn using tooltip.draw(), but this calls the custom method. I set it to false to avoid a recursive loop, call the default behavior and take the data i need for my callback (OnEntrySelected) which is in this case the string of the x-Axis label. This event is triggered whenever the tooltip is shown.