How to Create Box Plot Chart Using ASP.net, C# or Javascript

Question

does anyone know how could I create Box Plot Chart using either ASP.net, C# or JavaScript?

This is what I found online but I am not sure on how to apply it to my case:

Code:

List<String> xValue = new List<String> { "Ala (A)", "Arg (R)", "Asn (N)", "Asp (D)", "Cys (C)", "Gln (Q)", "Glu (E)", "Gly (G)", "His (H)", "Ile (I)", "Leu (L)", "Lys (K)", "Met (M)", "Phe (F)", "Pro (P)", "Ser (S)", "Thr (T)", "Trp (W)", "Tyr (Y)", "Val (V)", "Pyl (O)", "Sec (U)" };
    Chart Chart = new Chart();
    Chart.chart_main.Series.Clear();
    Chart.chart_main.Series.Add("BoxPlotSeries");
    for (Int32 i = 0; i < xValue.Count; i++)
    {
        Chart.chart_main.Series.Add(xValue[i]); 
    }

    for (Int32 i = 0; i < DYL; i++)
    {
        if (Data[i, 0] == null) break;
        Chart.chart_main.Series[xValue[0]].Points.AddY(boxplot_helper(i, Dataslots[0]));
        Chart.chart_main.Series[xValue[1]].Points.AddY(boxplot_helper(i, Dataslots[1]));
        Chart.chart_main.Series[xValue[2]].Points.AddY(boxplot_helper(i, Dataslots[2]));
        Chart.chart_main.Series[xValue[3]].Points.AddY(boxplot_helper(i, Dataslots[3]));
        Chart.chart_main.Series[xValue[4]].Points.AddY(boxplot_helper(i, Dataslots[4]));
        Chart.chart_main.Series[xValue[5]].Points.AddY(boxplot_helper(i, Dataslots[5]));
        Chart.chart_main.Series[xValue[6]].Points.AddY(boxplot_helper(i, Dataslots[6]));
        Chart.chart_main.Series[xValue[7]].Points.AddY(boxplot_helper(i, Dataslots[7]));
        Chart.chart_main.Series[xValue[8]].Points.AddY(boxplot_helper(i, Dataslots[8]));
        Chart.chart_main.Series[xValue[9]].Points.AddY(boxplot_helper(i, Dataslots[9]));
        Chart.chart_main.Series[xValue[10]].Points.AddY(boxplot_helper(i, Dataslots[10]));
        Chart.chart_main.Series[xValue[11]].Points.AddY(boxplot_helper(i, Dataslots[11]));
        Chart.chart_main.Series[xValue[12]].Points.AddY(boxplot_helper(i, Dataslots[12]));
        Chart.chart_main.Series[xValue[13]].Points.AddY(boxplot_helper(i, Dataslots[13]));
        Chart.chart_main.Series[xValue[14]].Points.AddY(boxplot_helper(i, Dataslots[14]));
        Chart.chart_main.Series[xValue[15]].Points.AddY(boxplot_helper(i, Dataslots[15]));
        Chart.chart_main.Series[xValue[16]].Points.AddY(boxplot_helper(i, Dataslots[16]));
        Chart.chart_main.Series[xValue[17]].Points.AddY(boxplot_helper(i, Dataslots[17]));
        Chart.chart_main.Series[xValue[18]].Points.AddY(boxplot_helper(i, Dataslots[18]));
        Chart.chart_main.Series[xValue[19]].Points.AddY(boxplot_helper(i, Dataslots[19]));
        Chart.chart_main.Series[xValue[20]].Points.AddY(boxplot_helper(i, Dataslots[20]));
        Chart.chart_main.Series[xValue[21]].Points.AddY(boxplot_helper(i, Dataslots[21]));     
    }

    Chart.chart_main.Series["BoxPlotSeries"].ChartType = SeriesChartType.BoxPlot;
    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotSeries"] = xValue[0];

    Chart.chart_main.ChartAreas.Add("BoxPlot");
    Chart.chart_main.Series["BoxPlotSeries"].ChartArea = "BoxPlot";

    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotWhiskerPercentile"] = "0";
    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotPercentile"] = "25";
    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotShowAverage"] = "true";
    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotShowMedian"] = "true";
    Chart.chart_main.Series["BoxPlotSeries"]["BoxPlotShowUnusualValues"] = "true";
    Chart.chart_main.Series["BoxPlotSeries"]["MaxPixelPointWidth"] = "15";
    Chart.chart_main.Series["BoxPlotSeries"].BorderWidth = 2;
    Chart.Show();

}

private Double boxplot_helper(Int32 i, Int32 slot)
{
    String Santas = Data[i, slot].Replace('.', ',').TrimEnd('%').Trim();
    Double LittleHelper = Convert.ToDouble(Santas);
    return LittleHelper;

Appreciate if anyone could help me on this, thank you!

Answer 1

Here's an ASP.NET sample:

    <asp:Chart ID="Chart1" runat="server" Width="600px">
        <Series>
            <asp:Series Name="Series1" ChartType="BoxPlot" YValuesPerPoint="6">
                <Points>
                    <asp:DataPoint XValue="1" YValues="10,60,20,50,30,40" />
                    <asp:DataPoint XValue="2" YValues="40,90,50,80,60,70" />
                    <asp:DataPoint XValue="3" YValues="20,70,30,60,40,50" />
                </Points>
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
                <AxisY>
                    <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                    <MajorTickMark LineColor="DarkGray" LineDashStyle="Dot" />
                </AxisY>
                <AxisX>
                    <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                    <MajorTickMark LineColor="DarkGray" LineDashStyle="Dot" />
                </AxisX>
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>

You can look for details here: MSDN - Box Plot Chart

EDIT: You can dynamically bind data like this:

    protected void Page_Load(object sender, EventArgs e)
    {
        MyDataCollection data = new MyDataCollection();
        Chart1.Series[0].Points.DataBind(data, "XValue", "LowWhisker,UpWhisker,LowWBox,UpBox,Average,Median", null);
    }

public class MyDataCollection : List<MyData>
{
    public MyDataCollection()
    {
        Add(new MyData { XValue = 1, LowWhisker = 10, UpWhisker = 60, LowWBox = 20, UpBox = 50, Average = 30, Median = 40 });
        Add(new MyData { XValue = 2, LowWhisker = 40, UpWhisker = 90, LowWBox = 50, UpBox = 80, Average = 60, Median = 70 });
        Add(new MyData { XValue = 3, LowWhisker = 20, UpWhisker = 70, LowWBox = 30, UpBox = 60, Average = 40, Median = 50 });
    }
}

public class MyData
{
    public double XValue { get; set; }
    public double LowWhisker { get; set; }
    public double UpWhisker { get; set; }
    public double LowWBox { get; set; }
    public double UpBox { get; set; }
    public double Average { get; set; }
    public double Median { get; set; }
}

Whenever you add/remove data to your collection you need to call DataBind() .

EDIT 2: You can make XValue a string by modifying MyData and MyDataCollection accordingly:

EDIT 3 : Using a DataTable ,

    protected void Page_Load(object sender, EventArgs e)
    {
        MyDataTable dt = new MyDataTable();

        foreach (DataRow row in dt.Rows)
            Chart1.Series[0].Points.AddXY(row["Status"], new object[] { row["Min"], row["Max"], row["Avg"], row["Percentile25"], row["Percentile50"], row["Percentile75"] });
    }

public class MyDataTable : DataTable
{
    public MyDataTable()
    {
        Columns.Add("Title", typeof(string));
        Columns.Add("Status", typeof(string));
        Columns.Add("Min", typeof(double));
        Columns.Add("Max", typeof(double));
        Columns.Add("Avg", typeof(double));
        Columns.Add("Percentile25", typeof(double));
        Columns.Add("Percentile50", typeof(double));
        Columns.Add("Percentile75", typeof(double));

        DataRow row = NewRow();
        row["Status"] = "Status 1";
        row["Min"] = 10;
        row["Max"] = 60;
        row["Avg"] = 20;
        row["Percentile25"] = 50;
        row["Percentile50"] = 30;
        row["Percentile75"] = 40;
        Rows.Add(row);

        row = NewRow();
        row["Status"] = "Status 2";
        row["Min"] = 40;
        row["Max"] = 90;
        row["Avg"] = 50;
        row["Percentile25"] = 80;
        row["Percentile50"] = 60;
        row["Percentile75"] = 70;
        Rows.Add(row);

        row = NewRow();
        row["Status"] = "Status 3";
        row["Min"] = 20;
        row["Max"] = 70;
        row["Avg"] = 30;
        row["Percentile25"] = 60;
        row["Percentile50"] = 40;
        row["Percentile75"] = 50;
        Rows.Add(row);
    }
}

Answer 2

I think there is an error in the 3rd example, Edit 3 Using a DataTable. The error is in the order of the statistical values inserted in the object array.

I believe following should be the statement, similar to Edit 1 & Edit 2 examples, instead of what is being used.

Chart1.Series[0].Points.AddXY(row["Status"], new object[] { row["Min"], row["Max"], row["Percentile25"], row["Percentile75"], row["Avg"], row["Percentile50"]});