google / google-visualization-issues

288 stars 35 forks source link

The trend line looks weird. #2937

Open ggsyunho opened 2 years ago

ggsyunho commented 2 years ago

The trend line goes out of bounds. error(1) 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!