Remax Remax - 3 months ago 9
PHP Question

ChartsNew.js php json Integration

I searched with google and checked in the forum for an answer, but I couldn't find one.

My Problem is that I want to use ChartsNew.js in combination with php and the datasets should be available for js over json but I get an undefined dataset exception or the chart without contend.

I can convert the php array with the data that I took from the example from the github project ChartsNew.js. And when I compare the two strings. They are almost the same but the key words are under quotes. I tried it with copying that string into the html file, and the chart worked.

But when I use Javascript to parse the string it tells me the dataset is undefined or it shows the chart without the contend.

I made my variable to an object and the datasets to but it didn't fix the problem.

I found out that the mydata1 has no data when I want to access it in the end. How do I get the var parsing to work properly?

The PHP code:

$data = array(
'labels' => array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"),
'datasets' => array(
array(
'fillColor' => "blue",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000),
'title' => "previous Month"
),
array(
'fillColor' => "red",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000),
'title' => "current month"
),
array(
'type' => "Line",
// fillColor : "rgba(0,0,0,0)",
'strokeColor' => "green",
'pointColor' => "green",
'pointStrokeColor' => "green",
'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000),
'title' => "total"
)
)
);

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
echo '[' . json_encode($data) . ']';
//echo json_encode($data);
exit("");


... and the output:

[{"fillColor":"blue","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000],"title":"previous Month"},{"fillColor":"red","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,1600,2000,12000,4000,12000,13000,40000,10000,20000,17000],"title":"current month"},{"type":"Line","strokeColor":"green","pointColor":"green","pointStrokeColor":"green","data":[200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000,132000],"title":"total"}]


... and the HTML code + the original dataset:

<!DOCTYPE html>
<html>
<body>

<h1>Customers</h1>
<div id="id01"></div>

<script src='ChartNew.js-master/ChartNew.js'></script>
<script>
var original_data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
fillColor: "blue",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000],
title: "previous Month"
},
{
fillColor: "red",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000],
title: "current month"
},
{
type: "Line",
strokeColor: "green",
pointColor: "green",
pointStrokeColor: "green",
data: [200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000],
title: "total"
}
]
}

var newopts = {
animation: true,
datasetFill: false,
canvasBorders: true,
canvasBordersWidth: 3,
canvasBordersColor: "black",
graphTitle: "Graph Title",
graphTitleFontFamily: "'Arial'",
graphTitleFontSize: 24,
graphTitleFontStyle: "bold",
graphTitleFontColor: "#666",
legend: true,
legendBlockSize: 30,
bezierCurveTension: 0.2,
legendPosX: 2,
legendPosY: 0,
graphMax: 160000,
yAxisMinimumInterval: 40000,
scaleXGridLinesStep: 9999
}

</script>

<div id="canvas_parent_id" >
<canvas id="canvas_stackedbar_id" width="500px" height="500px">Please enable Javascript to see the Chart</canvas>
<script>

var mydata1 = new Object();
mydata1.datasets = new Object();
try {
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost/file.php?json=123";

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
var arr = JSON.parse(response);
arr = JSON.stringify(arr);
mydata1 = arr;

}
} catch (e) {
alert("Error: " + e);
}
</script>
</div>
</body>
</html>

Answer

This Full code will work fine with you

HTML side:

<!DOCTYPE html>
<html>
    <head>
        <script src='http://fvancop.github.io/ChartNew.js/ChartNew.js'></script>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    </head>
    <body>
        <canvas id="canvas" height="600" width="1000"></canvas>
        <script>
            $.ajax({
                type: "POST",
                url: "http://localhost/file.php?json=123",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "JSON",
                success: function (response)
                {
                    new Chart(document.getElementById("canvas").getContext("2d")).Line(response);
                }
            });

        </script>

    </body>
</html>

PHP Side

$data = array();

$data['labels'] = array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
$data['datasets'] = array(
    array(
        'fillColor' => "blue",
        'strokeColor' => "rgba(220,220,220,1)",
        'pointColor' => "rgba(220,220,220,1)",
        'pointStrokeColor' => "#fff",
        'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000),
        'title' => "previous Month"
    ),
    array(
        'fillColor' => "red",
        'strokeColor' => "rgba(220,220,220,1)",
        'pointColor' => "rgba(220,220,220,1)",
        'pointStrokeColor' => "#fff",
        'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000),
        'title' => "current month"
    ),
    array(
        'type' => "Line",
        //          fillColor : "rgba(0,0,0,0)",
        'strokeColor' => "green",
        'pointColor' => "green",
        'pointStrokeColor' => "green",
        'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000),
        'title' => "total"
    )
);
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
echo json_encode($data);
//echo json_encode($data);
exit("");
Comments