Pass multi-dimension array into Google.visualization.arrayToDataTable

Question

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);
            };      
        })        
    });

When I saw your script, I thought that the reason for your issue might be due to class_table[x] of undefined. For example, about var array=['date_','open','pre_o','close','pre_c'], in your HTML, when the value of loop is pre_o and pre_c, I think that class_table[x] is undefined. And, about your goal of var data = google.visualization.arrayToDataTable([ ['2022-05-25 12:00',12,51,864,53], ['2022-05-25 13:00',765,256,45,131] ],true);, from your showing HTML, I cannot find the values of 51,53,256,131. I thought that your issue might be related to this. — Tanaike
– Tanaike, Commented Jun 5, 2022 at 3:58
Im sorry , that a mistake , my orignal script was supposed much more longer , script that you're sawing here is simplified and modified for better understanding — user13964720
– user13964720, Commented Jun 5, 2022 at 4:14
Thank you for replying. I understood your reply. I apologize that my comment was not useful for your situation. — Tanaike
– Tanaike, Commented Jun 5, 2022 at 4:15
Thank you for replying and updating your question. From your updated script, I proposed a modification point. Could you please confirm it? If that was not useful, I apologize. — Tanaike
– Tanaike, Commented Jun 5, 2022 at 4:26

Tanaike · Accepted Answer · 2022-06-05 04:25:57Z

0

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.

Reference:

arrayToDataTable()

answered Jun 5, 2022 at 4:25

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanaike Over a year ago

@Json Prime Thank you for replying. I'm glad your issue was resolved. I could correctly understand your question with your cooperation. Thank you, too.

Collectives™ on Stack Overflow

Pass multi-dimension array into Google.visualization.arrayToDataTable

1 Answer 1

From:

To:

Reference:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

Reference:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related