ASP.NET JSON Google Chart API not parsing data correctly

Having issues with Google Chart. According to this link I should be able to send dates and times using date string representation however the chart API is not parsing my data. I am sure I am missing something I would appreciate any advice. Data timeofday is not parsing nor is my chart labels in the first row.

I have included all relevant items in my attempt to create this chart.


Output of Code

output result

Data:

Data returned from MySQL view

Controller Method:

public JsonResult GetChartData()
        {
            string q = String.Format("select * from vping2 where SUBSTRING(pingdtval,1,8) = '{0:yyyyMMdd}'", DateTime.Now);

            List<object> chartdata = new List<object>();
            chartdata.Add(new object[]
            {
               "{type: 'timeofday', label: 'Ping Time'}", "{type: 'numeric', label: 'Latency'}"
            });

            using (MySqlConnection cn = new MySqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBCon"].ConnectionString))
            {
                using (MySqlCommand cmd = new MySqlCommand(q))
                {
                    cmd.CommandType = System.Data.CommandType.Text;
                    cmd.Connection = cn;
                    cn.Open();
                    using (MySqlDataReader dr = cmd.ExecuteReader())
                    {
                        while (dr.Read())
                        {
                            chartdata.Add(new object[]
                                {
                                    String.Format("[{0:HH},{0:mm},00]", DateTime.Parse(dr.GetString("ping_dt"))), dr["ping_tm"]
                                });
                        }
                    }
                    cn.Close();

                }
            }

            return Json(chartdata, JsonRequestBehavior.AllowGet);

        }

ASP View:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetChartData", "Home")",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r)
                {      

                    $("#datadiv").before(r.join('<br/>'));
                    var data = google.visualization.arrayToDataTable(r);
                    var options = { title: 'Ping Latency' };
                    var chart = new google.visualization.LineChart($("#chart")[0]);
                    chart.draw(data, options);

                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 100%; height: 400px;">
    </div>
    <br/><br/>
    <div id="datadiv"></div>
</body>
</html>