Splinterlands Team performance - Chart visualization

In my previous posts, I've discussed how to gather your Splinterlands battle data and analyze it to score teams and cards based on the performance with others.

I always thought it would be cool to visualize the data. Also, it will be easy to look up any team and scores. Thus began the search for one, and found this cool example code introducing Chart.js.

you can find the below code here

Creating HTML to view Charts

Using HTML select lable to select mana-cap, category (team|summoner|monster) and the availablity.

//scores.html

    <label for="mana-cap">Mana Cap</label>
    <select id="mana-cap"></select>
    <label for="category">Category</label>
    <select id="category" type="text">Category</select>
    <label for="type">Type</label>
    <select id="type" type="text">Type</select>

These can be populated later with options in script with jQuery. We supply an array of options and then create them for their respective selections.

//scoresChart.js function setOptions(arr,elem){ $(#${elem}).empty(); $.each(arr, function(i, p) { $(#${elem}).append($('<option></option>').val(p).html(p)); }); } // other code setOptions(Object.keys(scores), "mana-cap"); setOptions(["team","summoner","monsters"], "category"); setOptions(["playable","unplayable"], "type");

        <canvas id="myChart"></canvas> 

The remaining magic goes in JavaScript.

Chart.js -> Splinterlands Team Scores

Get Scores with ajax

var scores = $.ajax({ url: "http://localhost:3000/Standard", async: false, dataType: 'json' }).responseJSON;

Got the scores data from a JSON-server which hosts the data like an API. responseJSON will allow us to store the data in a variable that will be available throughout the script.

the Initial Chart

A Skeleton chart without any data can be later updated based on mana-cap or other dataSets. the chart will be of type line with no initial data. But the options sections are predefined since they won't vary when we change the dataSets.

var scoresChart = new Chart(document.getElementById("myChart").getContext('2d'), {
  type: 'line',
  data: { labels: [], datasets: [], },

  options: {
    interaction: { intersect: false, mode: 'index', },

    scales: {
      x: {max:9},
      'default': { position: 'left', ticks: { beginAtZero: true, } },
      'wr': { position:'right', ticks: { beginAtZero: true, } }
    },

    plugins: { tooltip: { callbacks: { footer: footer, } } },
  }
});

The final chart is a result of the above options.

Getting the Score DataSets

Whenever the select options change, we call the function getBattleData().

    $("select").on('change', function(){
      getBattleData();
    });

Based on the above score for a team, I create a dataset to be pushed for the chart as follows.

function getBattleData() {
  scoreData = scores[$("#mana-cap").val()][$("#category").val()][$("#type").val()];
  scoresChart.data.datasets = [];
  ['score', 'wr', 'count'/*, 'w', 'l', 'd',*/].forEach(el=>
    scoresChart.data.datasets.push(dataSet(el)));
  scoresChart.data.labels = scoreData.map(x=>x.summoner?x.summoner.name:x.name);
  scoresChart.update();
}

And then update the chart.

I am new to javascript and HTML. If any suggestions, then please comment.