jqChart candlestick chart : strange display

Question

I am using jqChart plugin for jQuery.
With the following code, candlestick chart is rendered correctly.

<script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'CNDL CHRT' },
                series: [
                            {
                                type: 'candlestick',
                                data : [ ['Mon', 5375, 5325, 5340, 5330], ['Tue', 5322, 5250, 5290, 5270], ['Wed', 5375, 5325, 5340, 5330], ['Fri', 5322, 5250, 5290, 5270]] 
                                                            }
                        ]
            });
        });
    </script>

jqChart OK

All other things unchaged except for the JSON data as under, the chart is not rendered correctly.
Tooltips are displayed for only some of the bars.
All bars are without fill-color.

data : [["2012/07/02:0920", 5308.2, 5308.2, 5288.0, 5292.4], ["2012/07/02:0930", 5292.0, 5296.7, 5283.35, 5295.05], ["2012/07/02:0940", 5295.95, 5297.3, 5286.6, 5288.55], ["2012/07/02:0950", 5289.4, 5292.0, 5284.0, 5285.0]]

jqChart Not OK

What may be wrong in the second "data" json object?
Thanks,

Vineet

score 1 · Accepted Answer · answered Jul 17 '12 at 17:32

The jqChart candlestick chart accepts data is in format HLOC. I believe you second data is in format OHLC.

You can convert it with something like:

    var data = [["2012/07/02:0920", 5308.2, 5308.2, 5288.0, 5292.4], ["2012/07/02:0930", 5292.0, 5296.7, 5283.35, 5295.05], ["2012/07/02:0940", 5295.95, 5297.3, 5286.6, 5288.55], ["2012/07/02:0950", 5289.4, 5292.0, 5284.0, 5285.0]];

    for (var i = 0; i < data.length; i++) {

        var item = data[i];

        data[i] = [item[0], item[2], item[3], item[1], item[4]];
    }

    $('#jqChart').jqChart({
        title: { text: 'CNDL CHRT' },
        series: [
                    {
                        type: 'candlestick',
                        data: data
                    }
                ]
    });

Hi dragan ! I really appreciate your quick support. I had overlooked the HLOC format. Now the chart is rendered correctly. Thank you very much. I have marked your answer as 'accepted' & upvoted. -- Vineet — Vineet, Jul 18 '12 at 03:25

jqChart candlestick chart : strange display

1 Answers1