Visualizing Nutrition in Food using CanvasJS Pie Chart and API Ninjas Free API

With the increasing awareness of healthy eating, understanding the nutritional content of food has become essential. Visualizing this data can help individuals make informed decisions about their diet. In this article, we will explore how to create a CanvasJS pie chart to visualize nutrition in food using API Ninjas’ free API.

Using API Ninjas Free API and CanvasJS

API Ninjas offers a free API that provides access to a vast database of food items, including their nutritional information. The API returns data in JSON format, making it easy to integrate with web applications. We will use the food/nutrition endpoint to retrieve the nutritional data for a given food item. CanvasJS is a popular JavaScript charting library that provides a range of chart types, including pie charts. We will use CanvasJS to create a pie chart that displays the nutritional breakdown of a food item.

Implementation

To implement the visualization, we will follow these steps:

Step 1: Get the API Key

First, sign up for a free API key on the API Ninjas website. Once you have the key, you can use it to make API requests.

Step 2: Fetching Nutrition Data

We’ll use the API Ninjas API to fetch the nutrition data of a specified food item. You’ll need an API key from API Ninjas, which you can get by signing up on their website.

Here’s the JavaScript code to fetch the data:

fetch('https://api.api-ninjas.com/v1/nutrition?query=apple', {
    method: 'GET',
    headers: {
        'X-Api-Key': 'YOUR_API_KEY'
    }
})
.then(response => response.json())
.then(data => {
    var nutritionData = data[0]; // Assuming the first item in the array is our result
    visualizeNutrition(nutritionData);
});

Step 3: Parse the API Response

The API response will contain the nutritional data for the food item. Parse the response to extract the relevant data, such as the macronutrient breakdown (carbohydrates, protein, fat) into a format that CanvasJS can understand and use to create a pie chart.

Step 4: Create the Pie Chart

Use CanvasJS to create a pie chart that displays the macronutrient breakdown. The chart will show each macronutrient as slices of the pie.

Here is the sample code:

// Get the API response
fetch('https://api.api-ninjas.com/v1/food/nutrition?query=apple')
  .then(response => response.json())
  .then(data => {
    // Extract the macronutrient data
    const carbs = data.nutrition.carbohydrates;
    const protein = data.nutrition.protein;
    const fat = data.nutrition.fat;

    // Create the pie chart
    var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "Nutrition Breakdown of Apple"
      },
      data: [{
        type: "pie",
        dataPoints: [
          { label: "Carbohydrates", y: carbs },
          { label: "Protein", y: protein },
          { label: "Fat", y: fat }
        ]
      }]
    });
    chart.render();
  });

Step 5: Display the Chart

Finally, display the chart in an HTML element with the id “chartContainer”. You can see a working example of this implementation on JSFiddle.

Using the API Ninjas API and CanvasJS, you can easily visualize the nutritional content of various foods. This visualization helps in understanding and managing dietary choices more effectively.

Happy coding and healthy eating! 🍏📊🚀