examples/charts/TipsChart.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html>
   3 <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5     <title>Charts</title>
   6     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
   8     <style>
   9         .x-tip {
  10         background-color: #fff;
  11         border-radius: 0.5em;
  12         -moz-border-radius: 0.5em;
  13         -webkit-border-radius: 0.5em;
  14         border-radius: 0.5em;
  15         border: 1px solid rgba(134, 84, 41, 0.5);
  16         opacity: 0.95;
  17     }
  18     .x-tip-header {
  19         margin-bottom: 5px;
  20     }
  21     .x-tip .x-panel .x-panel-body.x-layout-fit {
  22         border: none;
  23     }
  24     .x-tip .x-panel.x-grid-section.x-panel-noborder.x-fit-item {
  25         margin: 0;
  26     }
  27     .x-tip .x-panel.x-box-item {
  28         top: 0 !important;
  29     }
  30     .x-tip-header-body .x-component.x-box-item {
  31         width: 100%;
  32         text-align: center;
  33     }
  34     .x-tip-body {
  35         text-shadow: none;
  36     }
  37     .x-panel {
  38             margin: 20px;
  39         }
  40     ul {
  41         margin-left: 10px;
  42     }
  43     ul li {
  44         display: block;
  45         font-weight: normal;
  46         color: #444;
  47         padding: 2px;
  48     }
  49     h1 {
  50         font-size: 18px;
  51         margin: 10px;
  52     }
  53     </style>
  54     <script type="text/javascript" src="../../bootstrap.js"></script>
  55     <script type="text/javascript" src="../example-data.js"></script>
  56     <script type="text/javascript" src="TipsChart.js"></script>
  57 </head>
  58     <body id="docbody">
  59     <h1>Chart in tips example</h1>
  60     <div style="margin: 10px;">
  61         Showing a Pie Chart and a Grid Panel as elements in a tooltip. <a href="TipsChart.js">View Source</a>
  62     </div>
  63     </body>
  64 </html>