CODEWITHSUNDEEP
asp.netangularjsasp.net-mvcundefinedamcharts
abdullah tariq
abdullah tariq

Reputation: 11

amCharts with Angularjs showing undefined object in the value field of the chart

I am new to both angularjs and amcharts. What i am trying to do is that I am sending some data in json from a controller (asp.net core). The data is sent to the angularjs controller which is then suppose to create a basic chart using amCharts.

In the category field of the chart i am getting "Undefined" written instead of the names of the countries. The code seems to be running fine but i just cannot find the error. the following is my code.

The following is the class and controller from which i am sending the data written in asp.net core.

  public class tempCountry
    {
        public string Country { get; set; }
        public int Visits { get; set; }

    }

    [HttpGet]
    public IActionResult Charts_Json()
    {
        List<tempCountry> tempCountry = new List<chartController.tempCountry>();

        tempCountry tObj = new tempCountry();
        tObj.Country = "Pakistan";
        tObj.Visits = 500;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "Japan";
        tObj.Visits = 1000;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "India";
        tObj.Visits = 3000;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "Austrailia";
        tObj.Visits = 4000;

        tempCountry.Add(tObj);

        return Json(tempCountry);


    }

The following is my Angularjs controller.

var myApp = angular.module("main", []);

myApp.controller("myController", function ($scope,$http) {

$http({
    method: "GET",
    url: "/chart/charts_json"
}).then(function mySuccess(response) {


    chartdata = response.data;
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = response.data;
    chart.categoryFeild = "Country";
    var graph = new AmCharts.AmGraph();
    graph.valueField = "Visits";
    chart.addGraph(graph);
    chart.write('chartdiv');
});

});

The following the view code (MVC asp.net core).

@section scripts {
    <script src="~/js/amcharts/amcharts.js"></script>
    <script src="~/js/amcharts/serial.js"></script>
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/js/mainApp.js"></script>
}
<p>this is the chart view page</p>
<body>
    <div ng-app="main">
        <div ng-controller="myController">
        </div>
    </div>
    <div id="chartdiv" style="width:640px; height: 480px;">
    </div>
</body>

The following is the screenshot of the output i am getting enter image description here

Upvotes: 1

Views: 587

Answers (1)

mg1075
mg1075

Reputation: 18155

chart.categoryFeild = "Country";

categoryFeild is not a valid amCharts property.

If that is literally how you are spelling the property, you can edit a column chart on the amCharts website and reproduce the same undefined column names you are generating by using categoryFeild.

Instead, please try replacing categoryFeild with categoryField.

https://docs.amcharts.com/3/javascriptstockchart/AmSerialChart#categoryField

Upvotes: 0

Related Questions