Creating a chart using jchartfx

Question

I need to create a chart through dynamic data.

<script type="text/javascript" language="javascript">
    // Step 1
    // On window load get data using ajax
    window.onload = function () {
        getAjaxData();
    }

    // Step 2
    // After getting data, call the chart function and pass data
    function getAjaxData() {
        var values;
        $.ajax({
            cache : false,
            type : "GET",
            url : 'chartvalues',
            format:'json',
            success: function(values) {
                onLoadDoc(values);
            }
        });
    }

    // Step 3
    // Process your chart using the passed data
    function onLoadDoc(values) {
        var chart1;
        chart1 = new cfx.Chart();chart1.getAnimations().getLoad().setEnabled(true);
        var axisY = chart1.getAxisY();
        axisY.setMin(0);
        axisY.setMax(30);

        //----Assign data fields--------
        var fields = chart1.getDataSourceSettings().getFields();
        var field1 = new cfx.FieldMap();
        field1.setName("Value");
        field1.setUsage(cfx.FieldUsage.Value);
        fields.add(field1);
        var field2 = new cfx.FieldMap();
        field2.setName("Date");
        field2.setUsage(cfx.FieldUsage.XValue);
        fields.add(field2);

        chart1.setGallery(cfx.Gallery.Bar);

        //----Set Sample Data------------
        var items = values;
        alert (items);
        chart1.setDataSource(items);
        chart1.getView3D().setEnabled(true);

        var chartDiv = document.getElementById('ChartDiv1');
        chart1.create(chartDiv);
    }
</script>

In variable items I am getting the value in json format like:

[
    { "Date": "2012-01-21T23:45:10.280Z", "Value": 15 },
    { "Date": "2012-02-10T23:45:10.280Z", "Value": 12 },
]

But chart is not displaying? what I need to do?