Demos
Features
Controls
Chart
Doughnut Chart

Doughnut Chart

This demo report displays the YTD Sales for each sales territory for the fictitious Treadstone inc. by using the doughnut chart.

index.html
Copy to CodeMine
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ActiveReportsJS sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/resource/common/report-sample-style.css"
    />
    <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script>

    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script>

    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
    <script src="$DEMOROOT$/lib/purejs/license.js"></script>
  </head>
  <body
    onload="initReportSample('viewer-host', 'designer-host', 'TerrirorySales.rdlx-json', 'Pie Chart')"
  >
    <div id="root">
      <div id="viewer-host"></div>
      <div id="designer-host"></div>
    </div>
  </body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/common/report-sample-style.css" /> <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> </head> <body onload="initReportSample('viewer-host', 'designer-host', 'TerrirorySales.rdlx-json', 'Pie Chart')" > <div id="root"> <div id="viewer-host"></div> <div id="designer-host"></div> </div> </body> </html>