Jquery Flot pie charts show data value instead of percentage

Question

I can't figure out how to get flot.pie to change the data shown in the labels from a percentage of the "raw data" to the actual data. In my example i've created a pie chart with the numbers of read/unread messages.

Number of read messages: 50. Number of unread messages: 150.

The created pie shows the percentage of read messages as 25%. On this spot i want to show the actual 50 messages. See image below:

The code i used to create the pie:

var data = [     { label: "Read", data: 50, color: '#614E43' },     { label: "Unread", data: 150, color: '#F5912D' } ]; 

And:

    $(function () {         $.plot($("#placeholder"), data,            {             series: {                 pie: {                     show: true,                     radius: 1,                     label: {                         show: true,                         radius: 2 / 3,                         formatter: function (label, series) {                             return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';                          },                         threshold: 0.1                     }                 }             },             legend: {                 show: false             }         });     }); 

Is this possible?

With the answer of @Ryley I came to a dirty solution. When I output the series.data the values "1,150" and "1,50" were returned. I came up with the idea to substract the first 2 characters of the returned value and display the substracted value.

String(str).substring(2, str.lenght) 

This is the pie chart I created with this solution:

This is not the best solution, but it works for me. if someone knows a better solution....

Answer 1

I found the answer to the question. The data object is a multi-dimensional array. To get the acual data use the following code:

    $(function () {     $.plot($("#placeholder"), data,        {         series: {             pie: {                 show: true,                 radius: 1,                 label: {                     show: true,                     radius: 2 / 3,                     formatter: function (label, series) {                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';                      },                     threshold: 0.1                 }             }         },         legend: {             show: false         }     }); }); 

Notice the code " series.data[0][1] " to extract the data.