4

I've created a line chart, it loads data with php and json.

The problem is that the chart plots NULL values as 0 and that looks very ugly.

My best guess is that i'm creating the json in the wrong way and the output that I really want is {"v":} and not {"v":""}.

The line chart now: enter image description here

What I want: enter image description here

The php code

   $reports['cols'][] = array(label => "Time", type => "string");
        $reports['cols'][] = array(label => "Today", type => "number");
        $reports['cols'][] = array(label => "Yesterday", type => "number");
        $reports['cols'][] = array(label => "Budget", type => "number");

            //Some mysql code that populates values ($today, $yesterday, $budget)

        $rows = array();
        for($i=10; $i <= 21; $i++){

            $temp = array();
            $temp[] = array('v' => (int) $i);
                    //Format string will return "" and not "0" if value is blank
            $temp[] = array('v' => (string) $today["$i"]);
            $temp[] = array('v' => (string) $yesterday["$i"]);
            $temp[] = array('v' => (string) $budget);
            $rows[]['c'] = $temp;
        }

        $reports['rows'] = $rows;
        $string=json_encode($reports);
        echo $string;

The output from php:

{
    "cols":[
        {"label":"Time","type":"string"},
        {"label":"Today","type":"number"},
        {"label":"Yesterday","type":"number"},
        {"label":"Budget","type":"number"}
    ],

    "rows":[
        {"c":[{"v":10},{"v":"0"},{"v":"0"},{"v":"90000"}]},
        {"c":[{"v":11},{"v":"22491"},{"v":"7420"},{"v":"90000"}]},
        {"c":[{"v":12},{"v":""},{"v":"50082"},{"v":"90000"}]},
        {"c":[{"v":13},{"v":""},{"v":"91660"},{"v":"90000"}]},
        {"c":[{"v":14},{"v":""},{"v":"109204"},{"v":"90000"}]},
        {"c":[{"v":15},{"v":""},{"v":"115280"},{"v":"90000"}]},
        {"c":[{"v":16},{"v":""},{"v":"111853"},{"v":"90000"}]},
        {"c":[{"v":17},{"v":""},{"v":"87368"},{"v":"90000"}]},
        {"c":[{"v":18},{"v":""},{"v":"33063"},{"v":"90000"}]},
        {"c":[{"v":19},{"v":""},{"v":"14903"},{"v":"90000"}]},
        {"c":[{"v":20},{"v":""},{"v":"1441"},{"v":"90000"}]},
        {"c":[{"v":21},{"v":""},{"v":"0"},{"v":"90000"}]}
    ]
}

The Javascript

google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

    var jsonData = $.ajax({
        url: "functions/load.php?q=salesChart",
        dataType:"json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    var options = {
        title: 'Money / Hour',
        colors: ['#4BA15A', '#45559D', 'red'],
        legend: {position: 'top'},
        lineWidth: 2,
        pointSize: 3,
        fontName: 'Helvetica',
        fontSize: 10,
        interpolateNulls: false,
        backgroundColor: {strokeWidth: 1},
        chartArea: {left: 70, top: 60, width: "85%", height: "70%"} 
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
4

1 に答える 1