SessionStorage, get only last values

Question

I have PHP file with this function and code:

<?php
   $valuesNight = select_sensor_data7($db, $idSensor, $date22y, $date6t);
    chart_line($valuesNight);

    $valuesEvening = select_sensor_data7($db, $idSensor, $date6t, $date14t);
    chart_line($valuesEvening);   
  ?>

<?php function chart_line($values7){ ?>
<div>
    <script type="text/javascript">

        var values7 = <?php echo $values7 ?>;
        var value7 = new Array;
        var time7 = new Array;

        for(var o in values7) {
            value7.push(values7[o]['dValue']);
            time7.push(values7[o]['dTimeDate']);
        }
        //alert(time7);
        // store values
        sessionStorage.setItem('myValues', JSON.stringify(value7));
        sessionStorage.setItem('myTime', JSON.stringify(time7));
    </script>

    <object type="text/html" data="chart.htm" width="100%"  height="420"></object>
</div>
<?php } ?>

And select_sensor_data7()

function select_sensor_data7($db, $idSensor, $dateFrom, $dateTo){
$stmt = $db->prepare("SELECT * FROM sensorData WHERE _idSensor = :idSensor 
                        AND dTimeDate BETWEEN :dateFrom AND :dateTo ORDER BY dTimeDate");
    $stmt->execute(array(':idSensor' => $idSensor, ':dateFrom' => $dateFrom, ':dateTo' => $dateTo));
    $row2 =$stmt->fetchAll(PDO::FETCH_ASSOC);
    $json=json_encode($row2);
return $json;
}

And in chart.htm:

<script type="text/javascript">
    var myTime = JSON.parse(sessionStorage.getItem('myTime'));
    var myValues = JSON.parse(sessionStorage.getItem('myValues'));

    alert(myTime);

Problem: select_sensor_data7 return object with values and time between dates, chart_line($valuesNight) and chart_line($valuesEvening) run function. In function chart_line($values7) alert(time7)shows me right values , but in chart.htm i get only last values valuesEvening.

Where am i doing wrong?

I think i know how to solve this, but I will need more info. See my earlier comment. Can you show the data structure of `select_sensor_data7()` result also? — Latheesan, Feb 16 '16 at 12:44
It looks like that `` runs twice after second setting `sessionStorege.setItem` — JanOlMajti, Feb 16 '16 at 12:59
I am in process of writing the answer/possible solution, give me few mins. — Latheesan, Feb 16 '16 at 13:00

score 2 · Accepted Answer · answered Feb 16 '16 at 13:11

Before I continue, please consider using good naming convention, functions like select_sensor_data7 and variables like values7 are poor choices.

Having said that; it looks like select_sensor_data7 function returns a json_encoded object array, i.e. something like this (dummy data):

[
    {"dValue": "123", "dTimeDate": "00/00/0000"},
    {"dValue": "123", "dTimeDate": "00/00/0000"},
    {"dValue": "123", "dTimeDate": "00/00/0000"}
]

So, what you could do in your PHP function is:

<?php

$valuesNight = select_sensor_data7($db, $idSensor, $date22y, $date6t);
chart_line('night', $valuesNight);

$valuesEvening = select_sensor_data7($db, $idSensor, $date6t, $date14t);
chart_line('evening', $valuesEvening);   

?>

<?php function chart_line($chartId, $jsonDataSource) { ?>
<div>
    <script type="text/javascript">

        var dataSource = JSON.parse('<?php echo $jsonDataSource ?>');
        var dValues = new Array;
        var dTimeDate = new Array;

        for (var i = 0; i < dataSource.length; i++) {
            dValues.push(dataSource[i].dValue);
            dTimeDate.push(dataSource[i].dTimeDate);
        }

        sessionStorage.setItem($chartId .'_myValues', JSON.stringify(dValues));
        sessionStorage.setItem($chartId .'_myTime', JSON.stringify(dTimeDate));

    </script>

    <object type="text/html" data="chart.htm?chartId=<?php echo $chartId ?>" width="100%"  height="420"></object>
</div>
<?php } ?>

Then you update your chart.html like this:

<script type="text/javascript">

// http://stackoverflow.com/a/901144/2332336
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// Parse chartId
var chartId = getParameterByName('chartId', location.href);

// Proceed if you have a chart id
if (typeof chartId !== 'undefined' && chartId && chartId.length > 0)
{
    var myTime = JSON.parse(sessionStorage.getItem(chartId +'_myTime'));
    var myValues = JSON.parse(sessionStorage.getItem(chartId +'_myValues'));

    // TEST
    console.log('myTime', myTime);
    console.log('myValues', myValues);
}
else
{
    alert('error - invalid chart id');
}

</script>

P.S. Not tested, let me know if you have trouble running this.

Very nice, but i get in `chart.htm` null values, and `dataSource` is empty. — JanOlMajti, Feb 16 '16 at 13:46
in the `chart.html` try adding `alert(location.href);` and see if the query string contains `chartId` that was embedded in php, i.e. ` — Latheesan, Feb 16 '16 at 13:52
json encoded contains `{"idSData":5784,"_idSensor":2,"dValue":0,"dTimeDate":"2016-02-16 22:08:36"}`, in `chart.htm` i get `myTime null` `myValues null` `chartId night` ... and second `null,null, chartId evening`. So `sessionStorage` shows me data in it, probaby `chart.htm` can't get items correctly, still can't figure it out what? — JanOlMajti, Feb 17 '16 at 09:15
Why don't you render the chart inline instead of deferring to the `chart.html`? — Latheesan, Feb 17 '16 at 10:42

SessionStorage, get only last values

1 Answers1