How to use the igniteui-angular-charts/ES5/MarkerType.MarkerType.Circle function in igniteui-angular-charts

To help you get started, we’ve selected a few igniteui-angular-charts 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 IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-binding-shp-points / map-binding-shp-points.component.ts View on Github external
const pop = record.fieldValues.POPULATION;
            if (pop > 0) {
                // each shapefile record has just one point
                const location = {
                    city: record.fieldValues.NAME,
                    latitude: record.points[0][0].y,
                    longitude: record.points[0][0].x,
                    population: pop
                };
                geoLocations.push(location);
            }
        }

        const geoSeries = new IgxGeographicSymbolSeriesComponent();
        geoSeries.dataSource = geoLocations;
        geoSeries.markerType = MarkerType.Circle;
        geoSeries.latitudeMemberPath  = "latitude";
        geoSeries.longitudeMemberPath = "longitude";
        geoSeries.markerBrush = "LightGray";
        geoSeries.markerOutline = "Black";
        geoSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(geoSeries);
    }
}
github IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-type-scatter-bubble-series / map-type-scatter-bubble-series.component.ts View on Github external
sizeScale.maximumValue = 60;

        const brushes = [
            "rgba(14, 194, 14, 0.4)",  // semi-transparent green
            "rgba(252, 170, 32, 0.4)", // semi-transparent orange
            "rgba(252, 32, 32, 0.4)"  // semi-transparent red
        ];

        const brushScale = new IgxValueBrushScaleComponent();
        brushScale.brushes = brushes;
        brushScale.minimumValue = 0;
        brushScale.maximumValue = 30;

        const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
        symbolSeries.dataSource = locations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.radiusScale = sizeScale;
        symbolSeries.fillScale = brushScale;
        symbolSeries.fillMemberPath = "pop";
        symbolSeries.radiusMemberPath = "pop";
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
        symbolSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(symbolSeries);
    }
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-axis-types / data-chart-axis-types.component.ts View on Github external
public initScatterSeries() {
        this.scatterSeries1 = new IgxScatterSeriesComponent();
        this.scatterSeries1.dataSource = this.scatterData;
        this.scatterSeries1.xAxis = this.numericXAxis;
        this.scatterSeries1.yAxis = this.numericYAxis;
        this.scatterSeries1.xMemberPath = "Index";
        this.scatterSeries1.yMemberPath = "SinValue";
        this.scatterSeries1.markerType = MarkerType.Circle;

        this.scatterSeries2 = new IgxScatterSeriesComponent();
        this.scatterSeries2.dataSource = this.scatterData;
        this.scatterSeries2.xAxis = this.numericXAxis;
        this.scatterSeries2.yAxis = this.numericYAxis;
        this.scatterSeries2.xMemberPath = "Index";
        this.scatterSeries2.yMemberPath = "CosValue";
        this.scatterSeries2.markerType = MarkerType.Circle;
    }
github IgniteUI / igniteui-angular-samples / src / app / geo-map / map-binding-data-model / map-binding-data-model.component.ts View on Github external
public createSymbolSeries(flight: any) {
        const geoLocations = [flight.origin, flight.dest ];
        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
        symbolSeries.dataSource = geoLocations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerBrush  = "White";
        symbolSeries.markerOutline = flight.color;
        symbolSeries.thickness = 1;
        symbolSeries.tooltipTemplate = this.pointSeriestemplate;

        this.map.series.add(symbolSeries);
    }
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-overview / data-chart-overview.component.ts View on Github external
public createSeries(data: any, title: string) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 10;
        sizeScale.maximumValue = 60;

        const id = "series" + this.chart.series.count;

        const series1 = new IgxBubbleSeriesComponent();
        series1.name = id;
        series1.title = title;
        series1.markerType = MarkerType.Circle;
        series1.dataSource = data;
        series1.showDefaultTooltip = true;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale;
        series1.xAxis = this.xAxis;
        series1.yAxis = this.yAxis;

        this.chart.series.add(series1);
    }
}
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-category-series / data-chart-type-category-series.component.ts View on Github external
series2.markerType = MarkerType.Circle;
            series2.valueMemberPath = "RUS";
            series2.title = "Russia";
            series2.xAxis = this.xAxis;
            series2.yAxis = this.yAxis;
            series2.thickness = 2;

            this.chart.series.clear();
            this.chart.series.add(series1);
            this.chart.series.add(series2);

        } else if (seriesType === "Spline") {

            const series1 = new IgxSplineSeriesComponent();
            series1.name = "series1";
            series1.markerType = MarkerType.Circle;
            series1.valueMemberPath = "USA";
            series1.title = "USA";
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;
            series1.thickness = 2;

            const series2 = new IgxSplineSeriesComponent();
            series1.name = "series2";
            series2.markerType = MarkerType.Circle;
            series2.valueMemberPath = "RUS";
            series2.title = "Russia";
            series2.xAxis = this.xAxis;
            series2.yAxis = this.yAxis;

            this.chart.series.clear();
            this.chart.series.add(series1);
github IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-type-scatter-symbol-series / map-type-scatter-symbol-series.component.ts View on Github external
public addSeriesWith(locations: any[], brush: string) {
        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
        symbolSeries.dataSource = locations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerBrush  = "White";
        symbolSeries.markerOutline = brush;
        symbolSeries.tooltipTemplate = this.tooltip;
        this.map.series.add(symbolSeries);
    }
}
github IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-custom-tooltips / map-custom-tooltips.component.ts View on Github external
public createSymbolSeries(geoLocations: any[], brush: string) {
        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
        symbolSeries.dataSource = geoLocations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerBrush  = "White";
        symbolSeries.markerOutline = brush;
        symbolSeries.thickness = 1;
        symbolSeries.tooltipTemplate = this.tooltipTemplate;
        this.map.series.add(symbolSeries);
    }
}
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-scatter-series / data-chart-type-scatter-series.component.ts View on Github external
} else if (seriesType === "Spline") {
            const series1 = new IgxScatterSplineSeriesComponent();
            series1.name = "series1";
            series1.title = "Rich Countries";
            series1.markerType = MarkerType.Circle;
            series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
            series1.showDefaultTooltip = true;
            series1.xMemberPath = "population";
            series1.yMemberPath = "gdpTotal";
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;

            const series2 = new IgxScatterSplineSeriesComponent();
            series2.name = "series2";
            series2.title = "Poor Countries";
            series2.markerType = MarkerType.Circle;
            series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
            series2.showDefaultTooltip = true;
            series2.xMemberPath = "population";
            series2.yMemberPath = "gdpTotal";
            series2.xAxis = this.xAxis;
            series2.yAxis = this.yAxis;

            this.chart.series.clear();
            this.chart.series.add(series1);
            this.chart.series.add(series2);

        } else if (seriesType === "Bubble") {
            const sizeScale = new IgxSizeScaleComponent();
            sizeScale.minimumValue = 10;
            sizeScale.maximumValue = 60;

igniteui-angular-charts

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

Infragistics(R) Ultimate lice…
Latest version published 19 days ago

Package Health Score

60 / 100
Full package analysis

Popular igniteui-angular-charts functions