The MVC framework causing the Morris chart to omit the final xkey value

I am facing an issue with my Morris Chart where it is not displaying the last xkey value. Any thoughts on why this might be happening?

https://i.stack.imgur.com/mHBQd.png

Here is the data I am working with:

[{"Date":"2016-07-17","Average":0.0},{"Date":"2016-07-16","Average":0.0},{"Date":"2016-07-15","Average":4.125},{"Date":"2016-07-14","Average":0.0},{"Date":"2016-07-13","Average":0.0},{"Date":"2016-07-12","Average":0.0},{"Date":"2016-07-11","Average":0.0}]

Below is how the chart is being presented:

<script>
    var surveyLastDaysChartData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.SurveyLastDaysChartData));
</script>

 <div class="col-lg-6">
      <div class="card-box">
          <h4 class="header-title m-t-0">Média dos últimos 7 dias</h4>
          <div id="dsb-survey-last-days-chart" style="height: 217px;"></div>
      </div>
 </div><!-- end col -->

And this is the script used to build the chart:

var _surveyLastDaysChartId = "dsb-survey-last-days-chart";

Morris.Line({
        // ID of the element in which to draw the chart.
        element: _surveyLastDaysChartId,
        // Chart data records -- each entry in this array corresponds to a point on the chart.
        data: surveyLastDaysChartData,
        // The name of the data record attribute that contains x-values.
        xkey: 'Date',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['Average'],
        // Labels for the ykeys -- will be displayed when you hover over the chart.
        labels: ['Média'],
        resize: true,
        hideHover: 'auto',
        ymax: 5
    });

Answer №1

I had a similar experience.

It seems that Morris sometimes truncates values on the x-axis if they exceed the width, and I'm not exactly sure how it calculates its elements.

To workaround this issue, I found a possible solution by adjusting the gridTextSize option to a smaller font-size, although it's more of a temporary fix.

For instance:

Morris.Line({
    ...
    gridTextSize: 10,
    ...
});

Alternatively, if your application allows date abbreviation, you could utilize the xLabelFormat option to condense your dates into a shorter format.

For example:

var display_date = function(d) {
    var month = d.getMonth() + 1,
        day   = d.getDate();

    var formattedDay = month + '-' + day

    return formattedDay; // Return "M-DD" format for date
}

Morris.Line({
    ...
    xLabelFormat: function(x) { return display_date(x); },
    ...
});

Answer №2

Whenever the label is too long, Morris.js defaults to a specific behavior. To adjust this, you can utilize the xLabelAngle property, which represents an angle in degrees from horizontal for drawing x-axis labels:

Morris.Line({
        // The ID of the element where the chart will be rendered.
        element: _surveyLastDaysChartId,
        // Data records for the chart -- each entry corresponds to a point on the chart.
        data: surveyLastDaysChartData,
        // The attribute name in the data record that holds the x-values.
        xkey: 'Date',
        // A list of attributes containing y-values.
        ykeys: ['Average'],
        // Labels for the ykeys shown when hovering over the chart.
        labels: ['Média'],
        resize: true,
        hideHover: 'auto', 
        xLabelAngle: 60, //<-- include this
        ymax: 5
    });

Demo: https://jsfiddle.net/iRbouh/hpq42x7b/

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

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

While attempting to disable a button in Materialize CSS using jQuery, I encountered an issue. Despite following the documentation found here, it seems that simply adding the 'disabled' class does not automatically disable the button as expected. ...

Can you explain the significance of the "@" symbol prefix found in npm package names?

While reading through the Angular Component Router documentation, I came across an npm command that caught my attention: npm install @angular/router --save I'm puzzled by the meaning of @angular/router. Is this entire string a package name? If so, ...

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

I am facing an issue in my Laravel project where I have implemented a method in the Vue instance to validate resource availability upon form submission. The validation is done through an AJAX call using axios, and if any resources are unavailable, I receiv ...

Guide to finding and saving email addresses from a string output: extracting and storing each one individually in a text file

After collecting data from multiple sources, the output I obtained is as follows: "addressId":"132234","businessEntryCount":2026},{"district":"Nordend-West","districtSlug":"frankfurt-am-main- ...

Executing numerous queries in mongoDB

I need to query multiple collections in MongoDB. Here is an example of the data structure: Collection stops { { stop_id : 1, stop_name: 'a'}, { stop_id : 2, stop_name: 'b'}, ... Collection stop_time { { stop_id : 1, trip_i ...

Issue encountered while invoking the jQuery html method

Embarking on my first adventure with javascript + jQuery, creating a basic page but running into errors. I've gone through the code multiple times and still can't seem to find the issue. Below is the error message I am encountering: The complet ...

Configuring JWT with Next.js and NextAuth seems to pose a challenge

Setting up JWT with NextAuth has been a bit of a challenge for me. I've been scouring GitHub posts and doing research, but haven't found much help. It seems like there's an error occurring when NextAuth tries to decode the JWT payload. All I ...

Use javascript/ajax to create a dynamic dropdown menu

I have successfully retrieved data from an ajax and JSON request on another php page. Using json parse, I was able to extract two array strings. JAVASCRIPT: if (xmlhttp.readyState==4 && xmlhttp.status==20 { var data = JSON.parse(xmlhttp.respon ...

Executing functionality based on changes in Angular bindings

I am working on securing user passwords in my HTML form. Currently, the password field is stored in localstorage like this: In JS: $scope.localStorage = localStorage; And then in HTML: <input id="pass" type="password" ng-model="localStorage.pass" re ...

Stuck with the same icon even after a successful AJAX call

I am currently working on implementing a 'add to my list' function in my web app. The goal is to change the color of an icon when a user clicks on it, after sending the necessary data to the server. Despite successfully sending the data to the s ...

retrieve Excel document via POST request

I have a scenario where my API endpoint accepts JSON input and returns an Excel file directly instead of providing a link to download the file. How can I use JQuery AJAX to download this file? Here is the backend code snippet: public function postExcel() ...

Error message: JavaScript multiline strings within backticks are currently unsupported in Internet Explorer

My HTML string, stored in a variable, is being used to populate the innerHTML. Although the first example (using backtick syntax) is simple, it does not function in Internet Explorer 11. Is there a way to make the first example work in Internet ...

Missing parameter in the AJAX request

Looking for help with calling the AddCompare action method using an Ajax request in the View. The issue I'm facing is that the parameter sent to the AddCompare Action always has a value of zero, while the parameter value in the function AddToCompare ...

Top method to create a timer in React/Redux for automatically refreshing authentication tokens

I am implementing an access refresh jwt authentication flow and need the client to automatically send a refresh token after 10 minutes of receiving the access token. I also want to ensure that if the user's device is idle for an hour, a new access tok ...

Tips for utilizing code submitted by a user to extract meaningful errors

As I work on developing a mod for the online game Cookie Clicker, I've implemented a feature that allows users to input their own code to enhance the functionality of my mod. However, before users save their code using my custom editor, I want to run ...

How can I dismiss a pop-up window for adding a new record in a jQuery jTable after it has been saved in an MVC application

I have integrated the jTable plugin from jQuery into my CRUD application. The issue I am facing is that when I click on Add New Record, a confirmation dialog pops up but after entering the details and clicking Save, the dialog does not close. However, the ...

The brief interruption in ASP.NET SignalR communication results in the user being temporarily disconnected, and quickly reconnected

Is it possible to maintain a connection when the user navigates to another subpage? I am using @Url.Action("Action","Controller") I have a JQuery click function attached to Url.Action which triggers a signalR hub server method. However, I am facing an is ...

Looking to notify the second set of JSON data arrays?

Today, I encountered an issue while working with two arrays of JSON data. Upon trying to alert the second JSON data in AJAX, I found that it was showing as "undefined". How can I successfully alert the value of the second JSON data? The relevant portion o ...

The process of displaying custom number buttons on the correct input field in react.js

I am facing a challenge in implementing this feature. I have created custom number buttons from 0-9 that users can click on instead of using the keyboard. The issue arises when there are multiple dynamically generated input fields based on JSON Data. For e ...

Choose an image for a better view with the use of HTML and JavaScript/JQuery

Requesting assistance in creating a simple code using plain html5 and JavaScript/jQuery (without plugins) that will enlarge an image upon clicking on it from a list of images. Here is the HTML snippet provided: <!-- Large image holder --> & ...