We Keep Coding

How can I use JavaScript DOM in my Tailwind?

I’m working with Tailwind.css in my Django templates, but for a while, I’m trying to reproduce something that requires JavaScript.
<div id="chart">
</div>
<script>
var options = {
series: [76, 67, 61, 90],
chart: {
height: 390,
type: 'radialBar',
},
plotOptions: {
radialBar: {
offsetY: 0,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: '30%',
background: 'transparent',
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
fontSize: '16px',
position: 'left',
offsetX: 160,
offsetY: 15,
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
vertical: 3
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
As much as you can see, I created this script in the HTML template file, but my div is invisible on the page when I render and it is also in my developer tools, which means that is there, but it does not appear.
I’m expecting to render this code, which is a radial chart bar, in my HTML.

Chartjs v3 - Add a glow effect on hover to the arcs of the doughnut

I need to add a glow effect on hover to the doughnut chart I created. An example of the same can be found here - https://nagix.github.io/chartjs-plugin-style/samples/doughnut.html
The above link plugin works only with chart.js V2, but not with chart.js v3.
Does anyone know how can I achieve this?
I have created a doughnut chart using the following code snippet:
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: 'My First Dataset',
data: chartData,
borderWidth: 0,
backgroundColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
},
],
},
options: {
hoverBorderWidth: 2.84,
spacing: 20,
hoverBorderColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
elements: {
arc: {
angle: 360,
borderWidth: 18,
},
},
layout: {
padding: {
left: 15,
right: 15,
top: 10,
bottom: 15,
},
},
responsive: true,
cutout: '90%',
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
},
});

ReferenceError: SGMax1 is not defined at eval (dashboard.v1.vue?88bf:1134) in Vue.js

I am using highcharts to display data from MySQL database using PHP.
here is my code
CustomGauge.vue
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: [
"data",
"title",
"name",
"min",
"max",
"format",
"text",
"x",
"y",
"target",
"targetFormat"
],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: "Segoe UI Light",
fontSize: "22px"
},
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: "#f2f2f2"
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
}
},
{
data: this.target,
dataLabels: {
enabled: true,
format: this.targetFormat,
verticalAlign: "top",
borderWidth: 0
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%"
}
}
]
}
};
},
};
I call it in my page like this
<CustomGuage
class="guage"
:title="guageTitle1"
:data="gaugeData1"
:format="gaugeFormat2"
:target="gaugeTarget1"
:max="SGMax1"
:targetFormat="targetFormat2"
/>
In the methods, i get the data from MySQL like this
axios
.get("http://localhost/intranet-php/SG1-max.php" + "?action=fetch-all")
.then(response => {
console.log(response.data);
//var x = JSON.parse(response.data)
var x = response.data;
console.log( x);
this.SGMax1.push(x);
console.log(SGMax1);
})
.catch(function(error) {
console.log(error);
});
I have even initialized it in data() like this -
SGMax1: [],
I get the error,
ReferenceError: SGMax1 is not defined at eval (dashboard.v1.vue?88bf:1134)
I used the exact methods to get other data and it works fine. The php file also works fine as i can see the correct output in the console. Its only for this particular one i get the error. Am i defining it wrong in the chart component? Thanks for the help in advance

how to add color inside a 3d chart in highchart js

I am using 3d option enabled scatter type highchart, now i want to color inner 3d area with two different colors, say red and blue. So my question is
1. How to fill color inside a 3d area?
2. If filled, how to split that inner 3d area into two and add two different color?
my code is
var chartClassification = new Highcharts.Chart({
chart: {
renderTo: 'containerClassification',
margin: 20,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: { size: 10, color: 'rgba(0,0,0,0.02)' },
back: { size: 100, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Classification'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
color: 'black',
data: []
}]
});

I have created a fiddle to demonstrate what you are asking about:
https://jsfiddle.net/cnxwue7k/
It's fairly easy to change the colors of each 3d area
just change the colors in the frame object:
frame: {
bottom: { size: 10, color: 'grey' },
back: { size: 100, color: 'red' },
side: { size: 1, color: 'blue' }
}
further info here:
https://www.highcharts.com/docs/chart-concepts/3d-charts
Hope that helps :-D
Let me know if you need any more help
EDIT:
As Paul pointed out below in the comments, you can also add more colored axis which gives the desired effect:
http://jsfiddle.net/g6jhvcd2/

Marking specific point on highchart column

I am working to create highchart for a marketing team, please check this:
http://jsfiddle.net/jyotipuri/kh5jY/5124/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
title: {
text: null
},
xAxis: [
{
categories: ['North','South','East', 'West']
}
],
yAxis: [
{
title: null,
labels: {enabled: false},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
{
title: null,
labels: {enabled: false}
}
],
tooltip: false,
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series: {
point: {
events: {
click: function () {
$scope.drillChart(this.category);
}
}
}
}
},
series: [
{
name: 'Jan',
data: [23, 45, 24, 30],
type: 'column'
},
{
name: 'Feb',
data: [50, 40, 25, 10],
type: 'column'
}
]
});
});
The columns here show sales in various regions, I need to be able to mark out specific point on the columns that will be sales target and it will show is sales met the target. The marking has to be done for both columns (Jan, Feb) for all 4 regions (NORTH, SOUTH, WEST, EAST).

How would you mark out that points? I think you can achieve that in two ways:
using column series with low options (or columnrange series): http://jsfiddle.net/kh5jY/5132/
using scatter just to put marker on such point: http://jsfiddle.net/kh5jY/5133/
{
name: 'South target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: 0.15,
type: 'scatter'
}, {
name: 'North target',
data: [20, 20, 20, 20],
zIndex: 10,
pointPlacement: -0.15,
type: 'scatter'
}