Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Fix Cursor-Point position on ma-serial-chart
-
Ah apologies, you have too.
That was definitely an oversight on my part. However I still recommend you keep things clean and clearly labelled.
I can't honestly see why you would be having an offset. The values would have to be out timestamp wise from your rollup.
Start with having statically defined rollups rather than using the datebar for a start.{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}} --> "1 HOURS"As for flex, what is it you want to achieve?
Make the graphs full width? -
@mrlucretius I was able to reproduce the offset on my pc. The more I change the window size the bigger the offset. I believe it has something to do with the auto-scale. if I change your main div to
<div class="ma-designer-root" id="jhodges" ma-scale-to="ma-ui-page-view" ma-maintain-ratio="letterbox">The offset goes away but the page doesn't scale. I think implementing flex might be a solution. Will see if I can modify the code for your today.
-
Hey,
Thanks for looking at this.
I want to implement Flex for phone / other happiness.
This is a (quick and dirty) last minute prototype on a solar power plant.
While being the first, it will not be the last. There may be hundreds in a few years.
As I learn about mango / angular, I am simultaneously deciding the template and tech for future installs.
I have various web / sysadmin experience but angular / mango is new to me...
So I appreciate any guidance and support you guys may have.
Thanks,
Alex -
Here's your markup. Be sure to remove the position:absolute and top and left values in your style attribute. Can style further once you've put them all in the right place. Am a little tight for time so I can't be of help more today.
<div flex layout="row" layout-fill layout-wrap> <div flex layout-xs="column"> Chart 1 </div> <div flex layout-xs="column"> Chart 2 </div> </div> <div flex layout="row" layout-align="space-between" layout-fill layout-wrap> <div flex layout-xs="column"> Stats 1 </div> <div flex layout-xs="column"> Gauge 1 & 2 </div> </div> <div flex layout="row" layout-align="space-between" layout-fill layout-wrap> <div flex layout-xs="column"> Chart 3 </div> <div flex layout-xs="column"> Chart 4 </div> </div> <div flex layout="row" layout-align="space-between" layout-fill layout-wrap> <div flex layout-xs="column"> Stats 2 </div> <div flex layout-xs="column"> Gauges 3 & 4 </div> </div> -
Hello,
I implemented your markup. Still needs some work. I will see if I can sort it out, however, if you see any obvious omissions or errors I appreciate your help and feedback.
Is this your favorite Flex reference: https://material.angularjs.org/latest/layout/introduction ??
Thanks,
AlexEdit: I have been updating the source as I have fiddled it.
<div class="ma-designer-root" id="jhodges"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex layout="row"> <div layout="column"> <!-- ##################### chart1: meter 1 charts kWh ######################### --> <div id="title-m1-kWh">St. Clair Walker Middle - Total kWh Generated</div> <ma-serial-chart id="chart-m1-kW" style="width: 500px; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kWh" series-1-values="pt_Meter1.kWh_Values" point-title="JHodges.Meter1.kWh" default-type="line" series-1-title="JHodges.Meter1.kWh" export="true"> </ma-serial-chart> </div> <div layout="column"> <!-- ##################### chart2: meter 1 charts kW ######################### --> <div id="title-m1-kW">St. Clair Walker - Realtime kW Generation</div> <ma-serial-chart id="chart-m1-kWh" style="width: 500px; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kW" series-1-values="pt_Meter1.kW_Values" point-title="JHodges.Meter1.kW" default-type="line" series-1-title="JHodges.Meter1.kW"> </ma-serial-chart> </div> </div> <div flex layout="row"> <div flex layout="column"> <!-- ##################### stats1 ######################### --> <div id="lb-m1-miles" style="width: 325px; height: 25px; text-align: right;">Number of Miles Driven in a Car Annually Offset:</div> <ma-point-value id="dp-m1-miles" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_4e6c1706-9429-42da-9852-dcdcc74c72b2" enable-popup="hide"></ma-point-value> <div id="lb-m1-houses" style="width: 325px; height: 25px; text-align: right;">Number of Annual House Energy Use Offset:</div> <ma-point-value id="dp-m1-houses" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_4d6ba9d6-116a-4922-9841-515a22710174" enable-popup="hide"></ma-point-value> <div id="lb-m1-forest" style="width: 325px; height: 25px; text-align: right;">Annual Acres of U.S. Forest Offset:</div> <ma-point-value id="dp-m1-forest" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_2dc969dd-e452-4ead-b321-b95d9e726058" enable-popup="hide"></ma-point-value> <div id="lb-m1-co2" style="width: 325px; height: 25px; text-align: right;">Annual Metric Tons of CO2 Offset:</div> <ma-point-value id="dp-m1-co2" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_b6888a31-5473-4af1-bb40-e300767de812" enable-popup="hide"></ma-point-value> </div> <div flex layout="column"> <!-- ##################### gauges m1 ######################### --> <div flex layout="row"> <div layout-xs="column"> <ma-gauge-chart id="gauge-m1-irradiance" style="width: 200px; height: 200px;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column"> <ma-gauge-chart id="gauge-m1-kW" style="width: 200px; height: 200px;" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <div flex layout="row"> <div flex layout="column"> <!-- ##################### chart3: meter 2 chart kW ######################### --> <div id="title-m2-kWh">Elementary School - Total kWh Generated</div> <ma-serial-chart id="chart-m2-kW" style="width: 500px; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kWh" series-1-values="pt_Meter2.kWh_Values" point-title="JHodges.Meter2.kWh" default-type="line" series-1-title="JHodges.Meter2.kWh" export="true"> </ma-serial-chart> </div> <div flex layout="column"> <!-- ##################### chart4: meter 2 chart kW ######################### --> <div id="title-m2-kW">Elementary School - Realtime kW Generation</div> <ma-serial-chart id="chart-m2-kWh" style="width: 500px; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kW" series-1-values="pt_Meter2.kW_Values" point-title="JHodges.Meter2.kW" default-type="line" series-1-title="JHodges.Meter2.kW"> </ma-serial-chart> </div> </div> <div flex layout="row"> <div flex layout="column"> <!-- ##################### stats2 ######################### --> <div id="lb-m2-miles" style="width: 325px; height: 25px; text-align: right;">Number of Miles Driven in a Car Annually Offset:</div> <ma-point-value id="dp-m2-miles" style="width: 90px; height: 25px; text-align: right;" point-xid="DP_c1da17c5-d74e-4aac-8abb-206d6c659ca8" enable-popup="hide"></ma-point-value> <div id="lb-m2-houses" style="width: 325px; height: 25px; text-align: right;">Number of Annual House Energy Use Offset:</div> <ma-point-value id="dp-m2-houses" style="width: 90px; height: 25px; text-align: right;" point-xid="DP_5a2e9fc3-f3f7-48b7-8deb-ea2b94acadf5" enable-popup="hide"></ma-point-value> <div id="lb-m2-forest" style="width: 325px; height: 25px; text-align: right;">Annual Acres of U.S. Forest Offset:</div> <ma-point-value id="dp-m2-forest" style="width: 90px; height: 25px; text-align: right;" point-xid="DP_e2f44dbe-151d-43d3-a124-bb335bd1e81e" enable-popup="hide"></ma-point-value> <div id="lb-m2-co2" style="width: 325px; height: 25px; text-align: right;">Annual Metric Tons of CO2 Offset:</div> <ma-point-value id="dp-m2-co2" style="width: 90px; height: 25px; text-align: right;" point-xid="DP_627b4c23-461a-47f8-9d44-437d54b7128c" enable-popup="hide"></ma-point-value> </div> <div flex layout="column"> <!-- ##################### gauges m2 ######################### --> <div flex layout="row"> <div layout-xs="column"> <ma-gauge-chart id="gauge-m2-irradiance" style="width: 200px; height: 200px;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column"> <ma-gauge-chart id="gauge-m2-kW" style="width: 200px; height: 200px;" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <!-- ##################### meter 1 ma-point-values ######################### --> <ma-point-values id="pt-m1-kWh" style="width: 200px; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter1.kWh_Values" point="pt_Meter1.kWh" point-xid="JHodges_DP_ec50e6e5-95bb-40f2-850c-96c7c712baa8"> </ma-point-values> <ma-point-values id="pt-m1-kW" style="width: 200px; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter1.kW_Values" point="pt_Meter1.kW" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5"> </ma-point-values> <!-- ##################### meter 2 ma-point-values ######################### --> <ma-point-values id="pt-m2-kWh" style="width: 200px; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter2.kWh_Values" point="pt_Meter2.kWh" point-xid="JHodges_DP_c56ff01c-a145-408d-bdfb-65322622c164"> </ma-point-values> <ma-point-values id="pt-m2-kW" style="width: 200px; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter2.kW_Values" point="pt_Meter2.kW" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf"> </ma-point-values> </div> -
@mrlucretius said in Fix Cursor-Point position on ma-serial-chart:
Is this your favorite Flex reference: https://material.angularjs.org/latest/layout/introduction ??
No I prefer using CSS and a mix of block, inline-block, and grid...
However Flex is good for ensuring a fit to page view.I've made some tiny amendments like a missing flex parameter for the first row of charts. I've also made the charts fit the full width of the container otherwise everything looks lop sided. Same with your text. Have also left-aligned your text, can always make it right again if needs be,
If you are able to provide more instruction as to how you want to it to look I can likely be of more assistance.<div class="ma-designer-root" id="jhodges"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex layout="row" layout-xs="column"> <div flex layout="column" > <!-- ##################### chart1: meter 1 charts kWh ######################### --> <div id="title-m1-kWh">St. Clair Walker Middle - Total kWh Generated</div> <ma-serial-chart id="chart-m1-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kWh" series-1-values="pt_Meter1.kWh_Values" point-title="JHodges.Meter1.kWh" default-type="line" series-1-title="JHodges.Meter1.kWh" export="true"> </ma-serial-chart> </div> <div flex layout="column"> <!-- ##################### chart2: meter 1 charts kW ######################### --> <div id="title-m1-kW">St. Clair Walker - Realtime kW Generation</div> <ma-serial-chart id="chart-m1-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kW" series-1-values="pt_Meter1.kW_Values" point-title="JHodges.Meter1.kW" default-type="line" series-1-title="JHodges.Meter1.kW"> </ma-serial-chart> </div> </div> <div flex layout="row" layout-xs="column"> <div flex layout="column"> <!-- ##################### stats1 ######################### --> <div id="lb-m1-miles" style="width:100%; height: 25px; text-align: left;">Number of Miles Driven in a Car Annually Offset:</div> <ma-point-value id="dp-m1-miles" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_4e6c1706-9429-42da-9852-dcdcc74c72b2" enable-popup="hide"></ma-point-value> <div id="lb-m1-houses" style="width:100%; height: 25px; text-align: left;">Number of Annual House Energy Use Offset:</div> <ma-point-value id="dp-m1-houses" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_4d6ba9d6-116a-4922-9841-515a22710174" enable-popup="hide"></ma-point-value> <div id="lb-m1-forest" style="width:100%; height: 25px; text-align: left;">Annual Acres of U.S. Forest Offset:</div> <ma-point-value id="dp-m1-forest" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_2dc969dd-e452-4ead-b321-b95d9e726058" enable-popup="hide"></ma-point-value> <div id="lb-m1-co2" style="width:100%; height: 25px; text-align: left;">Annual Metric Tons of CO2 Offset:</div> <ma-point-value id="dp-m1-co2" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_b6888a31-5473-4af1-bb40-e300767de812" enable-popup="hide"></ma-point-value> </div> <div flex layout="column"> <!-- ##################### gauges m1 ######################### --> <div flex layout="row"> <div layout-xs="column"> <ma-gauge-chart id="gauge-m1-irradiance" style="width: 200px; height: 200px;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column"> <ma-gauge-chart id="gauge-m1-kW" style="width: 200px; height: 200px;" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <div flex layout="row" layout-xs="column"> <div flex layout="column"> <!-- ##################### chart3: meter 2 chart kW ######################### --> <div id="title-m2-kWh">Elementary School - Total kWh Generated</div> <ma-serial-chart id="chart-m2-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kWh" series-1-values="pt_Meter2.kWh_Values" point-title="JHodges.Meter2.kWh" default-type="line" series-1-title="JHodges.Meter2.kWh" export="true"> </ma-serial-chart> </div> <div flex layout="column"> <!-- ##################### chart4: meter 2 chart kW ######################### --> <div id="title-m2-kW">Elementary School - Realtime kW Generation</div> <ma-serial-chart id="chart-m2-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kW" series-1-values="pt_Meter2.kW_Values" point-title="JHodges.Meter2.kW" default-type="line" series-1-title="JHodges.Meter2.kW"> </ma-serial-chart> </div> </div> <div flex layout="row" layout-xs="column"> <div flex layout="column"> <!-- ##################### stats2 ######################### --> <div id="lb-m2-miles" style="width:100%; height: 25px; text-align: left;">Number of Miles Driven in a Car Annually Offset:</div> <ma-point-value id="dp-m2-miles" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_c1da17c5-d74e-4aac-8abb-206d6c659ca8" enable-popup="hide"></ma-point-value> <div id="lb-m2-houses" style="width:100%; height: 25px; text-align: left;">Number of Annual House Energy Use Offset:</div> <ma-point-value id="dp-m2-houses" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_5a2e9fc3-f3f7-48b7-8deb-ea2b94acadf5" enable-popup="hide"></ma-point-value> <div id="lb-m2-forest" style="width:100%; height: 25px; text-align: left;">Annual Acres of U.S. Forest Offset:</div> <ma-point-value id="dp-m2-forest" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_e2f44dbe-151d-43d3-a124-bb335bd1e81e" enable-popup="hide"></ma-point-value> <div id="lb-m2-co2" style="width:100%; height: 25px; text-align: left;">Annual Metric Tons of CO2 Offset:</div> <ma-point-value id="dp-m2-co2" style="width: 90px; height: 25px; text-align: left;" point-xid="DP_627b4c23-461a-47f8-9d44-437d54b7128c" enable-popup="hide"></ma-point-value> </div> <div flex layout="column"> <!-- ##################### gauges m2 ######################### --> <div flex layout="row"> <div layout-xs="column"> <ma-gauge-chart id="gauge-m2-irradiance" style="width: 200px; height: 200px;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column"> <ma-gauge-chart id="gauge-m2-kW" style="width: 200px; height: 200px;" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <!-- ##################### meter 1 ma-point-values ######################### --> <ma-point-values id="pt-m1-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter1.kWh_Values" point="pt_Meter1.kWh" point-xid="JHodges_DP_ec50e6e5-95bb-40f2-850c-96c7c712baa8"> </ma-point-values> <ma-point-values id="pt-m1-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter1.kW_Values" point="pt_Meter1.kW" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5"> </ma-point-values> <!-- ##################### meter 2 ma-point-values ######################### --> <ma-point-values id="pt-m2-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter2.kWh_Values" point="pt_Meter2.kWh" point-xid="JHodges_DP_c56ff01c-a145-408d-bdfb-65322622c164"> </ma-point-values> <ma-point-values id="pt-m2-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="{{dateBar.rollupType}}" values="pt_Meter2.kW_Values" point="pt_Meter2.kW" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf"> </ma-point-values> </div>Fox
-
Hi,
Thanks so much for your help. Now it is behaving about how I would expect.
Can you show me how to implement Grid on the Stats "box". I would like the labels to be right aligned to a column border in a 3x4 (wxh) grid, left most column, and then the values to be right aligned, center column, and then the right hand column is just for padding. Approximately like so:
The next step is to make it phone happy. How can I make the two columns collapse to one column for phone viewing?
Ie, Chart2 lands in a new row under Chart1, then Stats1, Gauges1, Chart3, Chart4, Stats2, Gauges2 all stacked up.
I really appreciate the assistance, and you are now owed a token for a pitcher of beer.
Thanks,
Alex -
If I look at Mats html it should already be mobile friendly.
<div flex layout="row" layout-xs="column">
means that the div is a row but if the window is extra small then it will be a column.
As for what you want to accomplish with the stats box go through this page : https://material.angularjs.org/latest/layout/alignment give it a shot and if you don't come right paste your code and ask for help. Don't be afraid to copy code from the angular material site and play with it until it does what you want. -
Thanks Craig. Yes the layout is already mobile ready for you. Any other issues, just shout.
Fox -
Hey,
Thanks guys. The template was close...
I added the layout-xs="column" to each of the four row tags and now it collapses like so:
<div flex layout="row" layout-xs="column" layout-fill layout-wrap> <div flex layout-xs="column" >I will work on the Grid stuff, and see how far I get. Thanks for the pointers.
Edit: I was able to set a max width like so on the root div style:
<div class="ma-designer-root" id="jhodges" style="max-width: 800px;">-Alex
-
Nicely done, looking forward to seeing the finished product!
Fox -
Ok,
Here is the latest flex page.
-Alex
<div class="ma-designer-root" id="jhodges" style="max-width: 1024px;"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex="" layout="row" layout-xs="column" layout-fill="" layout-wrap=""> <div flex="" layout-xs="column"> <!-- ##################### chart1: meter 1 charts kWh ######################### --> <div id="title-m1-kWh" style="width:100%; text-align: center;">St. Clair Walker Middle - Total kWh Generated</div> <ma-serial-chart id="chart-m1-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kWh" series-1-values="pt_Meter1.kWh_Values" point-title="JHodges.Meter1.kWh" default-type="line" series-1-title="JHodges.Meter1.kWh" export="true"> </ma-serial-chart> </div> <div flex="" layout-xs="column"> <!-- ##################### chart2: meter 1 charts kW ######################### --> <div id="title-m1-kW" style="width:100%; text-align: center;">St. Clair Walker - Realtime kW Generation</div> <ma-serial-chart id="chart-m1-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kW" series-1-values="pt_Meter1.kW_Values" point-title="JHodges.Meter1.kW" default-type="line" series-1-title="JHodges.Meter1.kW"> </ma-serial-chart> </div> </div> <div flex layout="row" layout-xs="column" layout-fill layout-wrap> <div flex layout-xs="column"> <!-- ##################### stats1 ######################### --> <div layout="row"> <div id="lb-m1-title" style="width:100%; height: 25px; text-align: center; margin: 10px;">St. Clair Walker Middle Annual Offsets:</div> </div> <div layout="row"> <div id="lb-m1-miles" style="width:60%; height: 25px; text-align: right;">Miles Driven in a Car:</div> <ma-point-value id="dp-m1-miles" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_4e6c1706-9429-42da-9852-dcdcc74c72b2" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-houses" style="width:60%; height: 25px; text-align: right;">Single House Energy Usage:</div> <ma-point-value id="dp-m1-houses" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_4d6ba9d6-116a-4922-9841-515a22710174" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-forest" style="width:60%; height: 25px; text-align: right;">Acres of U.S. Forest:</div> <ma-point-value id="dp-m1-forest" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_2dc969dd-e452-4ead-b321-b95d9e726058" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-co2" style="width:60%; height: 25px; text-align: right;">Metric Tons of CO2:</div> <ma-point-value id="dp-m1-co2" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_b6888a31-5473-4af1-bb40-e300767de812" enable-popup="hide"></ma-point-value> </div> </div> <div flex="" layout-xs="column"> <!-- ##################### gauges m1 ######################### --> <div flex layout="row"> <div layout="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m1-irradiance" style="width: 200px; height: 200px; margin-left: auto;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m1-kW" style="width: 200px; height: 200px; margin-right: auto;" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <div flex="" layout="row" layout-xs="column" layout-align="space-between" layout-fill="" layout-wrap=""> <div flex="" layout-xs="column"> <!-- ##################### chart3: meter 2 chart kW ######################### --> <div id="title-m2-kWh" style="width:100%; text-align: center;">Elementary School - Total kWh Generated</div> <ma-serial-chart id="chart-m2-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kWh" series-1-values="pt_Meter2.kWh_Values" point-title="JHodges.Meter2.kWh" default-type="line" series-1-title="JHodges.Meter2.kWh" export="true"> </ma-serial-chart> </div> <div flex="" layout-xs="column"> <!-- ##################### chart4: meter 2 chart kW ######################### --> <div id="title-m2-kW" style="width:100%; text-align: center;">Elementary School - Realtime kW Generation</div> <ma-serial-chart id="chart-m2-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kW" series-1-values="pt_Meter2.kW_Values" point-title="JHodges.Meter2.kW" default-type="line" series-1-title="JHodges.Meter2.kW"> </ma-serial-chart> </div> </div> <div flex="" layout="row" layout-xs="column" layout-align="space-between" layout-fill="" layout-wrap=""> <div flex layout-xs="column"> <!-- ##################### stats2 ######################### --> <div layout="row"> <div id="lb-m2-title" style="width:100%; height: 25px; text-align: center; margin: 10px;">Elementary School Annual Offsets:</div> </div> <div layout="row"> <div id="lb-m2-miles" style="width:60%; height: 25px; text-align: right;">Miles Driven in a Car:</div> <ma-point-value id="dp-m2-miles" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_c1da17c5-d74e-4aac-8abb-206d6c659ca8" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-houses" style="width:60%; height: 25px; text-align: right;">Single House Energy Usage:</div> <ma-point-value id="dp-m2-houses" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_5a2e9fc3-f3f7-48b7-8deb-ea2b94acadf5" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-forest" style="width:60%; height: 25px; text-align: right;">Acres of U.S. Forest:</div> <ma-point-value id="dp-m2-forest" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_e2f44dbe-151d-43d3-a124-bb335bd1e81e" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-co2" style="width:60%; height: 25px; text-align: right;">Metric Tons of CO2:</div> <ma-point-value id="dp-m2-co2" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_627b4c23-461a-47f8-9d44-437d54b7128c" enable-popup="hide"></ma-point-value> </div> </div> <div flex="" layout-xs="column"> <!-- ##################### gauges m2 ######################### --> <div flex="" layout="row"> <div layout-xs="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m2-irradiance" style="width: 200px; height: 200px; margin-left: auto;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m2-kW" style="width: 200px; height: 200px; margin-right: auto;" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <!-- ##################### meter 1 ma-point-values ######################### --> <ma-point-values id="pt-m1-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter1.kWh_Values" point="pt_Meter1.kWh" point-xid="JHodges_DP_ec50e6e5-95bb-40f2-850c-96c7c712baa8"> </ma-point-values> <ma-point-values id="pt-m1-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter1.kW_Values" point="pt_Meter1.kW" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5"> </ma-point-values> <!-- ##################### meter 2 ma-point-values ######################### --> <ma-point-values id="pt-m2-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter2.kWh_Values" point="pt_Meter2.kWh" point-xid="JHodges_DP_c56ff01c-a145-408d-bdfb-65322622c164"> </ma-point-values> <ma-point-values id="pt-m2-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter2.kW_Values" point="pt_Meter2.kW" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf"> </ma-point-values> </div> -
Bravo! Well done, really good to see you were able to use the bones provided and fix your own layout.
-
I am sure some of the tags / attributes are not needed here and there, if anyone is willing to clean this up a bit or describe the thought process I would appreciate it.
Or, do nothing, because you know what they say, if it is not broken, don't fix it...
Thanks for all the help. Will continue to RTFM...
-Alex
-
My advice is to just keep it simple. If you know what you want to achieve, work back from that and break it down.
All else fails, you know we're all here to assist.Fox
