How to use for loop array to add series dynamically for line chart

Question

I have to Pass array to series which generating from ajax code. I have this multiple fields/array Linehart values Result[i].MONTHLY_TOTAL_FTE, MonthYear Result[i].MONTH + Result[i].YEAR, Country Result[i].COUNTRY_NAME So I have to show a line chart according to this.

I am using below snippet code

$.ajax({
                type: "GET",
                url: "/api/ReportAPI/GetMonthlyEmployeeFte",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Result) {
                  var data = [];
                  var data2 = [];
                  var data3 = [];
                  for (var i in Result) {                     
                    var serie = new Array(Result[i].MONTH + Result[i].YEAR);
                    data.push(serie);
                    var fte = new Array(Result[i].MONTHLY_TOTAL_FTE);                       
                    data2.push(fte);
                    var contry = new Array(Result[i].COUNTRY_NAME);                      
                    data3.push(contry); 
                    }                    
                    DreawLineChart(data, data2, data3);                                                   
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            }); 


     function DreawLineChart(series, ssssss,contryname) {
     Highcharts.chart('container2', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Employee FTE'        },
        subtitle: {
            //text: 'Source: WorldClimate.com'
        },
        xAxis: {
            //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            categories: series
        },     
        yAxis: {
            title: {
                text: 'FTE'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        /* series: [{
             name: 'Singapore',
             data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

         }, {
             name: 'New Zealand',
             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }] */
           series: [{
               name:contryname, //'Singapore',
          data: JSON.parse("[" + ssssss + "]") //[3.9, 4.2, 5.7, 8.5] //ftes
          }]

    });
   }

problem is that it's showing data for Japan country but its showing data of other countries in Japan.on clik on Other countries like new Zealand, Singapore its showing blank.

My sql store procedure to fetch data

SELECT YEAR(POSBDGT.[PLAN_START_DATE]) as [POSITION_FTE_YEAR],
  MONTH(POSBDGT.[PLAN_START_DATE]) as [POSITION_FTE_MONTH_NO],
  CONVERT(varchar(3),DATENAME(month,POSBDGT.[PLAN_START_DATE])) as [POSITION_FTE_MONTH],
  SUM([TOTALFTE]) AS [TOTALFTE], 
  COMAST.[name]
  FROM [DBO].[POSITION_FTE] POSFTE WITH (NOLOCK)
  INNER JOIN [DBO].[POSITION_BUDGET] POSBDGT WITH (NOLOCK) ON POSFTE.POSITION_ID = POSBDGT.POSITION_ID
   INNER JOIN [DBO].POSITION_LOCATION POSLOC WITH (NOLOCK) ON POSLOC.POSITION_ID = POSFTE.POSITION_ID
  INNER JOIN [DBO].[country_master] COMAST WITH (NOLOCK) ON COMAST.[country_id] = POSLOC.COUNTRY_ID
  GROUP BY COMAST.[name], YEAR(POSBDGT.[PLAN_START_DATE]),DATENAME(month,POSBDGT.[PLAN_START_DATE]),MONTH(POSBDGT.[PLAN_START_DATE])

Table Results

score 1 · Accepted Answer · 2018-03-30 12:20:56Z

1

The problem you are facing is that the layout of your series is looking like the following:

series: [{
          name: ['England', 'Japan', 'Singapore']  //contryname
          data: JSON.parse("[" + [1, 2, 3, 4]+ "]") //ssssss

In order for Highcharts to work you need the following format

    series: [{
                 name: 'Singapore',
                 data: [7.0, 6.9]

             }, {
                 name: 'New Zealand',
                 data: [3.9, 4.2]
             }]

You can achieve this by making sure your Result loop looks like this:

 $.ajax({
                type: "GET",
                url: "/api/ReportAPI/GetMonthlyEmployeeFte",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Result) {
                      var data = []
                      var categories = []
                      for (var i in Result) {                     
                          var serie = new Array(Result[i].MONTH + Result[i].YEAR);
                          categories.push(serie);
                          var fte = {name: Result[i].COUNTRY_NAME, data: 
                                     [Result[i].MONTHLY_TOTAL_FTE]};                       
                          data.push(fte);      
                          }  
                  DreawLineChart(categories, data);                                                   
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            }); 





    function DreawLineChart(categories, dataArray) {
         Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Employee FTE'        },
            subtitle: {
                //text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: categories
            },     
            yAxis: {
                title: {
                    text: 'FTE'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
             series: dataArray //This is where the new array of data appears

        });
       }

The above code takes the result and converts it to the format I mentioned above. This should be solving your problem. However, I wasn't fully able to reproduce your input as it wasn't given.

edited Mar 30, 2018 at 12:20

answered Mar 30, 2018 at 11:54

user9420984

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

6 Comments

Sanjay Nakate Over a year ago

its showing only country names refer this link image ibb.co/ebnJN7

user9420984 Over a year ago

My apologies, I forgot some syntax. I updated my answer and now it should show the data points in different series.

Sanjay Nakate Over a year ago

still not showing logs:- (5) [{…}, {…}, {…}, {…}, {…}] 0 : data : ["6"] name : "Japan" _colorIndex : 0 _symbolIndex : 0 proto : Object 1 : data : ["2"] name : "New Zealand" _colorIndex : 1 _symbolIndex : 1 proto : Object

user9420984 Over a year ago

@SanjayNakate The data : ["6"] part makes me think the results have been parsed as a string instead of integer. Is it stored within the Result object as String or integer?

Sanjay Nakate Over a year ago

check this image ibb.co/mnHM9n , after parse its showing data like this but it's showing wrong var fte = { name: Result[i].COUNTRY_NAME, data: JSON.parse("[" + Result[i].MONTHLY_TOTAL_FTE + "]") //[Result[i].MONTHLY_TOTAL_FTE] };

|

Collectives™ on Stack Overflow

How to use for loop array to add series dynamically for line chart

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related