Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
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 = "yyyy-MM-dd HH:mm";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
chart.data = [ {
"category": "Module #1",
"start": "2016-01-01",
"end": "2016-01-14",
"color": colorSet.getIndex(0).brighten(0),
"task": "Gathering requirements"
}, {
"category": "Module #1",
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
let chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.data = [
{
category: "One",
startDate1: "2018-01-01",
endDate1: "2018-03-01"
},
{
category: "One",
startDate1: "2018-04-01",
endDate1: "2018-08-15"
},
{
category: "Two",
startDate2: "2018-03-01",
constructor(chartReference, chartType, colors, domain = '.') {
if (chartType === "XYChart") {
this.chart = am4core.create(chartReference, am4charts.XYChart)
} else if (chartType === "PieChart") {
this.chart = am4core.create(chartReference, am4charts.PieChart);
} else if (chartType === "GaugeChart") {
this.chart = am4core.create(chartReference, am4charts.GaugeChart);
}
this.pointPastValues = new Map();
this.pointCurrentValue = new Map();
this.liveUpdatePointValues = new Map();
this.lastUpdate = 0;
this.liveUpdateInterval = 5000;
this.domain = domain;
let colorPallete = [
am4core.color("#39B54A"),
am4core.color("#69FF7D"),
am4core.color("#166921"),
am4core.color("#690C24"),
catch (e) {
chart.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href="\"https://www.amcharts.com/download/download-v4/\"">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."));
}
chart.projection = new am4maps.projections.Mercator();
chart.padding(0, 20, 0, 20);
chart.minZoomLevel = 0.9;
chart.zoomLevel = 0.9;
chart.maxZoomLevel = 1;
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.include = ["AF"];
var chart1 = am4core.create("hiddenchartdiv", am4maps.MapChart);
chart1.geodata = am4geodata_worldHigh;
chart1.projection = new am4maps.projections.Mercator();
var polygonSeries1 = chart1.series.push(new am4maps.MapPolygonSeries());
polygonSeries1.useGeodata = true;
polygonSeries1.include = ["AF"];
var label = chart.chartContainer.createChild(am4core.Label);
label.x = 100;
label.y = 100;
label.fill = am4core.color("#000000");
label.fontSize = 35;
label.fontWeight = "bold";
label.text = "Afghanistan";
label.fillOpacity = 0.2;
import * as amcharts4 from "@amcharts/amcharts4/core";
import * as charts from "@amcharts/amcharts4/charts";
import AnimatedTheme from "@amcharts/amcharts4/themes/animated";
amcharts4.useTheme(AnimatedTheme);
let chart = amcharts4.create("chartdiv", charts.SankeyDiagram);
chart.data = [
{ from: "A", to: "D", value: 10 },
{ from: "B", to: "D", value: 8 },
{ from: "B", to: "E", value: 4 },
{ from: "C", to: "E", value: 3 },
{ from: "D", to: "G", value: 5 },
{ from: "D", to: "I", value: 2 },
{ from: "D", to: "H", value: 3 },
{ from: "E", to: "H", value: 6 },
{ from: "G", to: "J", value: 5 },
{ from: "I", to: "J", value: 1 },
{ from: "H", to: "J", value: 9 }
];
chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
let chart = am4core.create("chartdiv", am4charts.XYChart);
let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
let yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "weekday";
yAxis.dataFields.category = "hour";
xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30;
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "weekday";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dark);
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
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;
let series = chart.series.push(new am4charts.OHLCSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "close";
series.dataFields.openValueY = "open";
series.dataFields.lowValueY = "low";
series.dataFields.highValueY = "high";
series.tooltipText = "Open:${openValueY.value}\nLow:${lowValueY.value}\nHigh:${highValueY.value}\nClose:${valueY.value}";
import * as amcharts4 from "@amcharts/amcharts4/core";
import * as charts from "@amcharts/amcharts4/charts";
import AnimatedTheme from "@amcharts/amcharts4/themes/animated";
amcharts4.useTheme(AnimatedTheme);
let chart = amcharts4.create("chartdiv", charts.XYChart);
chart.paddingRight = 20;
let data = [];
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;