How to use the @amcharts/amcharts4/core.create function in @amcharts/amcharts4

To help you get started, we’ve selected a few @amcharts/amcharts4 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github amcharts / amcharts4 / dist / es2015 / examples / javascript / gantt-chart / index.js View on Github external
* ---------------------------------------
 * 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",
github amcharts / amcharts4 / dist / es2015 / examples / javascript / date-based-radar / index.js View on Github external
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",
github SCADA-LTS / Scada-LTS / web-components / src / components / charts / BaseChart.js View on Github external
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"),
github amcharts / amcharts4 / dist / es2015 / examples / typescript / morphing-countries / index.ts View on Github external
catch (e) {
	chart.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href="\&quot;https://www.amcharts.com/download/download-v4/\&quot;">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;
github amcharts / amcharts4 / dist / es2015 / examples / simple-sankey-diagram / index.ts View on Github external
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";
github amcharts / amcharts4 / dist / es2015 / examples / javascript / heat-map / index.js View on Github external
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";
github amcharts / amcharts4 / dist / es2015 / examples / javascript / ohlc-chart / index.js View on Github external
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}";
github amcharts / amcharts4 / dist / es2015 / examples / simple-line-chart / index.ts View on Github external
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 &lt; 366; i++) {
	visits += Math.round((Math.random() &lt; 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;