Utilize anychart.js to define the axis using JSON data

Question

Utilize anychart.js to define the axis using JSON data

I'm relatively new to using anychart js and encountering some obstacles. I have a json file that is being fetched from an API, containing data on NBA players' statistics. You can find the json file here:

My goal is to display the date data on the X axis of the chart. How can I achieve this?

function retrieveData() {
  axios.get("https://www.balldontlie.io/api/v1/stats").then(response => {
    var dataPoints = [];
    for (item of response.data.data) {
      dataPoints.push([item.date, item.fga]);
    }

    anychart.onDocumentReady(function() {
      var dates = [];
      for (item of response.data.data) {
        dates.push(item.date.split('-'));
      }

      var data = dataPoints;
      var chart = anychart.line();
      var series = chart.line(data);
      chart.yScale().minimum(0);
      chart.yScale().maximum(50);
      chart.container("container");
      chart.draw();

    });

  });

}

retrieveData();

javascript json charts anychart

Answer 1

Answer №1

The necessary data is stored in the item.game.date key, specifically within the date property. By utilizing the Internationalization API, you can easily convert this date into a month format that suits your locale.

I have adjusted the code to align with the coding patterns illustrated in Anychart's documentation. This revised version should generate an array containing nested arrays holding the [month, fga] values, as shown in this example from the docs.

function fetchData() {
  return axios.get("https://www.balldontlie.io/api/v1/stats").then(response => {
    var resultSet = response.data.data.map((item) => {
      var dateObj = new Date(item.game.date);
      var monthName = dateObj.toLocaleString('en-US', { month: 'long' });
      return [monthName, item.fga];
    });
    return resultSet;
  });
}

anychart.onDocumentReady(function() {
  fetchData().then(data => {
    var chart = anychart.line();
    var series = chart.line(data);
    chart.yScale().minimum(0);
    chart.yScale().maximum(50);
    chart.container("container");
    chart.draw();
  });
});

Answer 2

The necessary data is stored in the item.game.date key, specifically within the date property. By utilizing the Internationalization API, you can easily convert this date into a month format that suits your locale.

I have adjusted the code to align with the coding patterns illustrated in Anychart's documentation. This revised version should generate an array containing nested arrays holding the [month, fga] values, as shown in this example from the docs.

function fetchData() {
  return axios.get("https://www.balldontlie.io/api/v1/stats").then(response => {
    var resultSet = response.data.data.map((item) => {
      var dateObj = new Date(item.game.date);
      var monthName = dateObj.toLocaleString('en-US', { month: 'long' });
      return [monthName, item.fga];
    });
    return resultSet;
  });
}

anychart.onDocumentReady(function() {
  fetchData().then(data => {
    var chart = anychart.line();
    var series = chart.line(data);
    chart.yScale().minimum(0);
    chart.yScale().maximum(50);
    chart.container("container");
    chart.draw();
  });
});

Utilize anychart.js to define the axis using JSON data

Answer №1

Similar questions

Transitioning React Hover Navbar Design

Error encountered while creating SvelteKit: The module 'intl-messageformat' that was requested is in CommonJS format

Troubleshooting MongoDB and Node.js: Issue with updating variables when inserting documents in a loop

Filter out the selection choice that begins with 'aa' in the drop-down menu

Disregard the Field File when utilizing jQuery validation

Experiencing difficulties with mocha and expect while using Node.js for error handling

Error 56 EROFS encountered when trying to save a file in Node.js filesystem every 2 seconds

Unusual express middleware usage in NodeJS

Make changes to an array in Javascript without altering the original array

Is it possible for images underneath to receive focus when hovering over them?

What's the most effective method: Utilizing generic code generation or hardcoding API calls?

What is the method for providing a date format choice in JSON?

Event that signifies a change in the global state of the Angular 2 router

Update the content of a div element with the data retrieved through an Ajax response

Using and accessing Ajax response across all routes in an application

Angular 6 and the intricacies of nested ternary conditions

Having trouble retrieving the latest value of a scope variable when dealing with multiple partial HTML files controlled by a single Angular controller

Issue encountered while attempting to transform a POJO Class into a JSON String using GSON

Which is better for toggling between images/icons: a switch statement or a ternary operator?

sending jqgrid post request with JSON payload