Trying to combine two amcharts graphs, but getting “Data fields for series are not properly defined.” error

问题

I am trying to combine two graphs of amcharts into one including the slider. But I am getting the "Data fields for series are not properly defined." error.

These are the separate fiddle code for each graphs.

FIDDLE

FIDDLE

And this is what I want to achieve.

This is my code:

am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "mm:ss";

var colorSetAgent = new am4core.ColorSet();
colorSetAgent.saturation = 0.4;

var colorSetCustomer = new am4core.ColorSet();
colorSetCustomer.saturation = 0.4;

chart.data = [ {
  "category": "Module #1",
  "start": "0",
  "end": "10",
  "color": colorSetAgent.getIndex(2),
  "task": "Agent",
  "value": 4500
}, {
  "category": "Module #1",
  "start": "12",
  "end": "17",
  "color": colorSetCustomer.getIndex(1),
  "task": "Customer",
  "value": 2690
}, {
  "category": "Module #1",
  "start": "25",
  "end": "38",
  "color": colorSetAgent.getIndex(2),
  "task": "Agent",
  "value": 3370
}, {
  "category": "Module #1",
  "start": "42",
  "end": "50",
  "color": colorSetCustomer.getIndex(1),
  "task": "Customer",
  "value": 4510
}];

chart.dateFormatter.dateFormat = "ss";
chart.dateFormatter.inputDateFormat = "ss";

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "second" };
dateAxis.renderer.tooltipLocation = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

function createSeries(field, name) {
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = field;
    series.dataFields.dateX = "end";
    series.name = name;
    series.tooltipText = "{dateX}: [b]{valueY}[/]";
    series.strokeWidth = 2;

    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.stroke = am4core.color("#fff");
    bullet.circle.strokeWidth = 2;
}

createSeries("value", "Series #1");

chart.cursor = new am4charts.XYCursor();

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.height = am4core.percent(70);
series1.columns.template.tooltipText = "{task}";

series1.dataFields.openDateX = "start";
series1.dataFields.dateX = "end";
series1.dataFields.categoryY = "category";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke = "color";
series1.columns.template.strokeOpacity = 1;

chart.scrollbarX = new am4core.Scrollbar();

This is my fiddle, but I am getting "Data fields for series are not properly defined." error. Kindly help me out here.

UPDATE: After kelvin's suggestion, I am not getting error any more, but now the both charts are integrated into one chart. Like this:

Updated JSFIDDLE

UPDATE: Now, after the demo link provided by kelvin, my chart looks like this:

Update JSFIDDLE

来源：https://stackoverflow.com/questions/61682646/trying-to-combine-two-amcharts-graphs-but-getting-data-fields-for-series-are-n

标签

javascript

amcharts4