google chart api data asp.net

I created a graph with the help of google chart api and I have a problem with correct display name of the month on the chart e.g. 2017-02 or 2017-03.

My Chart

My code in controller looks like:

public ActionResult ListOrder()
    {


        var result = from s in db.Orders.ToList()
                     group s by
                         new { Year = s.dateCreated.Year, Month = s.dateCreated.Month, Day = 1 }
                         into g
                         select new OrderViewModel
                         {
                             dateCreated = new DateTime(g.Key.Year, g.Key.Month, g.Key.Day),
                             TotalPrice = g.Sum(x => x.totalPrice)
                         };
        return Json(result, JsonRequestBehavior.AllowGet);

My code in view looks like

Any help or suggestion is welcome. Thanks in advance!

Answers 1

  • in order to format the axis labels, the x-axis values must be actual dates, not strings

    the integer from the string can be used to get the proper date

    -- convert first column to actual date

    from: "/Date(1483225200000)/"

    to: new Date(1483225200000)

    // change column data type to 'date'
    data.addColumn('date', 'Month');
    data.addColumn('number', 'Total sum order for month');
    
    for (var i = 0; i < chartData.length; i++) {
        var rowDate;
    
        // convert dateCreated
        rowDate = chartData[i].dateCreated;
    
        // replace first forward slash (/) with 'new'
        rowDate = rowDate.replace('/', 'new ');
    
        // remove second forward slash (/)
        rowDate = rowDate.replace('/', '');
    
        // evaluate the string to an actual date
        rowDate = eval(rowDate);
    
        data.addRow([rowDate, chartData[i].TotalPrice]);
    }
    

    once actual dates are in place, the format can be set in the chart options...

    hAxis: {
      format: 'yyyy-MM'
    }
    

Related Articles