<script type="text/javascript">
        function round(d) {
            return Math.round(100 * d) / 100;
        }

        var ohlcData = [];
        var volumeData = [];

        var date = new Date(2010, 0, 1);

        var high = Math.random() * 40;
        var close = high - Math.random();
        var low = close - Math.random();
        var open = (high - low) * Math.random() + low;

        ohlcData.push([date, round(high), round(low), round(open), round(close)]);

        var volume = 100 + 15 * Math.random();
        volumeData.push([date, round(volume)]);

        for (var day = 2; day <= 60; day++) {

            date = new Date(2010, 0, day);

            high = open + Math.random();

            close = high - Math.random();
            low = close - Math.random();
            var oldOpen = open;
            open = (high - low) * Math.random() + low;

            if (low > oldOpen) {
                low = oldOpen;
            }

            ohlcData.push([date, round(high), round(low), round(open), round(close)]);

            volume = volume + 10 * Math.random() - 5;

            volumeData.push([date, round(volume)]);
        }

        $(document).ready(function () {
            $('#jqChart').jqChart({
                legend: { visible: false },
                border: { lineWidth: 0, padding: 0 },
                tooltips: {
                    type: 'shared',
                    disabled: true
                },
                animation: { duration: 1 },
                axes: [
                        {
                            location: 'bottom',
                            zoomEnabled: true
                        },
                        {
                            type: 'linear',
                            location: 'left',
                            width: 30
                        }
                ],
                series: [
                          {
                              title: 'Price Index',
                              type: 'candlestick',
                              data: ohlcData,
                              priceUpFillStyle: 'white',
                              priceDownFillStyle: 'black',
                              strokeStyle: 'black'
                          }
                ]
            });

            $('#jqChartVolume').jqChart({
                legend: { visible: false },
                border: { lineWidth: 0, padding: 0 },
                tooltips: {
                    type: 'shared',
                    disabled: true
                },
                animation: { duration: 1 },
                axes: [
                        {
                            type: 'dateTime',
                            location: 'bottom',
                            zoomEnabled: true
                        },
                        {
                            type: 'linear',
                            location: 'left',
                            width: 30
                        }
                ],
                series: [
                            {
                                type: 'column',
                                data: volumeData,
                                fillStyle: 'black'
                            }
                ]
            });

            var isZooming = false;

            $('#jqChart').bind('axisZoom', function (e, data) {

                if (isZooming) {
                    return;
                }

                isZooming = true;

                var chart = data.chart;
                var axis = data.axis;

                var min = axis.actualVisibleMinimum;
                var max = axis.actualVisibleMaximum;

                var animation = $('#jqChartVolume').jqChart('option', 'animation');
                animation.enabled = false;

                var axes = $('#jqChartVolume').jqChart('option', 'axes');
                axes[0].visibleMinimum = min;
                axes[0].visibleMaximum = max;

                $('#jqChartVolume').jqChart('update');

                isZooming = false;
            });

            $('#jqChartVolume').bind('axisZoom', function (e, data) {

                if (isZooming) {
                    return;
                }

                isZooming = true;

                var chart = data.chart;
                var axis = data.axis;

                var min = axis.actualVisibleMinimum;
                var max = axis.actualVisibleMaximum;

                var animation = $('#jqChart').jqChart('option', 'animation');
                animation.enabled = false;

                var axes = $('#jqChart').jqChart('option', 'axes');
                axes[0].visibleMinimum = min;
                axes[0].visibleMaximum = max;

                $('#jqChart').jqChart('update');

                isZooming = false;
            });

        });

    </script>

</head>
<body>

    <div>
        <div>
            <div id="jqChart" style="width: 600px; height: 250px;">
            </div>
        </div>
        <div>
            <div id="jqChartVolume" style="width: 600px; height: 130px;">
            </div>
        </div>
    </div>
</body>