amcharts5 - chart above another chart using same xaxis? - amcharts

Question

I am attempting to show a column chart (or a line chart would work too) above a gannt chart using the same xaxis (timestamp) and having trouble with spacing as well as getting any data to show in the column chart. I don't even know if this is possible to do, but the help docs made it sound like it was so I am more than likely missing quite a few things in the configuration or doing things wrong.
I've created a codepen with what I have so far. The original gannt chart shows fine, then I am able to get the column chart's yaxis to show (although it overlaps the gannt instead of being above it and does not show any data).
Any assistance/explanation with this would be appreciated.
// Set data
var data = [{
"State": "Idle",
"Start": 1424321864000,
"End": 1424321875000,
"Duration": 11
}, {
"State": "Idle",
"Start": 1424322649000,
"End": 1424322669000,
"Duration": 20
}, {
"State": "Idle",
"Start": 1424322970000,
"End": 1424322981000,
"Duration": 11
}, {
"State": "Idle",
"Start": 1424323093000,
"End": 1424323139000,
"Duration": 46
}, {
"State": "Active",
"Start": 1424323250000,
"End": 1424323268000,
"Duration": 18
}, {
"State": "Idle",
"Start": 1424323680000,
"End": 1424323703000,
"Duration": 23
}];
var mousekeys = [{
"Timestamp": 1424318400000,
"Clicks": "20",
"Keypresses": "30"
}];
/**
* ---------------------------------------
* This demo was created using amCharts 5.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v5/
* ---------------------------------------
*/
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
//font size theme
var myTheme = am5.Theme.new(root);
myTheme.rule("Label").setAll({
fontSize: 12
});
root.setThemes([
am5themes_Animated.new(root),
myTheme
]);
root.locale = am5locales_en_US;
//chartReg['chart'].utc = true; //force chart to show in UTC instead of device timezone
root.timezone = am5.Timezone.new('UTC'); //user timezone
//duration format
root.durationFormatter.setAll({
baseUnit: "second",
durationFormat: "hh'h' mm'm' ss's'"
});
//create chart
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: false,
wheelY: false,
layout: root.verticalLayout,
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
paddingTop: 0,
paddingRight: 20,
paddingBottom: 20,
paddingLeft: 10,
}));
//zoom button
//chart.zoomOutButton.setAll({
// forceHidden: true, //disables zoom button
//});
chart.zoomOutButton.get("background").setAll({
fill: am5.color("#BDBDBD"),
});
chart.zoomOutButton.get("background").states.create("hover", {}).setAll({
fill: am5.color("#8a8a8a"),
});
chart.zoomOutButton.get("background").states.create("down", {}).setAll({
fill: am5.color("#707070"),
});
chart.zoomOutButton.get("background").states.create("active", {}).setAll({
fill: am5.color("#707070"),
});
//create axes
var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
text: "State",
fontWeight: "500",
height: am5.percent(70),
categoryField: "State",
renderer: am5xy.AxisRendererY.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
}));
var yAxis2 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
text: "Clicks",
fontWeight: "500",
height: am5.percent(30),
min: 0, //min 'hint', but not forced
//strictMinMax: true, //forces the min/max
//extraMax: 0.1, //extra 10% to the value range which acts as 'padding' to the yaxis
renderer: am5xy.AxisRendererY.new(root, {})
}));
//the order is top to bottom ends up bottom to top on the chart
yAxis.data.setAll([
{ State: "Idle" },
{ State: "Active" }
]);
//y-axis dash lines
var yRenderer = yAxis.get("renderer");
yRenderer.grid.template.setAll({
strokeDasharray: [6]
});
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "second", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
tooltipDateFormat: "EEE, MMM dd # h:mm:ss a"
}));
//x-axis dash lines
var xRenderer = xAxis.get("renderer");
xRenderer.grid.template.setAll({
strokeDasharray: [6],
});
//series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "Start",
valueXField: "End",
categoryYField: "State",
sequencedInterpolation: true,
tooltip: am5.Tooltip.new(root, {
//labelText: "[bold {Color} fontSize: 16px]{State}[/]\n[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
labelText: "[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
getFillFromSprite: false
})
}));
series.get("tooltip").get("background").setAll({
fill: am5.color("#ffffff"),
fillOpacity: 1,
strokeWidth: 2,
stroke: am5.color("#bbbbbb"),
});
//series columns
series.columns.template.setAll({
fillOpacity: 1,
stroke: 0,
strokeWidth: 0, //doesn't seem to work use 'stroke:0'
tooltipText: "{State}:\n[bold]{openValueX}[/] - [bold]{valueX}[/]"
});
series.columns.template.adapters.add("fill", function (text, target, key) {
//console.log(target);
//have to check for empty
//if(target.dataItem) {
if(target.dataItem.dataContext.State == "Active") {
return am5.color("#7bc07b"); //active
} else {
return am5.color("#55bfe6"); //idle
}
//} else {
// return null;
//}
});
//series
var series2 = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Clicks",
fill: am5.color("#679fd0"),
xAxis: xAxis,
yAxis: yAxis2,
valueYField: "Clicks",
valueXField: "Timestamp",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}",
getFillFromSprite: false
})
}));
series2.get("tooltip").get("background").setAll({
fill: am5.color("#ffffff"),
fillOpacity: 1,
strokeWidth: 2,
stroke: am5.color("#bbbbbb"),
});
//series columns
series2.columns.template.setAll({
fillOpacity: 1,
stroke: 0,
strokeWidth: 0, //doesn't seem to work use 'stroke:0'
});
series2.get("tooltip").label.adapters.add("text", function (text, target, key) {
//console.log(target);
//have to check for empty
if(target.dataItem) {
return "Total : [bold]{Clicks}[/]\nTimestamp : [bold]{Timestamp}[/]";
} else {
return null;
}
});
//title
var title = chart.children.unshift(am5.Label.new(root, {
fontSize: 12,
textAlign: "left",
x: am5.percent(0),
y: am5.percent(0),
marginTop: 0,
marginRight: 0,
marginBottom: 30,
marginLeft: 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
text: "some label"
}));
//cursor
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
snapToSeries: [ series ],
snapToSeriesBy: "x",
behavior: "zoomX"
}));
cursor.lineX.set("visible", false);
cursor.lineY.set("visible", false);
//formatting
series.data.processor = am5.DataProcessor.new(root, {
dateFields: ["Start", "End"],
dateFormat: "xxxxxxxxxxxxx"
});
//formatting
series2.data.processor = am5.DataProcessor.new(root, {
numericFields: ["Clicks"],
dateFields: ["Timestamp"],
dateFormat: "xxxxxxxxxxxxx"
});
//scrollbar
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal",
marginTop: 0,
marginRight: 0,
marginBottom: 30,
marginLeft: 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
}));
//exporting
exporting = am5plugins_exporting.Exporting.new(root, {
dataSource: data,
dataFields: {
State: 'State', Start: 'Start', End: 'End', Duration: 'Duration'
},
dateFields: ["Start", "End"],
dateFormat: "MM/dd/yyyy hh:mm:ss a",
durationFields: ["Duration"],
durationFormat: "hh'h' mm'm' ss's'",
filePrefix: 'User Activity'
});
//add data
series.data.setAll(data);
series2.data.setAll(mousekeys);
//make stuff animate on load
series.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);

Answer 1

yAxis and yAxis2 are not stacked. You have to be more explicit and add this line of code:
chart.leftAxesContainer.set("layout", root.verticalLayout);
If you want to place your column chart above, you need to push yAxis2 before yAxis or use unshift():
var yAxis2 = chart.yAxes.unshift(am5xy.ValueAxis.new(root, {
// ...
}));
I put your code below with these two little modifications:
// Set data
var data = [{
"State": "Idle",
"Start": 1424321864000,
"End": 1424321875000,
"Duration": 11
}, {
"State": "Idle",
"Start": 1424322649000,
"End": 1424322669000,
"Duration": 20
}, {
"State": "Idle",
"Start": 1424322970000,
"End": 1424322981000,
"Duration": 11
}, {
"State": "Idle",
"Start": 1424323093000,
"End": 1424323139000,
"Duration": 46
}, {
"State": "Active",
"Start": 1424323250000,
"End": 1424323268000,
"Duration": 18
}, {
"State": "Idle",
"Start": 1424323680000,
"End": 1424323703000,
"Duration": 23
}];
var mousekeys = [{
"Timestamp": 1424318400000,
"Clicks": "20",
"Keypresses": "30"
}];
/**
* ---------------------------------------
* This demo was created using amCharts 5.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v5/
* ---------------------------------------
*/
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
//font size theme
var myTheme = am5.Theme.new(root);
myTheme.rule("Label").setAll({
fontSize: 12
});
root.setThemes([
am5themes_Animated.new(root),
myTheme
]);
root.locale = am5locales_en_US;
//chartReg['chart'].utc = true; //force chart to show in UTC instead of device timezone
root.timezone = am5.Timezone.new('UTC'); //user timezone
//duration format
root.durationFormatter.setAll({
baseUnit: "second",
durationFormat: "hh'h' mm'm' ss's'"
});
//create chart
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: false,
wheelY: false,
layout: root.verticalLayout,
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
paddingTop: 0,
paddingRight: 20,
paddingBottom: 20,
paddingLeft: 10,
}));
chart.leftAxesContainer.set("layout", root.verticalLayout); // <--- HERE
//zoom button
//chart.zoomOutButton.setAll({
// forceHidden: true, //disables zoom button
//});
chart.zoomOutButton.get("background").setAll({
fill: am5.color("#BDBDBD"),
});
chart.zoomOutButton.get("background").states.create("hover", {}).setAll({
fill: am5.color("#8a8a8a"),
});
chart.zoomOutButton.get("background").states.create("down", {}).setAll({
fill: am5.color("#707070"),
});
chart.zoomOutButton.get("background").states.create("active", {}).setAll({
fill: am5.color("#707070"),
});
//create axes
var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
text: "State",
fontWeight: "500",
height: am5.percent(70),
categoryField: "State",
renderer: am5xy.AxisRendererY.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
}));
var yAxis2 = chart.yAxes.unshift(am5xy.ValueAxis.new(root, { // <--- HERE
text: "Clicks",
fontWeight: "500",
height: am5.percent(30),
min: 0, //min 'hint', but not forced
//strictMinMax: true, //forces the min/max
//extraMax: 0.1, //extra 10% to the value range which acts as 'padding' to the yaxis
renderer: am5xy.AxisRendererY.new(root, {})
}));
//the order is top to bottom ends up bottom to top on the chart
yAxis.data.setAll([
{ State: "Idle" },
{ State: "Active" }
]);
//y-axis dash lines
var yRenderer = yAxis.get("renderer");
yRenderer.grid.template.setAll({
strokeDasharray: [6]
});
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "second", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
tooltipDateFormat: "EEE, MMM dd # h:mm:ss a"
}));
//x-axis dash lines
var xRenderer = xAxis.get("renderer");
xRenderer.grid.template.setAll({
strokeDasharray: [6],
});
//series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "Start",
valueXField: "End",
categoryYField: "State",
sequencedInterpolation: true,
tooltip: am5.Tooltip.new(root, {
//labelText: "[bold {Color} fontSize: 16px]{State}[/]\n[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
labelText: "[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '#' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
getFillFromSprite: false
})
}));
series.get("tooltip").get("background").setAll({
fill: am5.color("#ffffff"),
fillOpacity: 1,
strokeWidth: 2,
stroke: am5.color("#bbbbbb"),
});
//series columns
series.columns.template.setAll({
fillOpacity: 1,
stroke: 0,
strokeWidth: 0, //doesn't seem to work use 'stroke:0'
tooltipText: "{State}:\n[bold]{openValueX}[/] - [bold]{valueX}[/]"
});
series.columns.template.adapters.add("fill", function (text, target, key) {
//console.log(target);
//have to check for empty
//if(target.dataItem) {
if(target.dataItem.dataContext.State == "Active") {
return am5.color("#7bc07b"); //active
} else {
return am5.color("#55bfe6"); //idle
}
//} else {
// return null;
//}
});
//series
var series2 = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Clicks",
fill: am5.color("#679fd0"),
xAxis: xAxis,
yAxis: yAxis2,
valueYField: "Clicks",
valueXField: "Timestamp",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}",
getFillFromSprite: false
})
}));
series2.get("tooltip").get("background").setAll({
fill: am5.color("#ffffff"),
fillOpacity: 1,
strokeWidth: 2,
stroke: am5.color("#bbbbbb"),
});
//series columns
series2.columns.template.setAll({
fillOpacity: 1,
stroke: 0,
strokeWidth: 0, //doesn't seem to work use 'stroke:0'
});
series2.get("tooltip").label.adapters.add("text", function (text, target, key) {
//console.log(target);
//have to check for empty
if(target.dataItem) {
return "Total : [bold]{Clicks}[/]\nTimestamp : [bold]{Timestamp}[/]";
} else {
return null;
}
});
//title
var title = chart.children.unshift(am5.Label.new(root, {
fontSize: 12,
textAlign: "left",
x: am5.percent(0),
y: am5.percent(0),
marginTop: 0,
marginRight: 0,
marginBottom: 30,
marginLeft: 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
text: "some label"
}));
//cursor
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
snapToSeries: [ series ],
snapToSeriesBy: "x",
behavior: "zoomX"
}));
cursor.lineX.set("visible", false);
cursor.lineY.set("visible", false);
//formatting
series.data.processor = am5.DataProcessor.new(root, {
dateFields: ["Start", "End"],
dateFormat: "xxxxxxxxxxxxx"
});
//formatting
series2.data.processor = am5.DataProcessor.new(root, {
numericFields: ["Clicks"],
dateFields: ["Timestamp"],
dateFormat: "xxxxxxxxxxxxx"
});
//scrollbar
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal",
marginTop: 0,
marginRight: 0,
marginBottom: 30,
marginLeft: 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
}));
//exporting
exporting = am5plugins_exporting.Exporting.new(root, {
dataSource: data,
dataFields: {
State: 'State', Start: 'Start', End: 'End', Duration: 'Duration'
},
dateFields: ["Start", "End"],
dateFormat: "MM/dd/yyyy hh:mm:ss a",
durationFields: ["Duration"],
durationFormat: "hh'h' mm'm' ss's'",
filePrefix: 'User Activity'
});
//add data
series.data.setAll(data);
series2.data.setAll(mousekeys);
//make stuff animate on load
series.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);
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: 500px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/locales/en_US.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>
<div id="chartdiv"></div>
You can see a column if you use the horizontal scrollbar and go completely to the left. The reason is there:
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "second", count: 1 },
// ...
}));
Your interval is tiny (one second), so your column width is tiny. You have to tweak timeUnit or count in baseInterval if you want a wider column.