Financial Chart

Generate in-depth financial reports effortlessly using ActiveReportsJS. Offering support for an extensive range of essential financial chart types, ActiveReportsJS empowers you with the versatility to craft everything from straightforward summaries to intricate, data-driven analyses. Start exploring the full potential of ActiveReportsJS with a 30 days free trial today.


<!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
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
    />

    <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>
    <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"
    />
    <style>
      #root {
        height: 100vh;
      }
      #viewer-host,
      #designer-host {
        height: 100%;
      }
      #designer-host {
        display: none;
      }
    </style>
  </head>
  <body onload="load()" style="margin: 0">
    <div id="root">
      <div id="viewer-host"></div>
      <div id="designer-host"></div>
    </div>
    <script>
      var currentReport = undefined;
      var viewerHost = document.getElementById("viewer-host");
      var designerHost = document.getElementById("designer-host");
      function load() {
        var viewer = new ActiveReports.Viewer("#viewer-host");
        var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
          "#designer-host"
        );
        designer.setActionHandlers({
          onRender(report) {
            currentReport = report.definition;
            viewer.open(currentReport);
            viewerHost.style.display = "block";
            designerHost.style.display = "none";
            // return Promise.resolve();
          },
        });
        var designButton = {
          key: "$openDesigner",
          text: "Edit in Designer",
          iconCssClass: "mdi mdi-pencil",
          enabled: true,
          action: function (item) {
            designer.setReport({
              definition: currentReport,
              displayName: "Financial Chart",
            });
            viewerHost.style.display = "none";
            designerHost.style.display = "block";
          },
        };
        viewer.toolbar.addItem(designButton);
        viewer.toolbar.updateLayout({
          default: [
            "$openDesigner",
            "$split",
            "$navigation",
            "$split",
            "$refresh",
            "$split",
            "$history",
            "$split",
            "$zoom",
            "$fullscreen",
            "$split",
            "$print",
            "$split",
            "$singlepagemode",
            "$continuousmode",
            "$galleymode",
          ],
        });
        fetch("CandleStickChart.rdlx-json")
          .then(function (data) {
            return data.json();
          })
          .then(function (report) {
            currentReport = report;
            viewer.open(report);
          });
      }
    </script>
  </body>
</html>

Feedback

Submit and view feedback for

This Product This Page

<!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
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
/>
<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>
<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"
/>
<style>
#root {
height: 100vh;
}
#viewer-host,
#designer-host {
height: 100%;
}
#designer-host {
display: none;
}
</style>
</head>
<body onload="load()" style="margin: 0">
<div id="root">
<div id="viewer-host"></div>
<div id="designer-host"></div>
</div>
<script>
var currentReport = undefined;
var viewerHost = document.getElementById("viewer-host");
var designerHost = document.getElementById("designer-host");
function load() {
var viewer = new ActiveReports.Viewer("#viewer-host");
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
"#designer-host"
);
designer.setActionHandlers({
onRender(report) {
currentReport = report.definition;
viewer.open(currentReport);
viewerHost.style.display = "block";
designerHost.style.display = "none";
// return Promise.resolve();
},
});
var designButton = {
key: "$openDesigner",
text: "Edit in Designer",
iconCssClass: "mdi mdi-pencil",
enabled: true,
action: function (item) {
designer.setReport({
definition: currentReport,
displayName: "Financial Chart",
});
viewerHost.style.display = "none";
designerHost.style.display = "block";
},
};
viewer.toolbar.addItem(designButton);
viewer.toolbar.updateLayout({
default: [
"$openDesigner",
"$split",
"$navigation",
"$split",
"$refresh",
"$split",
"$history",
"$split",
"$zoom",
"$fullscreen",
"$split",
"$print",
"$split",
"$singlepagemode",
"$continuousmode",
"$galleymode",
],
});
fetch("CandleStickChart.rdlx-json")
.then(function (data) {
return data.json();
})
.then(function (report) {
currentReport = report;
viewer.open(report);
});
}
</script>
</body>
</html>