php - Javascript error receiving data from JSON echo

208

I'm trying to create a candlestick chart with volume. The candlestick chart works perfectly, the problem is with the volume.

What I have:

imgur image

What I need:

imgur image

datachart.php -> It sends the JSON data.

I feel that the error is in $data[], because the script index.htm doesn't recognize the volume data.

<?php
include '../dbh.php';//It connects to the database

$sql = "SELECT * FROM table ORDER BY date ASC";
$result = $conn->query($sql);

$data = array();
$count = 0;
while ($row = mysqli_fetch_array($result))
{
  $newdate = strtotime($row['date']) * 1000; 
  $data[] = array($newdate, (float)$row['open'], (float)$row['high'], (float)$row['low'], (float)$row['close'], (float)$row['volume']);
  $count++;
}   
echo json_encode($data);
?>

index.htm

$.getJSON('datachart.php', function (data) {

// split the data set into ohlc and volume
var ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]],

    i = 0;

for (i; i < dataLength; i += 1) {
    ohlc.push([
        data[i][0], // the date
        data[i][1], // open
        data[i][2], // high
        data[i][3], // low
        data[i][4] // close
    ]);

    volume.push([
        data[i][0], // the date
        data[i][5] // the volume
    ]);
}


// create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'Exchange Market'
    },

    yAxis: [{
        labels: {
            align: 'right',
            x: -3
        },
        title: {
            text: 'OHLC'
        },
        height: '60%',
        lineWidth: 2,
        resize: {
            enabled: true
        }
    }, {
        labels: {
            align: 'right',
            x: -3
        },
        title: {
            text: 'Volume'
        },
        top: '65%',
        height: '35%',
        offset: 0,
        lineWidth: 2
    }],

    tooltip: {
        split: true
    },

    series: [{
        type: 'candlestick',
        name: 'AAPL',
        data: ohlc,
        dataGrouping: {
            units: groupingUnits
        }
    }, {
        type: 'column',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            units: groupingUnits
        }
    }]
});
});

If we take only this part of the index.htm code:

volume.push([
    data[i][0], // the date
    data[i][5] // the volume
]);

If I change the "5" to 1,2,3 or 4, it draws the volume graph. Then, why doesn't it draw the graph with "5" if the volume is in position 5?

People are also looking for solutions to the problem: php - How to UPDATE Multiple table using Postgresql & Codeigniter

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.