Many values in a chart

[jangix]

Hi friends, can I draw a circular-bar-chart with 2 or more values with different labels and colors for each bar? How can I do it? Thank you

[jangix]

My solution

            <div id="container_graph" style="width: 180px; height: 180px; margin: auto; margin-top: 15px;">
                @{
                    double val0 = 0;   //total quantity
                    double val1 = 0;   //quantity 1
                    double val2 = 0;   //quantity 2
                    int rot2 = 0;         //rotation graph2

                    double.TryParse(@Model.quantity, out val0);
                    double.TryParse(@Model.quantity1, out val1);
                    double.TryParse(@Model.quantity2, out val2);
                    val1 = (int)((100 * val1) / val0);      //percent 1
                    val2 = (int)((100 * val2) / val0);      //percent 2
                    rot2 = (int)((val1 * 360) / 100 + 9);   //rotation in degree  + 9° optional           

                    <div id="chart-bar0" style="position: absolute;"></div>
                    if (val1 > 0)
                    {
                    <div id="chart-bar1" style="position: absolute;" data-track-color="false" data-rotate="0" data-percent="@val1" ></div>
                    }
                    if (val2 > 0)
                    {
                    <div id="chart-bar2" style="position: absolute;" data-track-color="false" data-rotate="@rot2" data-percent="@val2"></div>
                    }                                     
                    <div style="position: absolute; width: inherit; height: inherit; text-align: center; margin-top: 44px;">
                        <h3><strong id="graph_field">Total<br />
                        </strong>
                            <strong id="graph_percent">@(val0) %</strong></h3>
                    </div> 
                }
            </div>

<script type="text/javascript">
        $('#chart-bar0').easyPieChart({
            "barColor": null, "delay": 300, scaleColor: false, lineWidth: 12, size: 180
        });
        $('#chart-bar1').easyPieChart({
            "barColor": #16A77F, "delay": 300, scaleColor: false, lineWidth: 12, size: 180
        });
        $('#chart-bar2').easyPieChart({
            "barColor": #5FC645, "delay": 300, scaleColor: false, lineWidth: 12, size: 180
        });
</script>