Dynamic add charts based on a factory pattern

I want to add dynamically charts to a widget from a combobox. I have used the factory pattern to achieve this. This is the code for the backend:

 public interface ICharts
        string chartType ();

 public class ChartsFactory
    public ICharts GraphType(ChartsType chartype)
        switch (chartype)
            case ChartsType.AREA:
                return new Area();
            case ChartsType.BAR:
                return new Bar();
            case ChartsType.HORIZONBAR:
                return new HorizonBar();
            case ChartsType.HEATMAP:
                return new Heatmap();
            case ChartsType.PIE:
                return new Pie();
                throw new ArgumentOutOfRangeException();

This is my combobox on the frontend and I used the angular material for it:

        <label>Type graph</label>
        <md-select ng-model="charttype">
            <md-option value="Bar">Bar</md-option>
            <md-option value="Area">Area</md-option>
            <md-option value="Heatmap">Heatmap</md-option>
            <md-option value="Pie">Pie</md-option>
            <md-option value="Horizonbar">Horizonbar</md-option>

When I choose Pie it must draw a pie chart in the widget. The problem is now what is the best way to draw a chart? I was thinking about various solution like call javascript code in C# but I don’t think this is a clean way.

This is a example of a chart class:

public class Area : ICharts
    public string chartType()
        throw new NotImplementedException();

I was thinking about for each graph a java script file and call in the chart type method.

Can someone point me in the right direction what the best way to achieve this?

I am using the Highcharts library for the charts.

Kind regards

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.