Displaying dates on the Amcharts category axis for instances with empty data

I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "hideCredits": true,
  "fixedColumnWidth": '10px',

  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
      "creationDate": "04/09/18",
      "Banana": 1,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "06/09/18",
      "Banana": 10,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "08/09/18",
      "Banana": 11,
      "Apple": 13,
      "Grapes": 24
    },
    {
      "creationDate": "09/09/18",
      "Banana": 1,
      "Apple": 50,
      "Grapes": 24
    },
  ],

  //"gridAboveGraphs": true,
  "startDuration": 1,

  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0,
    "minimum": 0,
    "maximum": 50,
    "gridCount": 1

  }],
  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#47b012",
    "lineColor": "#47b012",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Grapes Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Grapes",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#fff138",
    "lineColor": "#fff138",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Banana Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Banana",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#dd111b",
    "lineColor": "#dd111b",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Apples eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Apple",
    "fixedColumnWidth": 25
  }],
  "categoryField": "creationDate",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    "labelRotation": 80,
  },
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

However, I aim to display data even on days when no fruits are consumed as shown in the image below. https://i.sstatic.net/lIajF.png

The information for dates 05-09-2018 and 07-09-2018 is missing from the dataprovider field, and my goal is to have them automatically included in the graph.

javascriptjqueryhtmlcssamcharts

Answer №1

Your current Category axis treats dates as strings (categories).

To have a real date scale, you must convert it to a date-based category axis by enabling parseDates: true in the categoryAxis.

However, just setting that won't suffice.

Since your dates are in a non-standard format, you need to guide amCharts on how to parse them. This is where the dataDateFormat setting plays a role:

dataDateFormat: "DD/MM/YYYY"

Moreover, labels follow different rules on a date-based axis. Therefore, adjustments need to be made in the code to ensure they all display correctly:

"categoryAxis": {
  // ...
  "autoGridCount": false,
  "gridCount": 20
},

Below is your modified chart setup:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "hideCredits": true,
  "fixedColumnWidth": '10px',
  "dataDateFormat": "DD/MM/YYYY",

  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
      "creationDate": "04/09/18",
      "Banana": 1,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "06/09/18",
      "Banana": 10,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "08/09/18",
      "Banana": 11,
      "Apple": 13,
      "Grapes": 24
    },
    {
      "creationDate": "09/09/18",
      "Banana": 1,
      "Apple": 50,
      "Grapes": 24
    },
  ],

  "startDuration": 1,

  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,"gridAlpha": 0,
    "minimum": 0,
    "maximum": 50,
    "gridCount": 1

  }],

  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#47b012",
    "lineColor": "#47b012",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Grapes Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Grapes",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#fff138",
    "lineColor": "#fff138",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Banana Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Banana",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#dd111b",
    "lineColor": "#dd111b",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Apples Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Apple",
    "fixedColumnWidth": 25
  }],

  "categoryField": "creationDate",
  
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    "labelRotation": 80,
    "parseDates": true,
    "autoGridCount": false,
    "gridCount": 20
  },
});
#chartdiv {
  width: 100%; 
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve observable modifications

In my code file for handling reports, named report.service.ts, I have a method that retrieves reports data. This method simply returns a constant array of report objects from a mock source. Here is the implementation: @Injectable() export class ReportServ ...

javascriptangularjsangularjs-directiveangularreactivex

Having trouble invoking an established route within a different route in an Express JS project

While working with an Express JS application connected to a mySQL database, I encountered an issue when trying to fetch data from a pre-defined route/query: // customers.model.js CUSTOMERS.getAll = (result) => { let query = "SELECT * FROM custo ...

javascriptnode.jsexpress

Obtaining a value from an array using Google App Script

Having some difficulties with the code snippet provided here. It might be a basic question, but I'm unable to figure out what's going wrong. The issue is that I'm trying to perform calculations on individual values in an array generated fro ...

javascriptarraysgoogle-apps-script

Data will not bind with Laravel and Vue

I am currently working on a Laravel project and trying to develop a basic editing feature for posts. My approach involves using Vue.js 2 to bind the data, but unfortunately, I am facing issues with displaying it - I'm not quite sure what's causin ...

javascriptphplaravelvue.js

Tips on calculating the combined value of price and quantity simultaneously

Greetings, kindly bear with me as my knowledge of JS scripting is quite limited. My expertise lies more in PHP programming. I stumbled upon this neat and straightforward script that calculates the total of product table rows and also provides the grand t ...

javascriptjqueryajax

How to Align Navigation Bar Items to the Right in Bootstrap 4

I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I&ap ...

htmlcssbootstrap-4navbar

Using QuerySelector with Angular Directive will throw an error as it is not a recognized

When creating a directive that integrates a jQuery carousel, I want to hide it at the beginning until it is fully ready. Here's the directive code snippet: return { restrict: 'E', replace: true, scope: true, templateUrl: ...

javascriptjqueryangularjsdirective

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

Tips on modifying the content of an element located within two iframes using the Chrome console

I'm trying to modify an element that is nested within two iframes. The issue I'm facing is that the Chrome console seems unable to locate the element. Is there a specific method to identify and target elements within nested iframes? document.quer ...

htmlgoogle-chromeselenium-webdriverdomgoogle-chrome-console

jsonwebtoken does not fetch a token

I've been working on a user registration system using nodejs and sequelize. So far, I've successfully implemented the login and register functionalities. However, I am encountering an issue with getting the token after a successful login. Despit ...

javascriptjsonnode.jsexpressjson-web-token

Utilizing an EJS template within an express.js application to extract and assign data to a variable

Is there a way to transfer data from my node.js (express) app directly to a variable within the <script> tag on the page? On the server-side, I have the following code: let tmp = JSON.stringify(await f(i)); console.log(tmp); //correct data [{"i ...

javascriptnode.jsexpressejs

Is it possible for index.html to reference a .js file in an Angular.js 1.x version?

Authorized users are allowed to access the menu items. While User A requires the menu_1.js file, User B does not need it and should not have access to it. I am trying to determine how to include required js files in index.html for an angular.js version 1 ...

javascriptangularjs

Troubleshooting problems with scroll functionality on tablets

Currently, I have implemented Jscrollpane on a website to allow scrolling in two divs. One div contains text (links) and the other div contains images of products. While desktop browsers show no issues, there seems to be a problem with an iPad tablet. The ...

jqueryscrolljscrollpanetablet

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars ...

javascripthtmlcssiframe

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

jqueryhtmlasp.netajaxasp.net-mvc

Creating a CSV file using an AJAX request in PHP

In my current project involving PHP AJAX DATATABLE within the Drupal framework, I have successfully developed a function to create a CSV file from table records. This function is triggered by clicking a button in HTML or accessing a specific URL. The PHP ...

phpjqueryhtmlajaxcsv

I am experiencing difficulties with the state updates, as they are not displaying my products correctly when I select them from

When updating the states setProductsShow and setSelectedCategories, it is important to note that setSelectedCategories is updated before setProductsShow. This sequence is crucial for rendering products correctly. I have come across numerous solutions rega ...

javascriptreactjsnext.js

JQuery animation with a delay using the delay() method

I am looking to implement a straightforward animation with jQuery by adding a CSS class to an h1 element and then removing it after 100 milliseconds. Could you kindly explain why the following code snippet might not function as expected? $("h1").addClass ...

jquerydelay

Injecting HTML with jQuery and AJAX and Implementing Gallery Plugins

In my exploration of jQuery and loading HTML from external files, I've encountered a problem. My goal is to extract a URL parameter, use it to load a file named data.html where the data represents the parameter value for gallery, inject the content of ...

jqueryhtmlajax