CODEWITHSUNDEEP
javascriptphpajaxarrayshighcharts
JLuca
JLuca

Reputation: 3

Highcharts not rendering with array loaded with ajax

I just started using Highcharts but already got a problem. I want to fill my graph with data from an Ajax call but it just shows a blank graph.

First i want to show you how I get my data:

<?php

require_once("mysql_config.php");
$query = "SELECT temp FROM daten ORDER BY daten.id DESC LIMIT 0,6";

$answer = mysqli_query($mysqli,$query);
$row;

while($row = $answer->fetch_array()){
    echo $row['temp'] . ",";
}

?>

The output of this looks like: -20,0,0,7,0,0,100

And my AJAX Function:

function ajax(website, element, callback) {
    var http = null;
    var http = new XMLHttpRequest();
    var url = website;

    if(http!=null){
        http.open("POST",url,true);
        http.onreadystatechange = function(){

            if(http.readyState == 4){

                var text = http.responseText;
                callback(text, element);

            }

        }//Ende readychange

        http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        http.send();

    }//Ende if(http2!=null)

}//Ende Funktion

the callback is my create_chart function

function create_chart(rawdata, element){

newdata = rawdata.split(",");

//var newdata = [-20,0,0,7,0,0,100];

var chart = new Highcharts.Chart({
        chart: {
            type: 'line',
            renderTo: 'test'
        },
        title: {
            text: 'Testchart'
        },
        subtitle:{
            text: 'Subtitle'
        },
        xAxis: {
            categories: ['A','B','C','D','E','F','G']
        },
        yAxis: {
            title: {
                text: 'This is it'
            }
        },
        series: [{
            name: "Test",
            data: newdata
        }]
});

 }

The problem is, that it only draws a graph without data while using ajax but when I use an "prefilled" array (like the the one I commented out) it works fine.

Upvotes: 0

Views: 450

Answers (2)

Manik Thakur
Manik Thakur

Reputation: 294

Check the response coming through ajax having datatype as object or not. Because highcharts will work it the response is of datatype as object.

If it is returning as string then, convert it into object using eval('(' + response + ')')

Upvotes: 0

Mark
Mark

Reputation: 108537

newdata is a string and when you split it its pieces are strings.

"-20,0,0,7,0,0,100".split(",") = ["-20","0","0","7","0","0","100"]

Highcharts needs numbers, so after the split, parseInt them into numbers:

var rawdata = "-20,0,0,7,0,0,100";
var strdata = rawdata.split(",");
var newdata = []
for (var i = 0; i < strdata.length; i++)
{
   newdata.push(parseInt(strdata[i]));
}

Fiddle here.

Upvotes: 1

Related Questions