I am trying to create a chart with candlesticks. When I run the code, the chart does not create candlesticks (eg boxes with whiskers for high/low). Instead, the code generates blue rectangles. I believe the error is in my data, because when I use the data from the example provided by Google here<https://developers.google.com/chart/interactive/docs/gallery/candlestickchart> - the candlesticks appear correctly.
The code is as follows: <!--Load the Ajax API--> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); function drawChart() { // Create our data table out of JSON data loaded from server. var data1 = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"OHLC","type":"number"},{"label":"OHLC","type":"number"},{"label":"OHLC","type":"number"},{"label":"OHLC","type":"number"}],"rows":[{"c":[{"v":"26 Nov 2013"},{"v":37.6},{"v":37.98},{"v":37.55},{"v":37.8}]},{"c":[{"v":"27 Nov 2013"},{"v":37.5},{"v":37.53},{"v":37.235},{"v":37.25}]},{"c":[{"v":"28 Nov 2013"},{"v":37.31},{"v":37.44},{"v":37.18},{"v":37.19}]},{"c":[{"v":"29 Nov 2013"},{"v":37.42},{"v":37.59},{"v":37.35},{"v":37.39}]},{"c":[{"v":"2 Dec 2013"},{"v":37.47},{"v":37.57},{"v":36.81},{"v":36.9}]},{"c":[{"v":"3 Dec 2013"},{"v":36.72},{"v":36.8},{"v":36.33},{"v":36.45}]},{"c":[{"v":"4 Dec 2013"},{"v":36.25},{"v":36.89},{"v":36.25},{"v":36.8}]},{"c":[{"v":"5 Dec 2013"},{"v":37},{"v":37.24},{"v":36.78},{"v":36.78}]},{"c":[{"v":"6 Dec 2013"},{"v":36.89},{"v":37.05},{"v":36.52},{"v":36.75}]},{"c":[{"v":"9 Dec 2013"},{"v":37.09},{"v":37.19},{"v":36.55},{"v":36.77}]},{"c":[{"v":"10 Dec 2013"},{"v":36.98},{"v":37.18},{"v":36.77},{"v":36.82}]},{"c":[{"v":"11 Dec 2013"},{"v":36.41},{"v":36.5},{"v":35.97},{"v":36.18}]},{"c":[{"v":"12 Dec 2013"},{"v":36.18},{"v":36.205},{"v":35.325},{"v":35.54}]},{"c":[{"v":"13 Dec 2013"},{"v":35.71},{"v":35.85},{"v":35.445},{"v":35.85}]},{"c":[{"v":"16 Dec 2013"},{"v":35.47},{"v":35.735},{"v":35.38},{"v":35.66}]},{"c":[{"v":"17 Dec 2013"},{"v":35.85},{"v":35.96},{"v":35.51},{"v":35.66}]},{"c":[{"v":"18 Dec 2013"},{"v":35.88},{"v":36.09},{"v":35.79},{"v":35.79}]},{"c":[{"v":"19 Dec 2013"},{"v":36.39},{"v":36.8},{"v":36.31},{"v":36.8}]},{"c":[{"v":"20 Dec 2013"},{"v":36.86},{"v":37.23},{"v":36.54},{"v":37.23}]},{"c":[{"v":"24 Dec 2013"},{"v":37.06},{"v":37.37},{"v":37},{"v":37.29}]}]}); var options1 = { width: 600, height: 350, chartArea: {'width': '80%', 'height': '80%'}, legend: {position: 'bottom'}, viewWindow:{ minValue: 0 }, vAxes: [ {title: 'Prices', titleTextStyle: { italic: false} } // Left axis ], }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div1')); chart.draw(data1, options1); } </script> <div id="chart_div1"></div> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
