How to implement colors from the database on the pie chart?

Question

In my database I have stored colors as a string and I need to convert those colors to the hexadecimal and implement on the pie chart. Is there a good way to do this?
Here is my javascript code. There are two arrays (series and colors) in which I stored data.

   <script type="text/javascript">
    $(function () {
        $.ajax({
            url: 'getItems',
            dataType: "json",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            async: false,
            processData: false,
            cache: false,
            delay: 15,
            success: function (data) {

                var series = new Array();
                var colors = new Array();
                for (var i in data) {
                    var serie = new Array(data[i].name, data[i].y, data[i].color);

                    series.push(serie);
                    colors.push(serie[data[i].color]);

                }
                DrawPieChart(series,colors);
            },
            error: function (xhr) {
                alert('error');
            }
        });
    });

    function DrawPieChart(series,colors) {
        console.log(series,colors);
       Highcharts.chart('container', {

            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 1, 
                plotShadow: false,


            },
            title: {
                text: ' Vehicle Summary'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },

            colors: [colors],
            series: [{

                type: 'pie',
                name: 'Task Status',
                data: series
            }]
        });
    }
    </script>

Here is my method which takes the values of the items from the database procedure called "percentage".

public ActionResult getItems()
    {
        List<itemViewModel> result = new List<itemViewModel>();
        result = unitOfWork.ExecuteSP<itemViewModel>("[percentage]");

        var res = result.OfType<string>();

        foreach (var dr in res)
        {
            itemViewModel summary = new itemViewModel();
            summary.name = dr[0].ToString().Trim();
            summary.y = Convert.ToDecimal(dr[1]);
            // color
            result.Add(summary);

        }

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Also, this is my model

public class itemViewModel
{
    public string name { get; set; }
    public decimal? y { get; set; }
    public string color { get; set; }

}

So far have you tried anything!!! You should come up with the code!!! When I was a tyro and did the same I got much more worst comment than this. Please come up with what you have tried — , Aug 01 '17 at 08:11
https://stackoverflow.com/questions/2109756/how-do-i-get-the-color-from-a-hexadecimal-color-code-using-net — Peter, Aug 01 '17 at 08:24
What chart control do you use? - What are you targetting: Winforms, WPF, ASP..? __Always__ tag your question correctly! — TaW, Aug 01 '17 at 08:29
So far I retrieved data (name and percentage) from the database and displayed on the pie highchart (highcharts.com/demo/pie-basic). I did that in the javascript where I made the ajax call to retrieve data from database. Now i have stored colors in the database as hexadecimal and i don't know how to declare it in model and process through the method in order to color the piechart with that colors. The code is very similar to this c-sharpcorner.com/uploadfile/1f3f2a/charting-in-mvc — emmy, Aug 01 '17 at 09:04
"Is there a good way to do this?" Yes there is. And this answer is as detailed as your specific question is. Now, if there is an issue with your attempt at implementing it, you should mention your attempts so that we can actually help. — Flater, Aug 01 '17 at 09:57

score 0 · Answer 1 · answered Aug 01 '17 at 08:14

0

you can do this by setting the expression of color property of piechart, by going to series property-->Fill--->click on fx and give the expression. even though i have given you this soln but i don't think your approach is right

the approch that you are following is not the best of approach no need to store color in Database, just calculate it in color expression from other values

answered Aug 01 '17 at 08:14

Ashu

462
3
16

but i didn't use forms to create piechart – emmy Aug 01 '17 at 08:34
how are you creating pie chart ? – Ashu Aug 01 '17 at 08:36
I used highchart (https://www.highcharts.com/demo/pie-basic). In the javascript I made the ajax call to retrieve data from database (name and percentage) which I did. Now i have stored colors in the database as hexadecimal and i don't know how to declare it in model and process through the method in order to color the piechart with that colors. The code is very similar to this http://www.c-sharpcorner.com/uploadfile/1f3f2a/charting-in-mvc/. – emmy Aug 01 '17 at 08:55
I don't think i can help you in this – Ashu Aug 01 '17 at 08:56

How to implement colors from the database on the pie chart?

1 Answers1