How to use igniteui-angular-charts - 10 common examples

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 / zoomslider / zoomslider-overview / zoomslider-overview.component.ts View on Github external
const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;

        const series1 = new IgxBubbleSeriesComponent();
        series1.title = "High Income Country";
        series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
        series1.showDefaultTooltip = false;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale1;
        series1.markerType = MarkerType.Circle;
        series1.xAxis = xAxis;
        series1.yAxis = yAxis;
        series1.tooltipTemplate = this.seriesTooltip;

        const series2 = new IgxBubbleSeriesComponent();
        series2.title = "Low Income Country";
        series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
        series2.showDefaultTooltip = false;
        series2.xMemberPath = "population";
        series2.yMemberPath = "gdpTotal";
        series2.radiusMemberPath = "gdpPerCapita";
        series2.radiusScale = sizeScale2;
        series2.markerType = MarkerType.Circle;
        series2.xAxis = xAxis;
        series2.yAxis = yAxis;
        series2.tooltipTemplate = this.seriesTooltip;

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

        // chart.markerOutlines = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];
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
public addSeriesWith(locations: any[]) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 4;
        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;
github IgniteUI / igniteui-angular-samples / src / app / maps / geo-map-type-scatter-contour-series / map-type-scatter-contour-series.component.ts View on Github external
public createContourSeries(data: any[]) {
        const brushes = [
            "rgba(32, 146, 252, 0.5)", // semi-transparent blue
            "rgba(14, 194, 14, 0.5)",  // semi-transparent green
            "rgba(252, 120, 32, 0.5)", // semi-transparent orange
            "rgba(252, 32, 32, 0.5)"  // semi-transparent red
        ];

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

        const contourSeries = new IgxGeographicContourLineSeriesComponent();
        contourSeries.dataSource = data;
        contourSeries.longitudeMemberPath = "lon";
        contourSeries.latitudeMemberPath = "lat";
        contourSeries.valueMemberPath = "value";
        contourSeries.fillScale = brushScale;
        contourSeries.tooltipTemplate = this.tooltip;
        contourSeries.thickness = 4;

        this.map.series.add(contourSeries);
    }
}
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
public addSeriesWith(locations: any[]) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 4;
        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;
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-polar-series / data-chart-type-polar-series.component.ts View on Github external
public setSeries(seriesType: string) {
         if (seriesType === "Area") {
            // creating a series with mapping to data columns of wind pattern
            const series1 = new IgxPolarAreaSeriesComponent();
            series1.name = "series1";
            series1.angleMemberPath = "Direction";
            series1.radiusMemberPath  = "BoatSpeed";
            series1.radiusAxis = this.radiusAxis;
            series1.angleAxis = this.angleAxis;
            const series2 = new IgxPolarAreaSeriesComponent();
            series2.name = "series2";
            series2.angleMemberPath = "Direction";
            series2.radiusMemberPath  = "WindSpeed";
            series2.radiusAxis = this.radiusAxis;
            series2.angleAxis = this.angleAxis;

            series1.areaFillOpacity = 1;
            series2.areaFillOpacity = 1;
            series1.markerType = MarkerType.Circle;
            series2.markerType = MarkerType.Circle;
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-polar-series / data-chart-type-polar-series.component.ts View on Github external
public setSeries(seriesType: string) {
         if (seriesType === "Area") {
            // creating a series with mapping to data columns of wind pattern
            const series1 = new IgxPolarAreaSeriesComponent();
            series1.name = "series1";
            series1.angleMemberPath = "Direction";
            series1.radiusMemberPath  = "BoatSpeed";
            series1.radiusAxis = this.radiusAxis;
            series1.angleAxis = this.angleAxis;
            const series2 = new IgxPolarAreaSeriesComponent();
            series2.name = "series2";
            series2.angleMemberPath = "Direction";
            series2.radiusMemberPath  = "WindSpeed";
            series2.radiusAxis = this.radiusAxis;
            series2.angleAxis = this.angleAxis;

            series1.areaFillOpacity = 1;
            series2.areaFillOpacity = 1;
            series1.markerType = MarkerType.Circle;
            series2.markerType = MarkerType.Circle;
            series1.title = "Boat Speed";
            series2.title = "Wind Speed";
            this.chart.series.clear();
            this.chart.series.add(series2);
            this.chart.series.add(series1);
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-polar-series / data-chart-type-polar-series.component.ts View on Github external
series2.angleMemberPath = "Direction";
            series2.radiusMemberPath  = "WindSpeed";
            series2.radiusAxis = this.radiusAxis;
            series2.angleAxis = this.angleAxis;

            series1.markerType = MarkerType.Circle;
            series2.markerType = MarkerType.Circle;
            series1.title = "Boat Speed";
            series2.title = "Wind Speed";
            this.chart.series.clear();
            this.chart.series.add(series2);
            this.chart.series.add(series1);

        } else if (seriesType === "Line") {
            // creating a series with mapping to data columns of wind pattern
            const series1 = new IgxPolarLineSeriesComponent();
            series1.name = "series1";
            series1.angleMemberPath = "Direction";
            series1.radiusMemberPath  = "BoatSpeed";
            series1.radiusAxis = this.radiusAxis;
            series1.angleAxis = this.angleAxis;
            const series2 = new IgxPolarLineSeriesComponent();
            series2.name = "series2";
            series2.angleMemberPath = "Direction";
            series2.radiusMemberPath  = "WindSpeed";
            series2.radiusAxis = this.radiusAxis;
            series2.angleAxis = this.angleAxis;

            series1.markerType = MarkerType.Circle;
            series2.markerType = MarkerType.Circle;
            series1.title = "Boat Speed";
            series2.title = "Wind Speed";
github IgniteUI / igniteui-angular-samples / src / app / charts / data-chart / data-chart-type-polar-series / data-chart-type-polar-series.component.ts View on Github external
series2.markerType = MarkerType.Circle;
            series1.title = "Boat Speed";
            series2.title = "Wind Speed";
            this.chart.series.clear();
            this.chart.series.add(series2);
            this.chart.series.add(series1);

        } else if (seriesType === "Line") {
            // creating a series with mapping to data columns of wind pattern
            const series1 = new IgxPolarLineSeriesComponent();
            series1.name = "series1";
            series1.angleMemberPath = "Direction";
            series1.radiusMemberPath  = "BoatSpeed";
            series1.radiusAxis = this.radiusAxis;
            series1.angleAxis = this.angleAxis;
            const series2 = new IgxPolarLineSeriesComponent();
            series2.name = "series2";
            series2.angleMemberPath = "Direction";
            series2.radiusMemberPath  = "WindSpeed";
            series2.radiusAxis = this.radiusAxis;
            series2.angleAxis = this.angleAxis;

            series1.markerType = MarkerType.Circle;
            series2.markerType = MarkerType.Circle;
            series1.title = "Boat Speed";
            series2.title = "Wind Speed";
            this.chart.series.clear();
            this.chart.series.add(series2);
            this.chart.series.add(series1);

        } else if (seriesType === "Scatter") {
            // creating a series with mapping to data columns of wind pattern

igniteui-angular-charts

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

Infragistics(R) Ultimate lice…
Latest version published 2 months ago

Package Health Score

60 / 100
Full package analysis

Popular igniteui-angular-charts functions