Morris.js chart design fix

Question

I have a problem I am able to change my Morris.js Chart to bar graph to line graph the problem is the design of the line graph. Please refer to the two (2) screen shots to see what I meant. When I switch the graph into a line graph the graphical representation of data is messed up. How can I fix this?

Bar Graph Line Graph

PHP Code I used :

$sql = "SELECT MONTHNAME(date) AS date, SUM(sales) AS sales FROM tblSales WHERE YEAR(date)=YEAR(now()) GROUP BY MONTHNAME(date)";
$result = mysqli_query($conn, $sql);

while ($row = mysqli_fetch_array($result)) {
    $ar[] = array(
        'month' => $row['date'],
        'sales' => $row['sales']
    );
}
ob_clean();
echo json_encode($ar);

AJAX Code I used :

var statement = 1;
    $.ajax ({
        url:"show_total_overall_sales.php",
        data: "statement="+statement,
        method: "POST",
        success: function(branch_data){
            new Morris.Line({
                element: 'total-sales',
                data: JSON.parse(branch_data),
                xkey: 'daily',
                ykeys: ['sales'],
                labels: ['Total Sales'],
                hideHover: 'auto'
            });
        }
    });

Answer 1

Maybe you can try to use parseTime:false