CODEWITHSUNDEEP
javascriptasp.net-mvcmorris.js
Patrick
Patrick

Reputation: 2781

Morris chart not showing the last xkey value with MVC

My Morris Chart is not showing the last xkey value:

enter image description here

Any ideia why?

My data is:

[{"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}]

The View:

<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 -->

The script to build it:

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
    });

Upvotes: 1

Views: 2176

Answers (2)

adriennetacke
adriennetacke

Reputation: 1746

This happened to me too.

I'm not sure how Morris calculates its elements, but sometimes, it cuts off values on the x-axis when it exceeds the width.

The way I was able to fix it (it is a hack, though) was to use their gridTextSize option and change it to a smaller font-size.

Example:

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

Another option, if your app allows you to shorten your date, it to use their xLabelFormat option to parse your dates into a smaller format.

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); },
    ...
});

Upvotes: 5

Ismail RBOUH
Ismail RBOUH

Reputation: 10460

It's the default behaviour of Morris.js when the label is too long. You can use xLabelAngle, is and angle in degrees from horizontal to draw x-axis labels:

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',
        xLabelAngle: 60, //<-- add this
        ymax: 5
    });

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

Upvotes: 3

Related Questions