Open ggsyunho opened 2 years ago
The trend line goes out of bounds. The html code I wrote is below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Assessment</title> </head> <style> body { margin: 0; } div.Header { align-items: center; background: #fff; border-bottom: 1px solid #dadce0; display: flex; height: 64px; justify-content: space-between; left: 0; padding: 0 20px; position: static; right: 0; top: 0; z-index: 5; } div.Logo { top: 20px; left: 20px; } div.Logo img { height: 60px; width: auto; } div.ChangeLanguage { top: 20px; right: 20px; } h1 { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 3.44rem; font-weight: bold; line-height: 1.2; text-align: center; } h2 { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 2.44rem; font-weight: bold; line-height: 1.2; margin: 30px; } div.TAM_VS_AK { width: 1300px; height: 750px; position: relative; margin: 0 auto; } div.chartscatter_div { width: 750px; height: 750px; display: inline-block; } div.trendlineEquation { width: 180px; position: absolute; bottom: 12%; right: 48%; } div.EPAStandard_div { width: 45%; position: absolute; bottom: 12%; left: 55%; } .federal { height: 70px; width: auto; } p { font-size: 1.2rem; margin: 15px 30px; } p.EPAStandard { font-size: 1.2rem; margin: 15px 30px 40px 30px; } p.Addendum { font-size: 0.9rem; margin: 0 30px 0 0; } p.title { font-size: 0.9rem; margin: 0 0 0 0; } span { font-size: 1.2rem; display: inline; } </style> <body> <div class="Header"> <div class="Logo"> <a href=""> <img src=""> </a> </div> <div class="ChangeLanguage"> <a>KOR</a> </div> </div> <h1>Outdoor Airquality Data</h1> <h2>PM2.5 Continuous Monitor Comparability Assessments</h2> <p>Data are summarized : </p> </p> <div class="TAM_VS_AK"> <div id="chartscatter_div" class="chartscatter_div"></div> <div id="trendlineEquation" class="trendlineEquation">y = 0.674x - 1.346<br>R = 0.961<br>N = 11</div> <div id="EPAStandard_div" class="EPAStandard_div"> <table> <td> <p class = "title">Title 40. Protection of Environment. Part 53</p> <p class = "title">TEST SPECIFICATIONS FOR PM2.5 CANDIDATE EQUIVALENT METHODS</p> </td> <td> <img class = "federal" src="national_archives_and_records_administration_127547.jpg"> </td> <td> <p class = "title">CODE OF FEDERAL REGULATIONS</p> </td> </table> <table class="tg" border = "3"> <thead> <tr> <th class="tg-0lax" rowspan="2">Specification</th> <th class="tg-0lax">PM2.5</th> <th class="tg-0lax" rowspan="2">Result</th> </tr> <tr> <th class="tg-0lax">Class III</th> </tr> </thead> <tbody> <tr> <td class="tg-0lax">Precision of replicate reference method measurements, PRj or RPRj respectively; RP for Class II or III PM2.5 maximum.</td> <td class="tg-0lax">Gravimetric method : 10%<sup>1</sup> BAM1020 : 15%<sup>1</sup></td> <td class="tg-0lax">-</td> </tr> <tr> <td class="tg-0lax">Precision of PM2.5 candidate method, CP, each site.</td> <td class="tg-0lax">15%<sup>1</sup></td> <td class="tg-0lax">-</td> </tr> <tr> <td class="tg-0lax">Slope of regression relationship.</td> <td class="tg-0lax">1 ± 0.10</td> <td class="tg-0lax"><span id="Slope">0.674</span></td> </tr> <tr> <td class="tg-0lax">Intercept of regression relationship, ㎍/㎥.</td> <td class="tg-0lax">Between: 15.05 - (17.32 × slope), but not less than -2.0; and 15.05 - (13.20 × slope), but not more than + 2.0</td> <td class="tg-0lax"><span id="Intercept">-1.346</span></td> </tr> <tr> <td class="tg-0lax">Correlation of reference method and candidate method measurements.</td> <td class="tg-0lax">≥0.93―for CCV ≤0.4; ≥0.85 + 0.2 × CCV―for 0.4 ≤CCV ≤0.5; ≥0.95―for CCV ≥0.5</td> <td class="tg-0lax"><span id="Correlation_Coefficient">0.961</span></td> </tr> </tbody> </table> <p style="font-size: 0.9rem" class="Addendum"><sup>1</sup> Calculated as the root mean square over all measurement sets.</p> </div> </div> </div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var arrayData24 = [ [ 31.6, 18, "2021-11-01</br>Airkorea(Gammul-myeon) : 31.6[㎍/㎥]</br>TAM(21) : 18.0[㎍/㎥]" ], [ 28.2, 18.7, "2021-11-02</br>Airkorea(Gammul-myeon) : 28.2[㎍/㎥]</br>TAM(21) : 18.7[㎍/㎥]" ], [ 34, 25.5, "2021-11-03</br>Airkorea(Gammul-myeon) : 34.0[㎍/㎥]</br>TAM(21) : 25.5[㎍/㎥]" ], [ 45.4, 25.2, "2021-11-04</br>Airkorea(Gammul-myeon) : 45.4[㎍/㎥]</br>TAM(21) : 25.2[㎍/㎥]" ], [ 40.2, 28.2, "2021-11-05</br>Airkorea(Gammul-myeon) : 40.2[㎍/㎥]</br>TAM(21) : 28.2[㎍/㎥]" ], [ 34.9, 24.4, "2021-11-06</br>Airkorea(Gammul-myeon) : 34.9[㎍/㎥]</br>TAM(21) : 24.4[㎍/㎥]" ], [ 23.3, 11.4, "2021-11-07</br>Airkorea(Gammul-myeon) : 23.3[㎍/㎥]</br>TAM(21) : 11.4[㎍/㎥]" ], [ 8, 6.3, "2021-11-08</br>Airkorea(Gammul-myeon) : 8.0[㎍/㎥]</br>TAM(21) : 6.3[㎍/㎥]" ], [ 5.1, 3.9, "2021-11-09</br>Airkorea(Gammul-myeon) : 5.1[㎍/㎥]</br>TAM(21) : 3.9[㎍/㎥]" ], [ 11, 3.6, "2021-11-10</br>Airkorea(Gammul-myeon) : 11.0[㎍/㎥]</br>TAM(21) : 3.6[㎍/㎥]" ], [ 10, 3.2, "2021-11-11</br>Airkorea(Gammul-myeon) : 10.0[㎍/㎥]</br>TAM(21) : 3.2[㎍/㎥]" ] ]; google.charts.load('current', { packages: ['corechart', 'line'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } }); data.addRows(arrayData24); var options = { chartArea: { width: '80%', height: '80%' }, title: 'PM2.5 Daily Average Concentration Coefficient of Correlation\n< 11/01/21 - 11/11/21 >', hAxis: { title: 'Airkorea(Gammul-myeon)', titleTextStyle: { bold: false, italic: false } }, vAxis: { title: 'TAM(21)', titleTextStyle: { bold: false, italic: false } }, trendlines: { 0: { type: 'linear' } }, colors: ['#42A6F7'], crosshair: { trigger: 'both' }, tooltip: { isHtml: 'true' }, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chartscatter_div')); chart.draw(data, options); } </script> </body> </html>
Is there any way that the blue trendline doesn't fall inside the red circle? Please Help me!
The trend line goes out of bounds. The html code I wrote is below.
Is there any way that the blue trendline doesn't fall inside the red circle? Please Help me!