-
Notifications
You must be signed in to change notification settings - Fork 0
/
line.html
5 lines (5 loc) · 3.81 KB
/
line.html
1
2
3
4
5
<html><head></head><body><div id="container">
<h2>Line Chart</h2>
<div id="chart"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="500"><g transform="translate(20, 20)"><g><g transform="translate(0, 460)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5000,5V0.5000H920.5000V5"></path><g class="tick" opacity="1" transform="translate(44.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">0.9</text></g><g class="tick" opacity="1" transform="translate(153.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.0</text></g><g class="tick" opacity="1" transform="translate(263.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.1</text></g><g class="tick" opacity="1" transform="translate(372.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.2</text></g><g class="tick" opacity="1" transform="translate(482.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.3</text></g><g class="tick" opacity="1" transform="translate(591.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.4</text></g><g class="tick" opacity="1" transform="translate(701.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.5</text></g><g class="tick" opacity="1" transform="translate(810.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.6</text></g><g class="tick" opacity="1" transform="translate(920.5,0)"><line stroke="#000" y2="5"></line><text fill="#000" y="10" dy="0.71em">1.7</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-5,460.5000H0.5000V0.5000H-5"></path><g class="tick" opacity="1" transform="translate(0,402.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,344.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">400</text></g><g class="tick" opacity="1" transform="translate(0,285.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">600</text></g><g class="tick" opacity="1" transform="translate(0,227.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">800</text></g><g class="tick" opacity="1" transform="translate(0,168.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">1,000</text></g><g class="tick" opacity="1" transform="translate(0,110.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">1,200</text></g><g class="tick" opacity="1" transform="translate(0,52.5)"><line stroke="#000" x2="-5"></line><text fill="#000" x="-10" dy="0.32em">1,400</text></g></g><g fill="none" stroke-width="1.5"><path stroke="steelblue" d="M0,460L7.3333,459.5000C14.6667,459,29.3333,458,45.8333,454.5000C62.3333,451,80.6667,445,97,437.8333C113.3333,430.6667,127.6667,422.3333,144,404.5000C160.3333,386.6667,178.6667,359.3333,195.1667,338.8333C211.6667,318.3333,226.3333,304.6667,241,281.1667C255.6667,257.6667,270.3333,224.3333,286.8333,175.8333C303.3333,127.3333,321.6667,63.6667,338,42.5000C354.3333,21.3333,368.6667,42.6667,385,42.8333C401.3333,43,419.6667,22,436.1667,35.8333C452.6667,49.6667,467.3333,98.3333,482,132.1667C496.6667,166,511.3333,185,527.6667,204.1667C544,223.3333,562,242.6667,578.3333,270.5000C594.6667,298.3333,609.3333,334.6667,625.8333,357.5000C642.3333,380.3333,660.6667,389.6667,677.1667,400.3333C693.6667,411,708.3333,423,723,431.5000C737.6667,440,752.3333,445,768.6667,447.8333C785,450.6667,803,451.3333,819.3333,453C835.6667,454.6667,850.3333,457.3333,866.8333,458.5000C883.3333,459.6667,901.6667,459.3333,910.8333,459.1667L920,459"></path></g></g></g></svg></div>
</div>
</body></html>