CODEWITHSUNDEEP
javascriptamchartsseriesamcharts4
TommyD
TommyD

Reputation: 1043

Amcharts grouping / creating series by property

I am using Amchart v4 and have the folowing data.

[

  {
    "date": 1583419378000,
    "id": "A",
    "value": "76"
  },
  {
    "date": 1583419378000,
    "id": "B",
    "value": "72"
  },
  {
    "date": 1583419378000,
    "id": "C",
    "value": "908"
  },
  {
    "date": 1583419379000,
    "id": "A",
    "value": "44"
  },
  {
    "date": 1583419379000,
    "id": "B",
    "value": "704"
  },
  {
    "date": 1583419379000,
    "id": "C",
    "value": "918"
  },
]

The x-axis is the date (timestamp) and the y-axis is the value. I want to create 3 lines on my line chart using the id.

Is there a way to group by id to get 3 lines? I only have one 'series' at the moment and it produces one line with all the data?

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;

 chart.yAxes.push(new am4charts.ValueAxis());

// Create series
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.name = "id";
series.dataFields.dateX = "date";
series.dataFields.category = "id";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";



chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;

I have tried series.dataFields.category = "id";

Upvotes: 0

Views: 586

Answers (1)

xorspark
xorspark

Reputation: 16012

You need to create separate series for each line you want to display. There isn't a way for the chart to automatically create grouped series for you.

As for handling the data, you have two options:

1) Manually group your data by date but make separate value fields for each id:

chart.data =[
  {
    "date": 1583419378000,
    "valueA": "76",
    "valueB": "72",
    "valueC": "908"
  },
  // ... etc
];

//create each series and point to each individual value:

seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "valueA";
series.dataFields.dateX = "date";
seriesA.name = "A"; // Note you have to specify the name directly. You can't map by a property.
// ... repeat

2) Manually create separate data arrays based on ID and assign the arrays directly to the series instead of the chart:

// assumes your data is in a variable called "data"
seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "value";
seriesA.dataFields.dateX = "date";
seriesA.name = "A"; 
seriesA.data = data.filter(item => item.id == 'A');
// repeat for each id

Upvotes: 0

Related Questions