Add Categories to Highcharts via Loop

Question

I'm trying to add a list of categories as the xAxis for my bar chart using JavaScript and a JSON object. I've thus far had no success as the following code produces the following along the xAxis:

[object Object]
1
2

The JSON object I'm receiving is like this:

0: {Item: "textforyou", Num: 88}
1: {Item: "MoreText", Num: 22}
2: {Item: "SimpleStuff", Num: 85}

I'd like the have the categories on the xAxis look more like this:

textforyou
MoreText
SimpleStuff

This bit of code is where I'm taking my JSON object and trying to get the categories and series data for it.

                $.ajax({
                xhrFields: { withCredentials: true },
                url: areaUrl + "api/Problem/ProblemsYTD",
                success: data => {
                    self.isLoading(false);
                    self.data(data);
                    self.setPlotData(data);
                    self.isLoaded(true);
                },
                error: data => {
                    self.loadingError(true);
                }
            });
        }

        self.setPlotData = (data: any) => {
            var len = data.List.length,
                i;

            var dataCats = new Array();

            for (i = 0; i < len; i++) {
                dataCats.push(
                    { name: data.List[i].Service }
                )
            }

            self.plotDataLabels.push({ data: dataCats });

            var dataItems = [];

            for (i = 0; i < len; i++) {
                dataItems.push(
                    { y: data.List[i].DaysOpen }
                )
            }



            self.plotData.push({ data: dataItems });
        }

Lastly, on the page where the bar chart is being created, this is the command I have for the xAxis category section of the page.

                xAxis: {
                categories: viewModel.plotDataLabels(),
                crosshair: false
            },

I'm able to do this fine for the series data, but I can't seem to get it right for the categories/text. Any help would be appreciated.

EDIT: Per Request, when I console.log ViewModel.plotDataLabels(), I get a single object back with "data: Array[3]". Once I access that array, everything appears as the following

Dropdown 0: Object
Dropdown 1: Object
Dropdown 2: Object
    name: "SimpleStuff"
    __proto__: Object

It seems you are setting the categories to a Single Object and then the numbers "1, 2". console.log your viewModel.plotDataLabels() in your browser to enable us to better help you to figure out what you need to do to have the correct categories present. Check this documentation if you need help as well: api.highcharts.com/highcharts#xAxis.categories — superjisan
I added the console.log results to the end of the question. Basically, yea it seems to be going into a single object, but I'm not sure how to make sure I access each text item within the object for my xAxis categories. if there is a better way, I'm also open to that. — Avegavalencia

superjisan superjisan · Accepted Answer · 2016-06-14T23:22:10

You need to manipulate your ViewModel.plotDatalabels() to ensure you get just the name and not the whole object. This should work, replace your categories value with the following

categories: viewModel.plotDataLabels().map(function(obj){ return obj.name; })

Add Categories to Highcharts via Loop

1 Answers