Struggling with embedding matlab visualisations (area plots) in a webpage - cant get width and data period right

1 view (last 30 days)
Julian Collison
Julian Collison on 25 Apr 2018
Commented: Julian Collison on 25 Apr 2018
Hi all. I am struggling with this page with displays some embedded visualisations http://energymonitor.collisonsonline.co.uk/ Whilst it works fairly well, I cant work out how to get the top graph to scale to the full width of the iframe (1300 pixels) and also to only show 24hrs on the x-axis not the 30hrs it seems to show. If I set the width of the top graph to larger numbers, the left hand edge stays in the same place and the right hand edge goes off the edge of the frame
readChannelID = [461653];
readAPIKey = '4555BYFWVBXOMQGB';
%get pv data
[data,time] = thingSpeakRead(readChannelID,'Fields',[1,2,3,4],'NumDays',1);
area(time, data(:,1)); hold on
area(time, data(:,3));
area(time, data(:,4));
area(time, data(:,2));
ylim([-inf,inf])
lgd = legend('PV output','Heater','Consumption','Import/Export');
title(lgd,'Energy readings')
set(lgd,'location','best')
line(xlim(), [0,0], 'LineWidth', 1, 'Color', 'k')
xlabel("Date / Time")
ylabel("KW");
title("Energy Summary")
h = zoom;
h.Motion = 'horizontal';
h.Enable = 'on';
% zoom in on the plot in the horizontal direction.
This is the webpage HTML
<html>
<head>
<title>Home Energy Monitor</title>
</head>
<body>
<table border=2 bordercolor="#0000FF">
<tr>
<td colspan="3">
<iframe width="1300" height="320" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/226024?width=1250&height=300&dynamic=true&update=15"></iframe></td>
</tr>
<tr>
<td>
<iframe width="430" height="270" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/223871?width=400&height=250&dynamic=true&update=15"></iframe>
</td>
<td>
<iframe width="430" height="270" style="border: 1px solid #cccccc;" src=
"https://thingspeak.com/apps/matlab_visualizations/223873?width=400&height=250&dynamic=true&update=15"></iframe>
</td>
<td>
<iframe width="430" height="270" style="border: 1px solid #cccccc;" src= "https://thingspeak.com/apps/matlab_visualizations/223872?width=400&height=250&dynamic=true&update=15"></iframe>
</td>
</html>
  1 Comment
Julian Collison
Julian Collison on 25 Apr 2018
Also, please could someone advise how I can get the x axis ticks to be, say, every two hours rather than 6 as it is showing at the moment?
I do apologise but I am new to matlab visualisations and find it hard to get my head round it's syntax

Sign in to comment.

Sign in to answer this question.

Answers (0)

Communities

More Answers in the  ThingSpeak Community

Categories

Find more on Visualize Data in Help Center and File Exchange

Tags

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!