Chang values of X-Axis label in morris Area chart using jQuery morris plugin in ASP.Net

Hi venkatg,

If you want to display the value as in the record without changing to Date format then add parseTime: false into your chart configuration.

This will skip time/date parsing for X values, instead treating them as an equally-spaced series.

For more details refer the official document.

https://morrisjs.github.io/morris.js/lines.html

HTML

<div id="area_line_chart">
</div>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: "Default.aspx/GetChartData",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                new Morris.Area({
                    element: 'area_line_chart',
                    behaveLikeLine: true,
                    data: result.d,
                    xkey: 'w',
                    ykeys: ['x', 'y', 'z'],
                    labels: ['X', 'Y', 'Z'],
                    xLabelAngle: 60,
                    pointSize: 2,
                    hideHover: 'auto',
                    lineColors: ['rgb(97, 97, 97)', 'rgb(0, 206, 209)', 'rgb(255, 117, 142)'],
                    parseTime: false
                });
            },
            error: function (error) { alert(error.responseText); }
        });
    });
</script>

Code

C#

[WebMethod]
public static List<GraphData> GetChartData()
{
    // Get Data from Database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
                    new DataColumn("w", typeof(string)),
                    new DataColumn("x", typeof(int)),
                    new DataColumn("y",typeof(int)),
                    new DataColumn("z",typeof(int))});
    dt.Rows.Add("2011 Q1", 2, 0, 0);
    dt.Rows.Add("2011 Q2", 50, 15, 5);
    dt.Rows.Add("2011 Q3", 15, 50, 23);
    dt.Rows.Add("2011 Q4", 45, 12, 7);
    dt.Rows.Add("2011 Q5", 20, 32, 55);
    dt.Rows.Add("2011 Q6", 39, 67, 20);
    dt.Rows.Add("2011 Q7", 20, 9, 5);
    List<GraphData> chartData = new List<GraphData>();
    foreach (DataRow dr in dt.Rows)
    {
        chartData.Add(new GraphData
        {
            w = Convert.ToString(dr["w"]),
            x = (Convert.ToInt32(dr["x"])),
            y = (Convert.ToInt32(dr["y"])),
            z = (Convert.ToInt32(dr["z"]))
        });
    }

    return chartData;
}

public class GraphData
{
    public string w { get; set; }
    public int x { get; set; }
    public int y { get; set; }
    public int z { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As List(Of GraphData)
    ' Get Data from Database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("w", GetType(String)), New DataColumn("x", GetType(Integer)), New DataColumn("y", GetType(Integer)), New DataColumn("z", GetType(Integer))})
    dt.Rows.Add("2011 Q1", 2, 0, 0)
    dt.Rows.Add("2011 Q2", 50, 15, 5)
    dt.Rows.Add("2011 Q3", 15, 50, 23)
    dt.Rows.Add("2011 Q4", 45, 12, 7)
    dt.Rows.Add("2011 Q5", 20, 32, 55)
    dt.Rows.Add("2011 Q6", 39, 67, 20)
    dt.Rows.Add("2011 Q7", 20, 9, 5)
    Dim chartData As List(Of GraphData) = New List(Of GraphData)()

    For Each dr As DataRow In dt.Rows
        chartData.Add(New GraphData With {
            .w = Convert.ToString(dr("w")),
            .x = (Convert.ToInt32(dr("x"))),
            .y = (Convert.ToInt32(dr("y"))),
            .z = (Convert.ToInt32(dr("z")))
        })
    Next

    Return chartData
End Function

Public Class GraphData
    Public Property w As String
    Public Property x As Integer
    Public Property y As Integer
    Public Property z As Integer
End Class

Screenshot