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

Dynamically Loading External JavaScript Files Depending on User Input

Customize the default styles for Angular 2/4 Material's "md-menu" component

Is utilizing React function components the most effective solution for this problem?

Using Jquery and css to toggle and display active menu when clicked

Executing Laravel Ajax Requests on the whole website

Having trouble setting a value as a variable? It seems like the selection process is not functioning properly

The issue with JQGrid: Inaccurate selection of drop down value when edit type is set to 'select'

Contrasting bracket notation property access with Pick utility in TypeScript

Issues with Implementing Scroll Directive in Angular JS

Text field auto-saving within an iFrame using localStorage is not functioning as expected

Leveraging previous state values within a setInterval function in React

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

Removing a row from a table in AngularJS connected to FireBase

Cookies can only be returned as stdClass Objects

Implementing jQuery and JavaScript validation for email addresses and usernames

JavaScript CheckBox Color Change Not Functioning

I am encountering issues with my JavaScript files that appear to be following the correct path, however they are not functioning properly. Error messages such as SyntaxError: expected expression

Utilizing Date Model Binding in ASP.NET Core Framework

What is the reason behind the absence of unwrapping when utilizing a ref as an element within a reactive array or reactive Map?

Adjust the contents of an HTTP POST request body (post parameter) upon activation of the specified POST request