Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
637 views
in Technique[技术] by (71.8m points)

javascript - 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.

  1. FIDDLE

enter image description here

  1. FIDDLE

enter image description here

And this is what I want to achieve.

enter image description here

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: enter image description here

Updated JSFIDDLE

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

enter image description here

Update JSFIDDLE

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Try adding series.yAxis = valueAxis; to your createSeries()

Adding this for future refs.

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);

var data = [];
var price = 100;
var quantity = 1000;
for (var i = 0; i < 300; i++) {
    price += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
    quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 1000);
    data.push({ date: new Date(2000, 1, i), price: price, quantity: quantity });
}

var interfaceColors = new am4core.InterfaceColorSet();

chart.data = data;
// the following line makes value axes to be arranged vertically.
chart.leftAxesContainer.layout = "vertical";




// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
//dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;

chart.leftAxesContainer.pixelPerfect = true;
dateAxis.pixelPerfect = true;
dateAxis.renderer.pixelPerfect = true;
dateAxis.renderer.gridContainer.layout = "absolute";

// these two lines makes the axis to be initially zoomed-in
//dateAxis.start = 0.7;
//dateAxis.keepSelection = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
// height of axis
valueAxis.height = am4core.percent(60);
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2,2,2,2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.fontSize = "0.8em"

// uncomment these lines to fill plot area of this axis with some color
valueAxis.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;


var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";




var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;



// height of axis
valueAxis2.height = am4core.percent(40);
valueAxis2.zIndex = 3
// this makes gap between panels
valueAxis2.marginTop = 30;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.renderer.inside = true;
valueAxis2.renderer.labels.template.verticalCenter = "bottom";
valueAxis2.renderer.labels.template.padding(2,2,2,2);
//valueAxis2.renderer.maxLabelPosition = 0.95;
valueAxis2.renderer.fontSize = "0.8em"

// uncomment these lines to fill plot area of this axis with some color
valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(50);
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";

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

var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;

let rectangle = chart.plotContainer.createChild(am4core.Rectangle)
rectangle.fillOpacity = 1;
rectangle.width = am4core.percent(100);
rectangle.fill = am4core.color("#ffffff")
rectangle.isMeasured = false;
rectangle.height = 29;
rectangle.zIndex = 1000;

valueAxis2.events.on("positionchanged", function(){
  rectangle.y = valueAxis2.pixelY - rectangle.pixelHeight - 1;
})
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...