Issues plotting two lines with JSON data on high chart using Angular JS - name undefined

Question

Trying to plot a high chart dynamically using Angular JS. I have two lines I want to plot on the same graph.

Example item in the 'jsondata':

{
  "ID": 123456,
  "SaleDate": "2016-02",
  "SalesAgeBucket5": "NULL",
  "SalesAgeBucket10": 19300000,
  "SalesAgeBucket15": "NULL",
  "SalesAgeBucket20": "NULL",
  "SalesAgeBucket25": "NULL"
}

In the high chart config file the name is being applied in the series but not within the data attribute. So SalesAgeBucket5 is plotted with all the data but it is not being grouped. I am only seeing one line with all the data plotted against that series.

    $scope.chartConfig.series[0].name = "SalesAgeBucket5";
$scope.chartConfig.series[0].data  = jsondata.map(item => item["SalesAgeBucket5"]);
$scope.chartConfig.series[1].name = "SalesAgeBucket10";
$scope.chartConfig.series[1].data  = jsondata.map(item => item["SalesAgeBucket10"]);
$scope.chartConfig.xAxis.categories = jsondata.map(item => item[Object.keys(jsondata[0].SaleDate)]);

> angular.min.js:124 TypeError: Cannot set property 'name' of undefined
    at b.$scope.getData (main.js:25699)
    at fn (eval at compile (angular.min.js:242), <anonymous>:4:141)
    at e (angular.min.js:288)
    at b.$eval (angular.min.js:151)
    at b.$apply (angular.min.js:151)
    at HTMLSpanElement.<anonymous> (angular.min.js:288)
    at HTMLSpanElement.dispatch (jquery.min.js:3)
    at HTMLSpanElement.v.handle (jquery.min.js:3)

Output of high chart config:

  {
   "chart":{
      
   },
   "plotOptions":{
      "line":{
         "dataLabels":{
            "enabled":false
         },
         "enableMouseTracking":true
      }
   },
   "series":[
      {
         "data":["null","null",140000,"null" etc... INCLUDES ALL VALUES],
         "id":"Results1",
         "turboThreshold":0,
         "name":"SalesAgeBucket5"
      }
   ],
   "xAxis":{
      "categories":""
   },
   "title":{
      "text":"Sales & Purchase"
   }
}

but I am expecting multiple line charts on this graph therefore multiple data attributes

I checked via console log and it says 'undefined'. Not sure why its not creating a second series, still cant get it to work. — roa765
– roa765, Commented Sep 21, 2020 at 19:31

gkulshrestha · Accepted Answer · 2020-09-22 03:38:36Z

1

In your chart config, series array has only one element. There is nothing for "SalesAgeBucket10". I do not have your code so cannot reproduce issue on my side but can suggest to try the following. Modify series array in high chart config to:

"series":[
      {
         
         "id":"Results1",
         "turboThreshold":0,             
      },
      {
         
         "id":"Results2",
         "turboThreshold":0,             
      }
   ],

answered Sep 22, 2020 at 3:38

gkulshrestha

8851 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mateusz Kornecki Over a year ago

Exactly, if you want to create the chart with multiple lines you need to create multiple series like in the following example: jsfiddle.net/BlackLabel/zxskLo4h.

Collectives™ on Stack Overflow

Issues plotting two lines with JSON data on high chart using Angular JS - name undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related