I want to draw a candlestick chart by using Google Chart , i have a multi-array array call chartdata
and i failed to pass the multi-array array into google.visualization.arrayToDataTable([chartdata],true)
and give errorLast domain does not have enough data columns (missing 3)
it should look like this var data = google.visualization.arrayToDataTable([ ['2022-05-25 12:00',12,864,889,76], ['2022-05-25 13:00',765,45,97,82] ],true);
html
<div > <div> <button>OK</button> <table id="haha"> <thead> <tr> <td>date</td> <td>open</td> <td>close</td> <td>high</td> <td>low</td> <td>change</td> </tr> </thead> <tr class="data"> <td class="date_">2022-05-25 12:00</td> <td class="open">12</td> <td class="close">864</td> <td class="high">889</td> <td class="low">76</td> <td class="change">66</td> </tr> <tr class="data"> <td class="date_">2022-05-25 13:00</td> <td class="open">765</td> <td class="close">45</td> <td class="high">97</td> <td class="low">82</td> <td class="change">613</td> </tr> </table> </div> </div> <div id="chart" style="width: 900px; height: 500px;"></div>
js
$(document).ready(function(){ $(document).on("click", "button", function(){ var parenthis = this.parentElement; var tr = parenthis.querySelectorAll('.data'); var chartdata = []; for(var x=0 ; x < tr.length ; x++){ var subdata = []; var array=['date_','open','close','high','low']; for(var y=0 ; y < array.length ; y++){ var class_table = parenthis.querySelectorAll("[class=" + CSS.escape(array[y]) + "]"); if(y==0){ subdata.push(class_table[x].innerHTML); } else if(y==4){ subdata.push(parseFloat(class_table[x].innerHTML)); chartdata.push(subdata); } else{ subdata.push(parseFloat(class_table[x].innerHTML)) } }; }; // candlestick chart google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ // [[str,num/float,num/float,num/float,num/float],] var data = google.visualization.arrayToDataTable([chartdata],true); var options = { legend:'none', }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart')); chart.draw(data, options); }; }) });
Advertisement
Answer
In your script, how about the following modification?
From:
var data = google.visualization.arrayToDataTable([chartdata],true);
To:
var data = google.visualization.arrayToDataTable(chartdata,true);
- In your script,
chartdata
is the 2-dimensional array. So, I thought that this might be able to be directly used.