So I am very new to coding, but a friend asked me to help them make a radar chart that showcases their skills. I have found an example online that I have made some changes to to customize it to their needs. The issue I am having is figuring out how to animate it. What I am trying to do is have each of the plot points move out one at a time until the chart is fully expanded. I then am trying to have each of them collapse from their final value (ie. 65) back to 0, and then repeat the process of expanding again. So basically I want them to expand out one at a time and then after they are all expanded to collapse one by one until the are back to zero, then out again and have this continuously repeat (if possible). I am not sure if this is possible or too much. I have looked online for any sort of animation to at least expand one by one, but I can't find anything. I am including the code I have below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a data set
var chartData = {
rows: [
['Advertising', 33],
['Branding', 34],
['Creative Problem-Solving', 17],
['Digital Marketing', 50],
['Research', 24],
['SEO', 11],
['Social Media Marketing', 59],
['Strategy', 43],
['UI', 22],
['UX', 73]
]
};
// create a radar chart
var chart = anychart.radar();
// set the series type
chart.defaultSeriesType('area');
// set the chart data
chart.data(chartData);
// set the color palette
chart.palette(['#9BC53DE6']);
// configure the appearance of the y-axis
chart.yAxis().stroke('#000000');
chart.yAxis().ticks().stroke('#000000');
// configure the stroke of the x-grid
chart.xGrid().stroke({
color: "#545f69",
thickness: 0.5,
dash: "10 5"
});
// configure the appearance of the y-grid
chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
// begin the y-scale at 0
chart.yScale().minimum(0);
// set the y-scale ticks interval
chart.yScale().ticks().interval(10);
// set the hover mode
chart.interactivity().hoverMode('by-x');
// set the marker type
chart.markerPalette(['star5']);
// improve the tooltip
chart.tooltip()
.displayMode('union')
.useHtml(true)
.format(function(e){
console.log(this);
return '<span style="color:' + this.series.color() + '">' +
this.seriesName + ": " + this.value + "</span>"
});
// set chart legend settings
chart.legend()
.align('center')
.position('center-bottom')
.enabled(false);
// set the chart title
chart.title("Services");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
If possible could you please provide me with help on how to code something like this. I will need to include it in this code as they need one html file that they can upload to their Wix website.
I am not sure if any of this is possible, but I would really appreciate any sort of help or code that I can use.
Thank you so much for your time and help.
I gave it a go, is this what you are looking for? Note that the speed and step variables are adjustable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart Animation</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
var originalData = {
rows: [
['Advertising', 33],
['Branding', 34],
['Creative Problem-Solving', 17],
['Digital Marketing', 50],
['Research', 24],
['SEO', 11],
['Social Media Marketing', 59],
['Strategy', 43],
['UI', 22],
['UX', 73]
]
};
var zeroData = {
rows: [
['Advertising', 0],
['Branding', 0],
['Creative Problem-Solving', 0],
['Digital Marketing', 0],
['Research', 0],
['SEO', 0],
['Social Media Marketing', 0],
['Strategy', 0],
['UI', 0],
['UX', 0]
]
};
var speed = 80; // speed in ms (smaller is faster)
var step = 3; // adjust as needed
// create a radar chart
var chart = anychart.radar();
// set the series type
chart.defaultSeriesType('area');
// set the color palette
chart.palette(['#9BC53DE6']);
// configure the appearance of the y-axis
chart.yAxis().stroke('#000000');
chart.yAxis().ticks().stroke('#000000');
// configure the stroke of the x-grid
chart.xGrid().stroke({
color: "#545f69",
thickness: 0.5,
dash: "10 5"
});
// configure the appearance of the y-grid
chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
// begin the y-scale at 0
chart.yScale().minimum(0);
// set the y-scale ticks interval
chart.yScale().ticks().interval(10);
// set the hover mode
chart.interactivity().hoverMode('by-x');
// set the marker type
chart.markerPalette(['star5']);
// improve the tooltip
chart.tooltip()
.displayMode('union')
.useHtml(true)
.format(function(e){
console.log(this);
return '<span style="color:' + this.series.color() + '">' +
this.seriesName + ": " + this.value + "</span>"
});
// set chart legend settings
chart.legend()
.align('center')
.position('center-bottom')
.enabled(false);
// set the chart title
chart.title("Services");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
function animateChart(fromData, toData) {
var data = JSON.parse(JSON.stringify(fromData));
var index = 0;
var expandingInterval = setInterval(function() {
if (index < data.rows.length) {
var targetValue = toData.rows[index][1];
if (data.rows[index][1] < targetValue) {
data.rows[index][1] += step;
chart.data(data);
chart.draw();
} else {
index++;
}
} else {
clearInterval(expandingInterval);
var collapsingIndex = data.rows.length - 1;
var collapsingInterval = setInterval(function() {
if (collapsingIndex >= 0) {
data.rows[collapsingIndex][1] -= step;
chart.data(data);
chart.draw();
if (data.rows[collapsingIndex][1] <= 0) {
data.rows[collapsingIndex][1] = 0;
collapsingIndex--;
if (collapsingIndex < 0) {
clearInterval(collapsingInterval);
animateChart(zeroData, originalData);
}
}
}
}, speed);
}
}, speed);
}
animateChart(zeroData, originalData);
});
</script>
</body>
</html>