Create custom data series in C# to integrate with Angular Highcharts

I am currently working on creating a series for my box-plot chart in C# that I will be using in an Angular application. I have set the TSType attribute on the classes to convert them into TypeScript files, but I am struggling with matching the class structure to the TypeScript structure and initializing the data, name, and color due to compile-time errors.

The TypeScript structure I am trying to achieve is as follows:

 this.series = [{
            name: 'Captive Options',
            color: "#5D63D3",
            data: [
                {
                    high: 1381733.354653,
                    low: 1375002.43018757,
                    median: 1378397.06388383,
                    q1: 1377657.3051449,
                    q3: 1379137.30789384
                }]
        }, {
            name: 'Self Insurance Option',
            color: "#FFB81C",
            data: [{
                high: 31571.3633337259,
                low: 25798.8488509699,
                median: 28811.9158552374,
                q1: 28152.937211967,
                q3: 29440.3428303377
            }]
        }];

C# code snippet:

[TsType]
    public class BoxPlotSeries
    {
        public string Color { get; set; }
        public string Name { get; set; }

        public class Data
        {
            public decimal Low { get; set; }
            public decimal Q1 { get; set; }
            public decimal Median { get; set; }
            public decimal Q3 { get; set; }
            public decimal High { get; set; }
        }
    }

[TsType]
    public class EvaResults
    {
        public int[] CapitalViewYear { get; set; }
        // Other properties...

        public SeriesGeneric<BoxPlotSeries> ChartSeries
        {
            get
            {
                BoxPlotSeries captiveViewSeriesData = null;
                // Initialize captiveViewSeriesData

                BoxPlotSeries parentViewSeriesData = null;
                // Initialize parentViewSeriesData
                
                return new SeriesGeneric<BoxPlotSeries>
                {
                    Data = new List<BoxPlotSeries> { captiveViewSeriesData, parentViewSeriesData }
                };
            }
        }
    }

If you have any suggestions or corrections, please let me know!

Answer №1

To incorporate a property of the Data class, you need to include public Data data { get; set; }

public class BoxPlotSeries
    {
        public string color { get; set; }
        public string name { get; set; }
        public Data data { get; set; }

        public class Data
        {
            public decimal Low { get; set; }

            public decimal Q1 { get; set; }

            public decimal Median { get; set; }

            public decimal Q3 { get; set; }

            public decimal High { get; set; }
        }
    }

Make sure to populate each instance of BoxPlotSeries and insert it into List<BoxPlotSeries>

IMPLEMENTATION UPDATE

 //Declaration
  captiveViewSeriesData = new List<BoxPlotSeries>();

 //Initialization
  //Iterate through each item 
   BoxPlotSeries obj = new BoxPlotSeries();
   obj.color="#FF00FF";
   obj.name="Peter";   
   obj.data = new Data();
   obj.data.Low = 0.5;
   obj.data.Q1= 0.5;  
   obj.data.Median= 0.5;
   obj.data.Q3 = 0.5;
   obj.data.High = 0.5;
   captiveViewSeriesData.Add(obj);
  // Loop ends here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a click event for a button within a repeater control: A step-by-step guide

Hey there! I am currently working on a social networking service using asp.net/c#. I've encountered some issues with accepting friend requests. To display these friend requests, I'm using a repeater control that has confirm and reject buttons. Wh ...

The element I am specifying is not being waited for by WebDriverWait

I'm facing a challenge where I need my code to pause until a specific element appears before proceeding to extract text from it. When I manually step through the code and give enough time for the element to show up, everything works fine. However, whe ...

What could be the issue with this C# GridView code snippet?

I am facing an issue with a GridView that contains checkboxes. When I try to select a checkbox, I need to retrieve the values from that specific row. The problem lies in the fact that the chk variable in my C# code never evaluates to "true," preventing the ...

A script object must only permit one property at a time

I am unfamiliar with TypeScript and I have an object named obj with 3 properties: a, b, c. However, it is important to note that b and c cannot exist together in the same object. So, my object will either be: obj = { a: 'xxx', b: 'x ...

Exploring Dependency Injection in Angular2: A Comparison of TypeScript Syntax and @Inject Approach

I'm currently working with Angular2 build 2.0.0-alpha.34 and I can't figure out why I'm getting different results from these two code snippets. The only variation is between using @Inject(TitleService) titleService and titleService: TitleSe ...

Selecting a file using OpenFileDialog in C#

I'm facing a small issue - I'm not sure how to select a file and open it in the Mozilla OpenFileDialog. Initially, I utilize Selenium to open the dialog by clicking "Browse" and then I need to input a filename (I have the exact location via an E ...

Content of the element is visible during the design phase, but does not display during the actual

I am facing an issue with my Menu and TreeView in MainWindow.XAML. During Designtime, both components display their content correctly, but during Runtime they do not: <-- Designtime <-- Runtime Despite the XML data being provided within the actu ...

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

I have developed a straightforward component that displays a colored tag on my HTML: import React, {Component} from 'react'; import "./styles.scss"; interface ColorTagProps { tagType?: string; tagText?: string; } /** * Rende ...

How can you efficiently call multiple services within a single method?

I am working on an asp .net web page (MVC) that displays a list of 10,000 products. To retrieve all the data, I need to call an external web service 20 times, where each call returns 500 records. This has led to slow page loading due to the multiple calls ...

The radio button in Angular 6 is not selected

Below is a code snippet that I am working with: <div class="col-md-6 col-lg-6 col-xl-6 mb-5"> <label>Versioning</label><br/> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" n ...

Angular search filter with pagination feature

Html component <input type="text" class="form-control" placeholder="Search" (change)="searchText($event)"/> <li *ngFor="let list of this.lists | paginate: { itemsPerPage: count, currentPage: p,totalIt ...

Is there a specific typescript type that can be used for an SVG document that is embedded within an HTML object?

I need to embed an SVG object in my HTML code using the following syntax: <object id='mapObject' type="image/svg+xml" data="assets/maps/drawing.svg"> </object> After embedding the SVG object, I want to access it from my TypeScript c ...

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Struggling to align the types between a Google address autocomplete and a React-Bootstrap form, specifically for the ref. class ProfileForm extends React.Component<PropsFromRedux, ProfileFormState> { private myRef = React.createRef<FormContro ...

Troubleshooting error when using " ' " in asp.net for data insertion

Currently, I am encountering an issue while inserting data into a .mdf database via a webpage. The problem arises when I insert words containing the apostrophe symbol " ' ", as it triggers an exception. I attempted to escape the apostrophe using &bsol ...

node.js + typescript How can we access instances from methods?

Following a server rebuild, the compiler creates an instance in the included API controller as shown below: NewController.ts import express = require("express"); import INew = require("../interface/INew"); import New ...

Load App Configurations in .NET Dynamically According to URL

In my venture to develop a business application in .NET using MVC4, I am facing the challenge of catering to multiple corporate customers, each with their own distinct branding elements such as stylesheets and logo images. The user interface of the applica ...

Utilizing req.session in an Express application with Angular (written in TypeScript) when deploying the backend and frontend separately on Heroku

I'm currently facing an issue where I am unable to access req.session from my Express app in Angular. Both the backend and frontend are deployed separately on Heroku. I have already configured CORS to handle HTTP requests from Angular to my Express ap ...

Is it true that in Android, DataInputStream only receives a maximum of 2048 bytes of data?

Sending 22000 bytes of data from a C#.Net application on a PC (server side) to an Android device (client side) via Wi-Fi is resulting in only 2048 bytes showing up in the dataInputStream on the Android device. dataInputStream = new DataInputStream(workerS ...

Is there a way for me to retrieve an element from a IReadOnlyCollection using its index position?

As I work with Selenium, I am utilizing the FindElements function to obtain an element that implements the IReadOnlyCollection interface. However, I am facing an obstacle when trying to iterate through the list because it appears that IReadOnlyCollection d ...

Unpredictable actions arise when utilizing `never` to render a field as non-optional if another is provided

Can you help me understand why TypeScript behaves differently when defining entities using types directly versus returning them from functions? type Entity = | { text: string; color?: never; icon?: never } | { text: string; color: string; icon?: string ...