Невозможно перебрать точки данных для создания диаграммы [CanvasJs] - PullRequest
Новая
       32

Невозможно перебрать точки данных для создания диаграммы [CanvasJs]

0 голосов
/ 08 июля 2019

Я пытаюсь построить линейный график на основе динамических данных. Эти данные извлекаются из базы данных MySQL в файле PHP (DatabaseData и DatabaseData2). Количество построенных линий будет зависеть от количества проектов, хранящихся в «lenp». Я использую библиотеку CanvasJS для этого, но код, кажется, выдает ошибку. Я попытался добавить запятые и изменить положение цикла вокруг данных, но ошибка остается той же. 

<!DOCTYPE html>
<html>
<head>
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<script type="text/javascript" 
 src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<script type="text/javascript">

    function showGraph(){
        {

            $.getJSON("DatabaseData.php", function (data_points) {

                                $.getJSON("DatabaseData2.php", 
                                function(projects_points){
                console.log(projects_points);
                console.log(data_points);

                var len=data_points.length;
                var lenp=projects_points.length;
                var data_object={};
                var x_position={};
                var y_position={};


                var output="";
                var groupBy = function (xs, key) {
                    return xs.reduce(function (rv, x) {
                    (rv[x[key]] = rv[x[key]] || []).push(x);
                        return rv;
                    },{});
                };

                var groubedByids = groupBy(data_points, 'ids')
                output = JSON.parse(output +  JSON.stringify( 
                                groubedByids, null, 2 ));

                console.log(output);    

                // dynamic x_position (date) objects
               for (var i=1; i<=lenp; i++){

                   x_position['project'+i]=x_position['project'+i] || [];
                   for(var j in output[i]){

                   x_position['project'+i].push(new Date(output[i][j].x_p));
                    }        
                }
                // dynamic y_position objects
                for (var i=1; i<=lenp; i++){

                        y_position['project'+i]=y_position['project'+i] || [];
                    for(var j in output[i]){

                        y_position['project'+i].push((output[i][j].y_p));
                    }        
                }
                // dynamic data_points
                for(var i=1; i<=lenp; i++){
                    data_object['project'+i] = 
                                        data_object['project'+i] || [];
            var position_len=x_position['project'+i].length;
                        for(var j=0; j<position_len; j++){

                        data_object['project'+i].push({

                        x:x_position['project'+i][j],

                        y:y_position['project'+i][j]
                            });
                        }
                }

                console.log(x_position);
                console.log(y_position);
                console.log(data_object);

        var chart = new CanvasJS.Chart("chartContainer", 
        {               
                title:{
                text: "line Chart" 
                },
                axisX:{
                title: "Timeline",
                labelFormatter: function (e) {
                return CanvasJS.formatDate( e.value, "DD-MMM-YY");
    },
                },

                axisY: {
                title: "Money Spent"
                },

    /* ERROR       data: [
                    for(var i=1; i<=lenp; i++){
                        {
                        type: "line",
                        dataPoints: 
                                                data_object['project'+i] 
                        }
                     }

            ] */
        });
        chart.render();
            });
                });
        }
    }
</script>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        showGraph();
    });
</script>

**The error I am getting is  :** 

sampletest2.php:88 Uncaught SyntaxError: Unexpected token for
sampletest2.php:110 Uncaught ReferenceError: showGraph is not defined
    at HTMLDocument.<anonymous> (sampletest2.php:110)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)
...