c# asp.net data binding with flotr2

I know how to bind Datatable to Repeaters and Datalist and displaying their contents using

<%# Eval("FieldName")%>

I know how to create a demo pie chart using flotr2

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
    <script type="text/javascript" src="https://raw.github.com/ekoontz/flotr/master/flotr/flotr-0.2.0-alpha.js"></script>

</head>
<body>
    <div id="container" style="width:350px;height:300px;" ></div>
    <script type='text/javascript'>
        (function basic_pie(container) {
              var
                d1 = [[0, 200]],
                d2 = [[0, 60]],
                d3 = [[0, 6]],
                d4 = [[0, 80]],
                d5 = [[0, 20]],
                graph;
                graph = Flotr.draw('container', 
                    [{ data : d1, label : 'Attending'},{ data : d2, label : 'Not Attending' },{ data : d3, label : 'No Attempts' }, { data : d4, label : 'Unreachable' }, { data : d5, label : 'Undecided' }], 
                    {
                        shadowSize: 4,
                        colors: ['#BAC463', '#C5B59C', '#B88898', '#FFAC84', '#7BBDAF'],
                        grid : { verticalLines : false, horizontalLines : false, outlineWidth: 0 },
                        xaxis : { showLabels : false },
                        yaxis : { showLabels : false },
                        pie : { show : true, explode : 4, labelFormatter: function(total, value) { return value;} },
                        mouse : { track : true },
                        legend : { show: false, position : 'se', backgroundColor : '#D2E8FF'}
                    }
                );
            })(document.getElementById("editor-render-0"));
    </script>
</body>

HERE ARE MY MAIN PROBLEM

How can i dynamically update my pie chart data so that when i bind a datatable it will display its proper content.

Based on my demo pie chart. I need to display the total of 5 data namely,

Attending, Not Attending, No Attempt, Unreachable, Undecided

I can have multiple records with these 5 totals, and it is possible to have a 0 value for any of them but not all of them at once.

And also is it possible to bind a specific color to a specific data?

Like I would like the portion of pie for the Attending to be Green NotAttending to be Red and so on... Because what happens with my demo is it automatically uses the default color's sequence. When for example NotAttending = 0, I should no longer display it but the color should still be with their respective data. Meaning the Red should no longer be used. But I'm really having problem figuring this out because of the lack of documentation and samples for the flotr2.

I hope someone can help me out there. Thanks in advance.

Solution

I've already solved my problem but i used Google's visualization. I used a datalist and placed the javascript inside the <ItemTemplate></ItemTemplate> tag on the DataList

<script type="text/javascript">
                    google.load("visualization", "1", { packages: ["corechart"] });
                    google.setOnLoadCallback(drawChart);
                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                            ['Status', 'Total Guest'],
                            ['Attending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 1) %>],
                            ['Not Attending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 2) %>],
                            ['Undecided', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 3) %>],
                            ['Unreachable', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 4) %>],
                            ['Pending', <%# GetGuestCountByStatus(int.Parse(Eval("EventId").ToString()), 5) %>]
                            ]);

                        var options = {
                            title: '',
                            slices: { 0: { color: '#a0d2af' }, 1: { color: '#f1a99b' }, 2: { color: '#dac0c3' }, 3: { color: '#a8d7dd' }, 4: { color: '#fed9a2'} },
                            legend: { position: 'none' },
                            pieSliceText: 'none'
                            };

                        var chart = new google.visualization.PieChart(document.getElementById(<%# "'chart-div-" + Eval("EventId") + "'" %>));
                            chart.draw(data, options);
                            }
                </script>

i have to add the event Id to each chart-div.

Colors in visualization is better than flotr2 at the moment, because you can assign a color for ever index of data, and it's not clear on flotr2's documentation on how to do it. if you put a 0 value for a data in Pie Chart it will not be displayed and the color assigned to that index will not be displayed. While in flotr2, if you have a 0 value you can see there is a line inside the pie. I think it's just the border, but still done better by visualization at the time of this writing.