In the United Kingdom, Octopus Energy stands out as one of the leading power suppliers, renowned for its innovative approach and customer-centric services. One of the notable features offered by Octopus Energy is its Application Programming Interface (API), which empowers customers to integrate their applications seamlessly with the company’s systems.
The attached source code serves as a comprehensive guide on leveraging Octopus Energy’s API effectively. It illustrates the step-by-step process of utilizing the API to access relevant data and functionalities, thereby enabling developers to create tailored applications that cater to specific user needs.
By following the instructions provided in the source code, developers can harness the power of Octopus Energy’s API to enhance their applications with features such as real-time energy consumption tracking, billing information retrieval, and personalized energy usage recommendations. This integration not only facilitates a smoother user experience but also promotes energy efficiency and sustainability initiatives.
Furthermore, Octopus Energy’s commitment to transparency and accessibility is evident through its provision of an API, which empowers customers to take control of their energy usage and make informed decisions. This initiative underscores Octopus Energy’s dedication to fostering collaboration and innovation within the energy sector, ultimately driving positive change and empowering consumers in their energy management journey.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart Display</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h2 class="mt-3">Data Chart (<?php echo date("d/m/Y"); ?>)</h2>
<canvas id="dataChart" width="400" height="400"></canvas>
<!-- Table to display data -->
<div class="mt-4">
<table class="table table-striped" id="dataTable">
<thead>
<tr>
<th>Date Time</th>
<th>Cost(p)</th>
</tr>
</thead>
<tbody id= "datacontent">
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const data = <?php echo fetchChartData(); ?>;
const ctx = document.getElementById('dataChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // Change the type as needed (line, bar, etc.)
data: {
labels: data.labels,
datasets: [{
label: 'p',
fill: true, // Enable filling below the line
data: data.values,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1,
tension: 0.3
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// Populate the data table using JavaScript
const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
data.labels.forEach((label, index) => {
const row = tableBody.insertRow();
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const tempdate= new Date(label);
cell1.textContent = tempdate.getDate()+"/"+(tempdate.getMonth()+1)+"/"+tempdate.getFullYear()+" "+(tempdate.getHours())+":"+tempdate.getMinutes();
cell2.textContent = data.values[index];
});
});
<?php
function fetchChartData()
{
$url = "[Your API link]";
$apiKey = "[Your apikey]";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_USERPWD, $apiKey . ":");
$response = curl_exec($curl);
curl_close($curl);
$data = json_decode($response, true);
// Assume the API returns an array of objects {label: "", value: 0}
$labels = array_column($data['results'], 'valid_from');
$values = array_column($data['results'], 'value_inc_vat');
// Combine the names and data into one array of associative arrays
$combined = array_map(null, $labels, $values);
// Filter the combined array to remove entries with data <= 10
$filtered = array_filter($combined, function ($item) {
$today = date("d/m/Y");
$d = date('d/m/Y', strtotime($item[0]));
return $d>= $today; // Change 10 to your specific threshold
});
// Sort the combined array by names
usort($filtered, function ($a, $b) {
return $a[0] <=> $b[0]; // Sorting by name
});
foreach ($filtered as &$row) {
$array[0]= strtotime($row[0])+ 60*60;
$array[1]= $row[1];
$row[] = $array ;
}
// Extract sorted names and data back out
$sortedNames = array_column($filtered, 0);
$sortedDatas = array_column($filtered, 1);
return json_encode(['labels' => $sortedNames, 'values' => $sortedDatas]);
} ?>
</script>
</body>
</html>
