regarding calling json webservice to make jqplot bar graph in jquery

See more:

jQuery

I am trying to populate a jqplot bargraph with the json webservice data .....in jquery

my json webservice returns data as -

[{"A":115.0,"B":55.0,"C":0.0,"D":29.04}]

how can I use this data to populate my jqplot bargraph in jquery

my code is -

<script language="javascript" type="text/javascript" >

function testService()
{

$.jqplot.config.enablePlugins = true;

var AjaxDataRenderer = function(url, plot, options) {
var ret;
$.ajax({
async: true,
type: "GET",
dataType: 'jsonp',
contentType: "text/javascript",
cache: false,
crossDomain: true,
jsonp: 'callback',
jsonpCallback: 'processResult',
url: "http://130.1.5.139/EWSMvcApp/api/barchart",

error: function (xhr, textStatus, error) {
window.alert(error);
},
success: function(data) {

window.alert("pass");

ret = data;
}
});
return ret;
};

var plot = $.jqplot('id-BarChart', [],{
title: "TRIAL",
dataRenderer: AjaxDataRenderer,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
series:[{color:'#5FAB78',label:"Actual"}],
legend: {
show: true,
placement: "insideGrid",
rendererOptions: {
textColor: "#FFFFFF",
fontSize: "10pt"
}},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
yaxis: {
min: 10,
max: 300,
tickOptions: {
formatString: '$%d'
}
}
}
});
}

</script>