Dynamic Visualforce Chart in Salesforce with JQuery:

Here are the sample Code with the help of that you can also build a rich JQuery Chart in salesforce.But before you start on code you must have to create an object for storing the Chart Data. Sample object fields are given below

Custom Controller Apex Code to get the dynamic data from Salesforce.

public class ChartController
{
    private String xAxis;
    private String series1;
    private String series2;
    private String series3;
    private String series4;
    private String series5;

    public ChartController()
    {
        list<string> xAxisValues = new list<string>();
        list<decimal> series1Values = new list<decimal>();
        list<decimal> series2Values = new list<decimal>();
        list<decimal> series3Values = new list<decimal>();
        list<decimal> series4Values = new list<decimal>();
        list<decimal> series5Values = new list<decimal>();
       
        string strYear = string.valueof(system.Today().Year());
        for(Chart_POC__c obj :[select Id,Name,cccInfo__Pipeline_Value__c,cccInfo__X1X_Value__c,cccInfo__X2X_Value__c,
                                cccInfo__X3X_Value__c,cccInfo__X4X_Value__c
                                 from cccInfo__Chart_POC__c where cccInfo__Year__c =: strYear])
        {
            string strX = (obj.Name+'-'+strYear);
            xAxisValues.add(strX);
            series1Values.add(obj.cccInfo__X1X_Value__c);
            series2Values.add((obj.cccInfo__X2X_Value__c - obj.cccInfo__X1X_Value__c));
            series3Values.add((obj.cccInfo__X3X_Value__c-obj.cccInfo__X2X_Value__c));
            series4Values.add((obj.cccInfo__X4X_Value__c-obj.cccInfo__X3X_Value__c));
            series5Values.add(obj.cccInfo__Pipeline_Value__c);
        }
       
        xAxis = JSON.serialize(xAxisValues);
        series1 = JSON.serialize(series1Values);
        series2 = JSON.serialize(series2Values);
        series3 = JSON.serialize(series3Values);
        series4 = JSON.serialize(series4Values);
        series5 = JSON.serialize(series5Values);
    }
   
    public String getxAxis() {
        return xAxis;
    }

    public String getSeries1() {
        return series1;
    }

    public String getSeries2() {
        return series2;
    }
   
    public String getSeries3() {
        return series3;
    }

    public String getSeries4() {
        return series4;
    }
   
    public String getSeries5() {
        return series5;
    }
}

Visualforce page code with JQuery includes

<apex:page controller="ChartController" standardStylesheets="false" docType="html-5.0" showHeader="false">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
    <apex:includeScript value="https://code.highcharts.com/highcharts.js"/>
    <apex:includeScript value="https://code.highcharts.com/highcharts-3d.js"/>
    <apex:includeScript value="https://code.highcharts.com/modules/exporting.js"/>

    <style>
        #container
        {
            height: 400px;
            min-width: 310px;
            max-width: 800px;
            margin: 0 auto;
        }
    </style>

    <script type="text/javascript">
        $(function (){
            $('#container').highcharts({
                chart: {
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 15,
                        viewDistance: 25,
                        depth: 40
                    },
                    marginTop: 80,
                    marginRight: 40
                },

                title: {
                    text: ''
                },

                xAxis: {
                    categories: {!xAxis}
                },

                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Max Values'
                    }
                },

                tooltip: {
                    headerFormat: '<b>{point.key}</b><br/>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
                },

                plotOptions: {
                    column: {
                        stacking: 'normal',
                        depth: 40
                    }
                },

                series: [{
                    name: '4X',
                    data: {!series4},
                    stack: 'Target'
                },
                {
                    name: '3X',
                    data: {!series3},
                    stack: 'Target'
                },
                {
                    name: '2X',
                    data: {!series2},
                    stack: 'Target'
                },
                {
                    name: '1X',
                    data: {!series1},
                    stack: 'Target'
                },
                {
                    name: 'PipeLine',
                    data: {!series5},
                    stack: 'PipeLine'
                }]
            });
        });
    </script>
    <div id="container" style="height: 400px"></div>
</apex:page>

Here is the final outcome of the above proctice code