Retrive data from web services and render to google chart using (json)

Hi,

my below code is working fine. bu i need to render dynamic data using webservices and ajax.

I think i need to bring data in json format. but how to retireve in json i dont know.

<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'designNo');
            data.addColumn('number', 'Quantity');

            data.addRows(5);

            data.setValue(0, 0, 'm2881');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, 'm2887');
            data.setValue(1, 1, 12000);

            data.setValue(2, 0, 'm2845');
            data.setValue(2, 1, 45000);

            data.setValue(3, 0, 'm2569');
            data.setValue(3, 1, 2000);

            data.setValue(4, 0, 'm2651');
            data.setValue(4, 1, 40000);

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, { width: 550, height: 300, title: 'Rayon Prints Performance', hAxis: { title: 'Design No', titleTextStyle: { color: '#3366CC' } } });
        }
    </script>

dynamic data will come from sql.

Qnty    Design
1000	m2881
12000	m2887
45000	m2845
2000	m2569
40000	m2651