| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 | 
|  | 3 <html> | 
|  | 4   <head> | 
|  | 5     <meta charset="utf-8"> | 
|  | 6     <title>Charted — Interactive demo</title> | 
|  | 7     <link rel="stylesheet" href="demo_charts.css"> | 
|  | 8     <link rel="stylesheet" href="packages/charted/charts/themes/quantum_theme.cs
    s"> | 
|  | 9     <style> | 
|  | 10       body { | 
|  | 11         padding: 0; | 
|  | 12         margin: 0; | 
|  | 13       } | 
|  | 14       .controls { | 
|  | 15         padding: 30px; | 
|  | 16         border-right: 1px solid #d3d3d3; | 
|  | 17         background-color: #eee; | 
|  | 18         display: flex; | 
|  | 19         flex-direction: column; | 
|  | 20         justify-content: space-between; | 
|  | 21         overflow: auto; | 
|  | 22         min-width: 250px; | 
|  | 23         max-width: 250px; | 
|  | 24         position: fixed; | 
|  | 25         height: 100%; | 
|  | 26       } | 
|  | 27       .control-category { | 
|  | 28         padding: 10px 0; | 
|  | 29         border-bottom: 1px solid #ccc; | 
|  | 30       } | 
|  | 31       .control-category:last-child { | 
|  | 32         border-bottom: 0; | 
|  | 33       } | 
|  | 34       button, select { | 
|  | 35         margin-bottom: 10px; | 
|  | 36       } | 
|  | 37       .chart-wrapper { | 
|  | 38         min-width: 600px; | 
|  | 39         max-width: 1000px; | 
|  | 40         margin-left: 325px; | 
|  | 41       } | 
|  | 42     </style> | 
|  | 43   </head> | 
|  | 44   <body> | 
|  | 45     <div class="controls"> | 
|  | 46       <div class="controls-inner"> | 
|  | 47         <h1 class="title">Charted — Interactive demo</h1> | 
|  | 48         <div class="control-category"> | 
|  | 49           <h2>Series</h2> | 
|  | 50           <select id="select-series"></select> | 
|  | 51           <button id="add-series">+</button> | 
|  | 52           <button id="remove-series">-</button> | 
|  | 53 | 
|  | 54           <h2>Series renderer</h2> | 
|  | 55           <select id="select-renderer"></select> | 
|  | 56 | 
|  | 57           <h2>Columns in series</h2> | 
|  | 58           <div id="column-buttons"></div> | 
|  | 59         </div> | 
|  | 60         <div class="control-category"> | 
|  | 61           <h2>Data rows</h2> | 
|  | 62           <button id="add-row">Add row</button> | 
|  | 63           <button id="remove-row">Remove last row</button> | 
|  | 64         </div> | 
|  | 65         <div class="control-category"> | 
|  | 66           <h2>Internationalization</h2> | 
|  | 67           <div> | 
|  | 68             <input type="checkbox" id="rtl-use-script"/> | 
|  | 69             <label for="rtl-use-script">Use RTL script</label> | 
|  | 70           </div> | 
|  | 71           <div> | 
|  | 72             <input type="checkbox" id="rtl-use-layout"/> | 
|  | 73             <label for="rtl-use-layout">Use RTL Layout</label> | 
|  | 74           </div> | 
|  | 75           <div> | 
|  | 76             <input type="checkbox" id="rtl-switch-axes" disabled/> | 
|  | 77             <label for="rtl-switch-axes">Switch axis direction for RTL</label> | 
|  | 78           </div> | 
|  | 79         </div> | 
|  | 80       </div> | 
|  | 81     </div> | 
|  | 82     <div class="chart-wrapper"> | 
|  | 83       <div class="chart-title-wrapper"> | 
|  | 84         <div class="chart-title">Interactive chart demo</div> | 
|  | 85         <div class="chart-subtitle">Use the left panel to customize chart</div> | 
|  | 86       </div> | 
|  | 87       <div class="chart-host-wrapper"> | 
|  | 88         <div class="chart-host" dir="ltr"></div> | 
|  | 89         <div class="chart-legend-host"></div> | 
|  | 90       </div> | 
|  | 91     </div> | 
|  | 92     <script type="application/dart" src="demo_interactive.dart"></script> | 
|  | 93     <script src="packages/browser/dart.js"></script> | 
|  | 94   </body> | 
|  | 95 </html> | 
| OLD | NEW | 
|---|