Creating a Chart using google ApI

Question

Hi I want to create a chart using Google API, I have write the code for retrieving data from database in MVC controller all fine data are coming but it's giving a error like "All series on a given axis must be of the same data type×"... where I have mistake can anyone help to do this??

this my .cshtml code

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    $.get('/Chart/GetData', {},
        function (data) {
            var tdata = new google.visualization.DataTable();

            tdata.addColumn('number', 'Bank_Code');
            tdata.addColumn('number', 'Branch_Code');
            tdata.addColumn('number', 'Branch_ID');
            tdata.addColumn('string', 'Branch_Location');


            for (var i = 0; i < data.length; i++){
                tdata.addRow([data[i].Bank_Code, data[i].Branch_Code, data[i].Branch_ID, data[i].Branch_Location]);
            }

            var option = { title: "Bank Details" };

            var chart = new   google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(tdata, option);
        });
}

</script>


<div id="chart_div" style="width:900px;height:500px"></div>

This My Controller's Code for binding data

public ActionResult GetData()
   {
        return Json(CreatBankList(), JsonRequestBehavior.AllowGet);
    }

    private IEnumerable<BankModel> CreatBankList()
    {
        List<BankModel> BankDetails = new List<BankModel>();

        MORESAND_TCUK_ERP_DBEntities dbContext = new MORESAND_TCUK_ERP_DBEntities();
        var list = dbContext.bank_branch.ToList();

        foreach (var item in list)
        {
            BankDetails.Add(new BankModel()
            {
                Branch_ID = item.bank_branch_id,
                Bank_Code = item.bank_code,
                Branch_Code = item.branch_code,
                Branch_Location = item.branch_location
            });
        }

        return BankDetails;
    }

Answer 1

It looks like the type of chart you picked is the area chart and the data you are tossing it is not the right format. For example for an area chart, I would toss the first column as the x-axis and then the next columns as series in the chart. For example:

[Year, Sales, Expenses], [2014, 2000, 3000], [2015, 3000, 4000]

I think the problem is that you have the last column as a string, so the chart is confused as to how to plot it.

https://developers.google.com/chart/interactive/docs/gallery/areachart

this link clarifies this a lot better than I can