How to display Dynamic Object Arrays into chart using Anychart.js

Question

What i am trying to do is i want to display a chart based on my dynamic data i used Angular ForEach to loop through all my objects array see my code below:

var parse = JSON.parse(jsondata);

angular.forEach(parse, function (value, key) {
  var dataSet = anychart.data.set(value);
  var chart = anychart.column();
  var series = chart.column(value);
  chart.title("Data Sets: Array of Objects");
  chart.container("container");
  chart.draw();
});

it correctly display the count of my chart but the data of each object array is not showing up see picture below

but if put a static data like this :

var data = [
    {x:"January", value: 12000},
    {x:"February", value:  15000},
    {x:"March", value:  16000},
    {x:"April", value:  14000},
    {x:"May", value:  10000}
  ];

the chart displays correctly.

can anyone help me with this ? any help will greatly appreciated.

AnyChart Support · Accepted Answer · 2019-10-23 03:03:49Z

0

Everything depends on the value content inside the loop. You are applying the value to the series and dataSet as well. If you are using dataSet, you should apply the value to the dataSet, map the data, then apply the mapping to the series. Like this:

  var dataSet = anychart.data.set(value);
  var mapping = dataSet.mapAs({'x': 0, 'value': 1}); // for example
  var chart = anychart.column();
  var series = chart.column(dataSet);

The mapping depends on your data. If the value includes ready-to-use data that matches the default mapping you can apply it directly to the series.

Can you share the value content?

answered Oct 23, 2019 at 3:03

AnyChart Support

3,9201 gold badge12 silver badges17 bronze badges

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

6 Comments

Nicks Over a year ago

Thanks for the response , As you can see the data on my value is the same as the static data . 0: {Description: "Male", COUNT: 100, PERCENTAGE: 20} 1: {Description: "Female", COUNT: 300, PERCENTAGE: 80} 2: {Description: "TOTAL", COUNT: 400, PERCENTAGE: 100}

Nicks Over a year ago

However as what you've said i should map for the proper series and dataSet but i have a dynamic series and dataset ? the scenario is ill be displaying 5 dynamic charts with different Series and DataSet from value data how would be able to achieve this ?

AnyChart Support Over a year ago

"Description", "COUNT" and "PERCENTAGE" fields are not the defaults ones. So, the chart can't recognize the data mapping. You should map manually the data in this case. For details check the sample - playground.anychart.com/fmcq2WKT

AnyChart Support Over a year ago

The chart can work with dynamic data. All you need is to apply new data to the existing dataSet. There's no need to recreate chart/series/mapping or anything else. Simply execute the following when you need: ``` ```

Nicks Over a year ago

thanks for the response again . however if ill do this ? what if ? if the series for my 2nd chart is different from the existing series 'X' that i map/define before in my data set ?

|

AnyChart Support · Accepted Answer · 2019-10-23 09:47:45Z

0

The chart can work with dynamic data. All you need is to apply new data to the existing dataSet, like this:

dataSet.data(newData);

And that's it! There's no need to recreate chart/series/dataSet.

answered Oct 23, 2019 at 9:47

AnyChart Support

3,9201 gold badge12 silver badges17 bronze badges

2 Comments

Nicks Over a year ago

Hi As iv'e try what your suggesting looks like the down side of mapping is you'll be having a default 'x' series and 'value' to get the data for your dataset . however can i ask a favor ? can you create a sample code in playground.anychart that will display two the same chart but different series 'X' and 'value' ? using the code you provide ? which is dataSet.data(newData) greatly appreciated your reply thanks.

AnyChart Support Over a year ago

I'm afraid I didn't understand your requirements. Two identical charts from different data? Or do you want to store different X fields and values fields for two series in one dataset? If you can share the data you want to visualize it will help us a lot. Please, contact us [email protected]

Collectives™ on Stack Overflow

How to display Dynamic Object Arrays into chart using Anychart.js

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related