Passing Decimal string from php to jquery

Question

I am trying to pass some formatted String from PHP to jQuery. But i am getting an error as

VM2203:3 Uncaught SyntaxError: Unexpected number in the browser.

Here is my code

<?php
$OSlist = [];
$category = "";
$pieData = "";
$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_PORT => "8081",
CURLOPT_URL => "http://localhost:8081/api/devices/hoursBy/OSVersion",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache",
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
$decodeStr = json_decode($response, true);
foreach ($decodeStr as $item) {
    $os = $item['_id']['os'];
    if ($os == $selectedOS) {
        if ($item['total_hours'] != 0) {
            $OSlist[$item['_id']['version']] = $item['total_hours'];
            // echo 'iOS'.$item['_id']['version'] . '&nbsp;:&nbsp;' . $item['total_hours'] ,"<br>";
        }
    }
}
ksort($OSlist);
foreach ($OSlist as $key => $val) {
    // echo "$key = $val" . "<br>";
    $category = $category . $key . ",";
    $pieData = $pieData . "[" . $key . "," . $val . "],";
}
$pieData="[".$pieData."]";
echo $pieData;
// print_r($OSlist);
 } ?>
 <script >
        $('document').ready(function () {
            var jsArray = <?php echo $pieData; ?>;
            alert(jsArray);

        });


    </script>

The Piedata output is

[[2.3.4,97.9],[4.0.3,11.6],[4.0.4,2.4],[4.1.1,15.1],[4.1.2,398.4],[4.2.1,45.8],[4.2.2,27.3],[4.3,321],[4.4.2,694.9],[4.4.4,478.7],[5,646.3],[5.0.1,177.5],[5.0.2,1210.5],[5.1,126.2],[5.1.1,524.4],[6,201.5],]

i actually need to pass this data to highchart pie graph to the data value.The following graph is for mobile version vs its utilization hours.

function loadPieGraph() {
            // Radialize the colors
            var android = <?php echo $androidhrs ?>;
            var ios = <?php echo $ioshrs ?>;
            var obj = [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['4.1', '23.0'],
                        {
                            name: '5.0',
                            y: '40.2',
                            sliced: true,
                            selected: true
                        },
                    ]
                }];
            Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
                return {
                    radialGradient: {
                        cx: 0.5,
                        cy: 0.3,
                        r: 0.7
                    },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            });

            // Build the chart
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Browser market shares. January, 2015 to May, 2015'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        }
                    }
                },
                series: obj
            });


        }

Answer 1

This whole part:

foreach ($OSlist as $key => $val) {
    // echo "$key = $val" . "<br>";
    $category = $category . $key . ",";
    $pieData = $pieData . "[" . $key . "," . $val . "],";
}
$pieData="[".$pieData."]";
echo $pieData;
// print_r($OSlist);
 } ?>
 <script >
        $('document').ready(function () {
            var jsArray = <?php echo $pieData; ?>;
            alert(jsArray);

        });


    </script>

looks really faulty in nature.

You should rather:

$pieData = json_encode($OSlist);

and in the script tag you can simply do this:

 jsArray = JSON.parse("<?php echo $pieData; ?>");

And then do the HighChart's relevant array formatting in the JS. Or you can directly do the formatting first in PHP and do json encode the final form and directly pass it to js where again you will need to JSON.parse them again.

Always do data transactions in form of JSON in these types of cases.

Hope it helps.

Hope it helps.