CODEWITHSUNDEEP
google-visualizationpygooglechart
Shakir Ahamed
Shakir Ahamed

Reputation: 1308

Creating a Chart using google ApI

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;
    }

Upvotes: 2

Views: 237

Answers (1)

ace040686
ace040686

Reputation: 163

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

Upvotes: 1

Related Questions