Skip to content

Visualizations

Brian Lagunas edited this page Jul 26, 2022 · 3 revisions

Area

document.Visualizations.Add(new AreaChartVisualization("Area", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Bar

document.Visualizations.Add(new BarChartVisualization("Bar", excelDataSourceItem)
                .SetLabel("Date").SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Bubble

document.Visualizations.Add(new BubbleVisualization("Bubble", excelDataSourceItem)
                .SetLabel("CampaignID").SetXAxis("Budget").SetYAxis("Spend").SetRadius("Traffic"));

Bullet Graph

document.Visualizations.Add(new BulletGraphVisualization("Bullet Graph", excelDataSourceItem).SetLabel("CampaignID").SetValue("Spend").SetTarget("Budget")
                .ConfigureSettings(setting =>
                {
                    setting.ValueComparisonType = ValueComparisonType.Number;
                    setting.UpperBand.Value = 72000;
                    setting.MiddleBand.Value = 65000;
                }));

Candlestick

document.Visualizations.Add(new CandleStickVisualization("Candlestick", financialDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Day })
                .SetOpen("Open")
                .SetHigh("High")
                .SetLow("Low")
                .SetClose("Close"));

Choropleth

document.Visualizations.Add(new ChoroplethVisualization("Choropleth", revenueDataSourceItem)
                .SetMap(Maps.NorthAmerica.UnitedStates.States.AllStates)
                .SetLocation("State")
                .SetValue("Revenue")
                .ConfigureSettings(settings =>
                {
                    settings.ColorIndex = 5;
                    settings.ColorStyle = MapColorStyle.SingleColor;
                    settings.LabelStyle = MapLabelStyle.Values;
                }));

Circular Gauge

document.Visualizations.Add(new CircularGaugeVisualization("Circular", excelDataSourceItem).SetLabel("Budget").SetValue("Spend")
                .ConfigureSettings(settings =>
                {
                    settings.MiddleBand.Value = 30;
                }));

Column

document.Visualizations.Add(new ColumnChartVisualization("Column", excelDataSourceItem)
                .SetLabel("Date").SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Combo

document.Visualizations.Add(new ComboChartVisualization("Combo", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetChart1Value("Spend")
                .SetChart2Value("Budget")
                .ConfigureSettings(settings =>
                {
                    settings.Chart1Type = ComboChartType.Column;
                    settings.Chart2Type = ComboChartType.Line;
                    settings.ShowRightAxis = false;
                    settings.StartColorIndex = 5;
                }));

Custom

document.Visualizations.Add(new CustomVisualization("Custom", excelDataSourceItem)
                .SetUrl("https://dl.infragistics.com/reportplus/diy/HelloWorld-Desktop-EN.html")
                .SetRows("Territory", "CampaignID")
                .SetValues("Spend", "Budget"));

Doughnut

document.Visualizations.Add(new DoughnutChartVisualization("Doughnut", excelDataSourceItem)
                .SetLabel("Territory").SetValue("Conversions")
                .ConfigureSettings(settings =>
                {
                    settings.SliceLabelDisplay = LabelDisplayMode.ValueAndPercentage;
                    settings.StartPosition = 90;
                }));

Funnel

document.Visualizations.Add(new FunnelChartVisualization("Funnel", excelDataSourceItem)
                .SetLabel("Territory")
                .SetValue("Conversions")
                .ConfigureSettings(settings =>
                {
                    settings.SliceLabelDisplay = LabelDisplayMode.Percentage;
                }));

Grid

document.Visualizations.Add(new GridVisualization("Grid", excelDataSourceItem)
                .SetColumns("Territory", "Conversions", "Spend"));

Image

document.Visualizations.Add(new ImageVisualization("Image", excelDataSourceItem).SetUrl("Territory"));

KPI vs Target

document.Visualizations.Add(new KpiTargetVisualization("KPI vs Target", excelDataSourceItem).SetDate("Date").SetValue("Spend").SetTarget("Budget")
                .ConfigureSettings(settings =>
                {
                    settings.DifferenceMode = IndicatorDifferenceMode.ValueAndPercentage;
                    settings.GoalPeriod = KpiGoalPeriod.ThisYear;
                }));

KPI vs Time

document.Visualizations.Add(new KpiTimeVisualization("KPI vs Time", excelDataSourceItem).SetDate("Date").SetValue("Traffic")
                .ConfigureSettings(settings =>
                {
                    settings.DifferenceMode = IndicatorDifferenceMode.ValueAndPercentage;
                    settings.TimePeriod = KpiTimePeriod.MonthToDatePreviousMonth;
                }));

Linear Gauge

document.Visualizations.Add(new LinearGaugeVisualization("Linear", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month }).SetValue("Spend")
                .ConfigureSettings(settings =>
                {
                    settings.ValueComparisonType = ValueComparisonType.Number;
                    settings.UpperBand.Value = 10000;
                    settings.MiddleBand.Value = 5000;
                }));

Line

document.Visualizations.Add(new LineChartVisualization("Line", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValue("Conversions"));

OHLC

document.Visualizations.Add(new OHLCVisualization("OHLC", financialDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Day })
                .SetOpen("Open")
                .SetHigh("High")
                .SetLow("Low")
                .SetClose("Close"));

Pie

document.Visualizations.Add(new PieChartVisualization("Pie", excelDataSourceItem)
                .SetLabel("Territory").SetValue("Conversions")
                .ConfigureSettings(settings =>
                {
                    settings.SliceLabelDisplay = LabelDisplayMode.Value;
                }));

Pivot

document.Visualizations.Add(new PivotVisualization("Pivot", excelDataSourceItem)
                .SetRow("Territory").SetValue("New Seats").SetColumn("CampaignID")
                .ConfigureSettings(settings =>
                {
                    settings.ShowGrandTotals = true;
                }));

Radial

document.Visualizations.Add(new RadialVisualization("Radial", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Spend", "Budget"));

Scatter Map

document.Visualizations.Add(new ScatterMapVisualization("Scatter Map", csvDataSourceItem)
                .SetMap(Maps.NorthAmerica.UnitedStates.States.Illinois)
                .SetLongitude("X")
                .SetLatitude("Y")
                .SetLabel("School_Nm")
                .SetColorByValue(new NumberDataField("Grades") { AggregationType = AggregationType.Avg })             
                .ConfigureSettings(settings =>
                {
                    settings.ColorIndex = 5;
                    settings.ColorMode = MapColorMode.ConditionalFormatting;
                    
                    settings.ConditionalFormatting.ValueComparisonType = ValueComparisonType.Percentage;
                    settings.ConditionalFormatting.UpperBand.Value = 90;
                    settings.ConditionalFormatting.MiddleBand.Value = 60;
                }));

Scatter

document.Visualizations.Add(new ScatterVisualization("Scatter", excelDataSourceItem)
                .SetLabel("CampaignID").SetXAxis("Budget").SetYAxis("Spend"));

Sparkline

document.Visualizations.Add(new SparklineVisualization("Sparkline", excelDataSourceItem)
                .SetDate("Date")
                .SetValue("Spend")
                .SetCategory("Territory")
                .ConfigureSettings(settings =>
                {
                    settings.ShowLastTwoValues = false;
                    settings.NumberOfPeriods = 10;
                    settings.AggregationType = SparklineAggregationType.Months;
                }));

Spline

document.Visualizations.Add(new SplineChartVisualization("Spline", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Spend", "Budget"));

Spline Area

document.Visualizations.Add(new SplineAreaChartVisualization("Spline Area", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Spend", "Budget"));

Stacked Area

document.Visualizations.Add(new StackedAreaChartVisualization("Stacked Area", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Stacked Bar

document.Visualizations.Add(new StackedBarChartVisualization("Stacked Bar", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Stacked Column

document.Visualizations.Add(new StackedColumnChartVisualization("Stacked Column", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Step Area

document.Visualizations.Add(new StepAreaChartVisualization("Step Area", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Spend", "Budget"));

Step Line

document.Visualizations.Add(new StepLineChartVisualization("Step Line", excelDataSourceItem)
                .SetLabel(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Spend", "Budget"));

Text Box

document.Visualizations.Add(new TextBoxVisualization("TextBox").SetText("This is some text").SetFontSize(FontSize.Large));

Text View

document.Visualizations.Add(new TextViewVisualization("TextView", excelDataSourceItem)
                .SetColumns("Territory", "Conversions", "Spend"));

Text

document.Visualizations.Add(new TextVisualization("Text", excelDataSourceItem).SetLabel("Budget").SetValue("Spend")
                .ConfigureSettings(settings =>
                {
                    settings.ConditionalFormattingEnabled = true;
                    settings.UpperBand.Shape = ShapeType.ArrowUp;
                    settings.MiddleBand.Shape = ShapeType.Dash;
                    settings.LowerBand.Shape = ShapeType.ArrowDown;
                }));

Time Series

document.Visualizations.Add(new TimeSeriesVisualization("Time Series", excelDataSourceItem)
                .SetDate(new DateDataField("Date") { AggregationType = DateAggregationType.Month })
                .SetValues("Paid Traffic", "Organic Traffic", "Other Traffic"));

Tree Map

document.Visualizations.Add(new TreeMapVisualization("Tree Map", excelDataSourceItem)
                .SetLabel("Territory").SetValue("Traffic"));