Develop Reference

ChartJS Data-label cropped

I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?
For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)
Chart.register(ChartDataLabels); // Import the data-labels plugin
graphItop4 = new Chart(document.getElementById("mois"), {
type: "line",
data: {
labels: [1, 2],
datasets: [{
label: "1",
fill: true,
data: [0, 1234],
backgroundColor: "rgba(0, 0, 255, 0.2)",
borderColor: "blue",
borderWidth: 1,
datalabels: {
align: 'start',
}
},
]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor.replace("0.2", "0.5");
},
borderRadius: 100,
color: 'white',
font: {
weight: 'bold',
size: '15'
},
formatter: Math.round,
padding: 5,
}
},
},
})
body {
font-family: "Arial", Helvetica, sans-serif;
display: flex;
margin: 18px;
padding: 0;
background-color: #ccc;
}
.case {
position: relative;
padding: 10px;
text-align: center;
border-radius: 10px;
min-height: 240px;
background-color: #fff;
}
h2 {
font-size: 1.4em;
margin: 0;
padding: 10px 20px;
border-radius: 10px;
background-color: lightgrey;
}
<div class="case">
<h2>Mois</h2>
<div>
<canvas height="270" id="mois" width="600"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>

Unable to update datatable in Highcharts

Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.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="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.

This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>

Easy Pie Charts - Why there's no numbers running animation

I have an issue with Rendro Easy Pie Chart version 2.1.6.
I've used the easy-pie-chart exact as the documents and it shows
the animation of the bars itself until getting to the right percentage.
Let's say its 45%.
The issue is that the easy pie chart is only running an animation on the bar itself and unfortunately the number is not running from 0 to 45%.
Here's my code snippet:
HTML:
<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'>
<div class='chart circular-bar-chart circular-bar-container' data-percent='45'>
<label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label>
</div>
</div>
CSS:
.circular-bar {
margin-bottom: 25px;
}
.circular-bar .circular-bar-chart {
position: relative;
}
.circular-bar strong {
display: block;
font-weight: 600;
font-size: 18px;
line-height: 30px;
position: absolute;
top: 35%;
width: 80%;
left: 10%;
text-align: center;
}
.circular-bar label {
display: block;
font-weight: 100;
font-size: 17px;
line-height: 20px;
position: absolute;
top: 50%;
width: 80%;
left: 10%;
text-align: center;
}
JS:
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop
});
Here's the link of how it looks:
https://jsfiddle.net/6455nw8t/
How to solve the issue of the running number from 0 to 45% ?
Thanks in Advance!

You will have to add onStep parameter.
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});

How to Create Custom Tooltips

I am extremely new to HTML, JavaScript, and any other coding-related matters. However, I have been relying on tutorials to get a website up for a school project. I managed to use the jQuery library to get my line graph up (from chart.js), but I would also like to be able to allow for tooltips over my content. (specifically, this one) I am having trouble to allow for the tooltips to show up, and I'm wondering how I may fix this, as I am unable to find any tutorials. I previously tried using chart.js together with powertip.js as well, which is another jquery plugin.
Here is my code:
<head>
<title>get1030 project</title>
<style>
#font-face {
font-family: "brandon";
src: url('Brandon_reg.otf') format('opentype');
}
body {
font-family: "brandon", helvetica, sans-serif;
background-color: #f3f3f3;
}
#container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 32px;
}
header {
background-color: #336699;
height: 150px;
padding: 4px;
}
header h1 {
text-transform: lowercase;
text-align: center;
color: #fff;
line-height: 60px;
}
header h2 {
text-transform: lowercase;
line-height: 2px;
font-size: 18px;
text-align: center;
color: #fff;
}
nav {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background-color: #818181;
}
nav ul {
margin-top: 20px;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 0 22px 0 22px;
font-size: 17px;
}
nav a {
text-decoration: none;
color: #fff;
padding: 8px;
font-variant: small-caps;
}
nav a:hover {
color: #336699;
}
nav ul li:hover ul{
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
margin-left: -33px;
}
nav ul ul li {
display: block;
font-size: 15px;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
#graphtitle {
position: relative;
left: 40px;
text-decoration: underline;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
h3 {
margin-left: 40px;
}
article {
margin-left: 40px;
margin-right: 40px;
}
</style>
<script src="jquery-2.2.1.min.js"></script>
<script src="Chart.js"></script>
<script src="html5tooltips.1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="html5tooltips.animation.css" />
<link rel="stylesheet" type="text/css" href="html5tooltips.css" />
</head>
<body>
<div id="container">
<header>
<h1>stereotypes of women in popular music lyrics</h1>
<h2>a digital humanities project</h2>
</header>
<nav>
<ul>
<li>home</li><li>
overview</li><li>
stereotypes
<ul>
<li>sex objects</li>
<li>emotional/weak</li>
<li>femme fatales</li>
<li>toxic</li>
</ul>
</li><li>
against the stereotype</li><li>
references</li>
</ul>
</nav>
<h3>methodology:</h3>
<article>
The lyrics of the top 40 songs of each year over the past decade (2007-2016) were reviewed to identify several common portrayals of women. The top 40 songs (insert tool tip or popup) was retrieved from <span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span> (pop up for billboard) year-end charts (charting methods) of the 'Hot 100' songs; except for the year 2016, where the chart for the week of March 26 2016 was used.
<br><br>
</article><br>
<div id="graphtitle">
<strong>top 40s over the past 10 years</strong>
</div><br>
<div style="width: 100%; height: 100%;">
<canvas id="linechart1" width="800" height "1500""></canvas>
</div>
<div id="legend"></div>
<script>
$(function () {
var data = {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
"2016"],
datasets: [
{
label: "women as femme fatales",
fillColor: "rgba(255, 229, 229, 0.2)",
strokeColor: "#ffcccc",
pointColor: "#ffb3b3",
pointStrokeColor: "#994D4D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffb3b3",
data: [3, 6, 5, 3, 8, 1, 1, 6, 4, 2]
},
{
label: "women as emotional and weak",
fillColor: "rgba(229, 255, 229, 0.2)",
strokeColor: "#ccffcc",
pointColor: "#b3ffb3",
pointStrokeColor: "#4D994D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3ffb3",
data: [4, 6, 5, 6, 3, 4, 4, 4, 3, 8]
},
{
label: "women as men's possessions/sex objects",
fillColor: "rgba(255, 247, 229, 0.2)",
strokeColor: "#ffeecc",
pointColor: "#ffe6b3",
pointStrokeColor: "#99804D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffe6b3",
data: [10, 9, 11, 8, 8, 7, 7, 8, 10, 13]
},
{
label: "women as strong and independent",
fillColor: "rgba(229, 247, 255, 0.2)",
strokeColor: "#cceeff",
pointColor: "#b3e6ff",
pointStrokeColor: "#4D8099",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3e6ff",
data: [2, 3, 2, 1, 5, 5, 2, 5, 2, 1]
},
{
label: "women as toxic",
fillColor: "rgba(238, 229, 255, 0.2)",
strokeColor: "#ddccff",
pointColor: "#ccb3ff",
pointStrokeColor: "#664D99",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ccb3ff",
data: [0, 0, 0, 0, 1, 0, 1, 0, 1, 1]
}
]
};
var option = {
pointDot : true,
scaleGridLineWidth : 1,
};
var ctx = $("#linechart1").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);
document.getElementById('legend').innerHTML = myLineChart.generateLegend();
});
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
</script>
<br>
<article>
As seen in the graph above, the number of songs that feature the sexual objectification of women is consistently the highest in the top 40s over the past ten years.
</article>
</body>
According to the README file for html5tooltip.js,
this is what I am supposed to do, but the tooltip does not show up
Thank you in advance, and I am really sorry if this is not clear! I have been spending hours on this.

Try changing your span tag by giving a id="refresh"
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>
working fiddle - https://jsfiddle.net/Lcrgohvg/

Pushing Javascript to DIV Tag

I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>

Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>

Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>

<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>