Search Posts

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();
            default:
                throw new ArgumentOutOfRangeException();
        }
    }
}

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

 <md-dialog-content>
        <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>
        </md-select>
    </md-dialog-content>

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.