Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
}
data.push({ date: new Date(2018, 0, i + 1), value: visits });
previousValue = visits;
}
chart.data = data;
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.strokeWidth = 2;
series.tooltipText = "{valueY} {valueY.change}";
// set stroke property field
series.propertyFields.stroke = "color";
chart.cursor = new am4charts.XYCursor();
let scrollbarX = new am4core.Scrollbar();
chart.scrollbarX = scrollbarX;
columnTemplate.filters.push(desaturateFilter);
// first way - get properties from data. but can only be done with columns, as they are separate objects.
columnTemplate.propertyFields.strokeDasharray = "stroke";
columnTemplate.propertyFields.fillOpacity = "opacity";
// add some cool saturation effect on hover
let desaturateFilterHover = new am4core.DesaturateFilter();
desaturateFilterHover.saturation = 1;
let hoverState = columnTemplate.states.create("hover");
hoverState.transitionDuration = 2000;
hoverState.filters.push(desaturateFilterHover);
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.categoryX = "year";
lineSeries.dataFields.valueY = "income";
lineSeries.tooltipText = "income: {valueY.value}";
lineSeries.sequencedInterpolation = true;
lineSeries.defaultState.transitionDuration = 1500;
lineSeries.stroke = chart.colors.getIndex(11);
lineSeries.fill = lineSeries.stroke;
lineSeries.strokeWidth = 2;
// second way - add axis range.
let lineSeriesRange = categoryAxis.createSeriesRange(lineSeries);
lineSeriesRange.category = "2018";
lineSeriesRange.endCategory = "2019";
lineSeriesRange.contents.strokeDasharray = "3,3";
lineSeriesRange.locations.category = 0.5;
valueAxis.tooltip.disabled = true
valueAxis.zIndex = 2
valueAxis.renderer.baseGrid.disabled = true
valueAxis.renderer.inside = true
// height of axis
valueAxis.height = am4core.percent(80)
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
let series = chart.series.push(new am4charts.LineSeries())
series.dataFields.dateX = 'timestamp'
series.dataFields.valueY = 'price'
series.tooltipText = '{valueY.value}'
series.name = 'Price'
series.yAxis = valueAxis
series.strokeWidth = 1
series.stroke = am4core.color('#409EFF')
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis())
valueAxis2.tooltip.disabled = true
valueAxis2.renderer.inside = true
// height of axis
valueAxis2.height = am4core.percent(20)
valueAxis2.zIndex = 1
// this makes gap between panels
valueAxis2.marginTop = 20
}
data.push({ date: new Date(2018, 0, i + 1), value: visits });
previousValue = visits;
}
chart.data = data;
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.strokeWidth = 2;
series.tooltipText = "{valueY} {valueY.change}";
// set stroke property field
series.propertyFields.stroke = "color";
chart.cursor = new am4charts.XYCursor();
let scrollbarX = new am4core.Scrollbar();
chart.scrollbarX = scrollbarX;
dateAxis.renderer.minGridDistance = 30;
dateAxis.dateFormats.setKey("second", "ss");
dateAxis.periodChangeDateFormats.setKey("second", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("minute", "[bold]h:mm a");
dateAxis.periodChangeDateFormats.setKey("hour", "[bold]h:mm a");
dateAxis.renderer.inside = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.interpolationDuration = 500;
valueAxis.rangeChangeDuration = 500;
valueAxis.renderer.inside = true;
valueAxis.renderer.minLabelPosition = 0.05;
valueAxis.renderer.maxLabelPosition = 0.95;
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.interpolationDuration = 500;
series.defaultState.transitionDuration = 0;
series.tensionX = 0.8;
chart.events.on("datavalidated", () => {
dateAxis.zoom({ start: 1 / 15, end: 1.2 }, false, true);
});
dateAxis.interpolationDuration = 500;
dateAxis.rangeChangeDuration = 500;
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
if (interval) {
createSeries(seriesType, seriesValueX, seriesValueY, seriesName, suffix="") {
let series;
if (seriesType === "Column") {
series = this.chart.series.push(new am4charts.ColumnSeries());
} else if (seriesType === "Line") {
series = this.chart.series.push(new am4charts.LineSeries());
} else if (seriesType === "StepLine") {
series = this.chart.series.push(new am4charts.StepLineSeries());
} else if (seriesType === "Pie") {
series = this.chart.series.push(new am4charts.PieSeries());
}
if (seriesType === "Column") {
series.dataFields.categoryX = seriesValueX;
series.dataFields.valueY = seriesValueY;
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
} else if (seriesType === "Pie") {
series.dataFields.value = seriesValueY;
series.dataFields.category = seriesValueX;
series.slices.template.strokeWidth = 2;
let visits = 10;
for (let i = 1; i < 366; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
}
chart.data = data;
let dateAxis = chart.xAxes.push(new charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY.value}";
chart.cursor = new charts.XYCursor();
let scrollbarX = new charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
series.sequencedInterpolation = true;
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;
let series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
series2.sequencedInterpolation = true;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
chart.legend = new am4charts.Legend();
chart.legend.parent = chart.plotContainer;
dateAxis.renderer.labels.template.fillOpacity = 0.4;
dateAxis.renderer.minLabelPosition = 0.03;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.ticks.template.disabled = true;
valueAxis.min = -90;
valueAxis.max = 90;
valueAxis.renderer.minGridDistance = 20;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.line.disabled = true;
valueAxis.tooltip.disabled = true;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.fillOpacity = 0.4;
valueAxis.renderer.inside = true;
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "time";
lineSeries.tooltipText = "{valueY.workingValue}%";
lineSeries.stroke = am4core.color("#3f2698");
lineSeries.tooltip.background.fillOpacity = 0;
lineSeries.tooltip.autoTextColor = false;
lineSeries.tooltip.label.fill = am4core.color("#ffffff");
lineSeries.tooltip.filters.clear();
lineSeries.tooltip.pointerOrientation = "vertical";
lineSeries.strokeWidth = 2;
lineSeries.tensionX = 0.7;
let negativeRange = valueAxis.createSeriesRange(lineSeries);
negativeRange.value = 0;
negativeRange.endValue = - 100;
negativeRange.contents.stroke = am4core.color("#84279a");
valueAxis.tooltip.disabled = true;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 3000;
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;
let series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
series2.sequencedInterpolation = true;
series2.defaultState.transitionDuration = 3000;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
chart.legend = new am4charts.Legend();