| |
| <html> |
| |
| <head> |
| <title>Scatter Chart</title> |
| <link href='table.css' rel='stylesheet' type='text/css' media='screen' /> |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script> |
| <script src='utils.js'></script> |
| <style> |
| canvas { |
| -moz-user-select: none; |
| -webkit-user-select: none; |
| -ms-user-select: none; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div style='width:50%''> |
| |
| <table cellspacing='0' cellpadding='0' class='demo-table' > |
| <tr> |
| <th bgcolor='B0C4DE'>Best Area</th> |
| <th bgcolor='B0C4DE'>Best Gate Count</th> |
| <th bgcolor='B0C4DE'>Best Delay</th> |
| </tr> |
| <tr> |
| <td>1293.74</td> |
| <td>170</td> |
| <td>1780.49</td> |
| </tr> |
| <tr> |
| <td>-p</td> |
| <td>-p</td> |
| <td>-p</td> |
| </tr> |
| </table><br> |
| |
| <table cellspacing='0' cellpadding='0' class='demo-table' > |
| <tr> |
| <th bgcolor='B0C4DE'>Startegy</th> |
| <th bgcolor='B0C4DE'>Gate Count</th> |
| <th bgcolor='B0C4DE'>Area (um^2)</th> |
| <th bgcolor='B0C4DE'>Delay (ps)</th> |
| |
| <th bgcolor='B0C4DE'>Gates Ratio</th> |
| <th bgcolor='B0C4DE'>Area Ratio</th> |
| <th bgcolor='B0C4DE'>Delay Ratio</th> |
| |
| </tr> |
| <tr> |
| <td>S1: -p</td> |
| <td>250</td> |
| <td>2024.44</td> |
| <td bgcolor='#ccff99'>1780.49</td> |
| <td>1.47</td> |
| <td>1.564</td> |
| <td bgcolor='#FFFACD'>1</td> |
| </tr> |
| <tr> |
| <td>S2: -p</td> |
| <td>282</td> |
| <td>2190.85</td> |
| <td>1905.66</td> |
| <td>1.658</td> |
| <td>1.693</td> |
| <td bgcolor='#FFFACD'>1.07</td> |
| </tr> |
| <tr> |
| <td>S3: -p</td> |
| <td>283</td> |
| <td>2215.88</td> |
| <td>1856.86</td> |
| <td>1.664</td> |
| <td>1.712</td> |
| <td bgcolor='#FFFACD'>1.042</td> |
| </tr> |
| <tr> |
| <td>S4: -p</td> |
| <td>254</td> |
| <td>1976.90</td> |
| <td>1890.11</td> |
| <td>1.494</td> |
| <td>1.528</td> |
| <td bgcolor='#FFFACD'>1.061</td> |
| </tr> |
| <tr> |
| <td>S5: -p</td> |
| <td>176</td> |
| <td>1320.02</td> |
| <td>2899.06</td> |
| <td bgcolor='#FFFACD'>1.035</td> |
| <td bgcolor='#FFFACD'>1.02</td> |
| <td>1.628</td> |
| </tr> |
| <tr> |
| <td>S6: -p</td> |
| <td>178</td> |
| <td>1318.76</td> |
| <td>2784.84</td> |
| <td bgcolor='#FFFACD'>1.047</td> |
| <td bgcolor='#FFFACD'>1.019</td> |
| <td>1.564</td> |
| </tr> |
| <tr> |
| <td>S7: -p</td> |
| <td bgcolor='#ccff99'>170</td> |
| <td bgcolor='#ccff99'>1293.74</td> |
| <td>2856.95</td> |
| <td bgcolor='#FFFACD'>1</td> |
| <td bgcolor='#FFFACD'>1</td> |
| <td>1.604</td> |
| </tr> |
| </table> |
| |
| </div> |
| <div style='width:65%''> |
| <canvas id='myChart'></canvas> |
| </div> |
| |
| |
| |
| <script> |
| var ctx = document.getElementById('myChart'); |
| var color = Chart.helpers.color; |
| var scatterChart = new Chart(ctx, { |
| type: 'scatter', |
| |
| data: { |
| datasets: [ |
| |
| { |
| label: 'S1', |
| borderColor: window.chartColors.red, |
| backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 2024.44, |
| y: 1780.49 |
| }] |
| },{ |
| label: 'S2', |
| borderColor: window.chartColors.olive, |
| backgroundColor: color(window.chartColors.olive).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 2190.85, |
| y: 1905.66 |
| }] |
| },{ |
| label: 'S3', |
| borderColor: window.chartColors.yellow, |
| backgroundColor: color(window.chartColors.yellow).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 2215.88, |
| y: 1856.86 |
| }] |
| },{ |
| label: 'S4', |
| borderColor: window.chartColors.green, |
| backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 1976.90, |
| y: 1890.11 |
| }] |
| },{ |
| label: 'S5', |
| borderColor: window.chartColors.blue, |
| backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 1320.02, |
| y: 2899.06 |
| }] |
| },{ |
| label: 'S6', |
| borderColor: window.chartColors.purple, |
| backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 1318.76, |
| y: 2784.84 |
| }] |
| },{ |
| label: 'S7', |
| borderColor: window.chartColors.grey, |
| backgroundColor: color(window.chartColors.grey).alpha(0.2).rgbString(), |
| pointRadius: 7, |
| data: [{ |
| x: 1293.74, |
| y: 2856.95 |
| }] |
| }, |
| ] |
| }, |
| options: { |
| title: { |
| display: true, |
| text: 'Synthesis Strategies Comparison' |
| }, |
| scales: { |
| xAxes: [{ |
| type: 'linear', |
| position: 'bottom', |
| scaleLabel: { |
| display: true, |
| labelString: 'Area' |
| } |
| }], |
| yAxes: [{ |
| type: 'linear', |
| position: 'left', |
| scaleLabel: { |
| display: true, |
| labelString: 'Delay' |
| } |
| }] |
| } |
| } |
| }); |
| </script> |
| |
| </body> |
| |
| </html> |
| |
| |
