javascripthtmlanychartradar-chartspider-chart

How to animate a radar chart


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.


Solution

  • 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>