Creating user interfaces
      Back to home
      1. Knowledge Base
      2. Martini
      3. Creating user interfaces

      How to create charts from your data sources

      How to create charts from a data source and deploy them in dashboards or on a third party website

      Everyone loves a pretty chart. Line charts, bar charts, donuts, pie charts, scatter, bubble, stacked, radar, floating... the list goes on.

      Charts create order out of chaos. They make it easy to identify trends and opportunities.

      Unleash the data that is stored in databases, spreadsheets, legacy systems, and SaaS applications.

      In this demo, you'll learn how to create a chart, embed it in a dashboard, or embed it in any third-party website. The data source for our chart will be a SQL database.

      Watch this downloadable in action

      Line by Line: How this "Charts" demo works

      • Rendering a chart
        • This demo shows multiple ways of rendering a chart depending on the use case. Expand the folder \\code\demo011\webpage_templates\charts to view the types of charts available on this demo.
        • Each folder under charts has 2 webpage templates, one is the chart itself and one is the whole page.
      • Open BarChartPage
        • On line 1: Dataset1 service is called to provide a dataset for our chart.
        • On line 2: Head template is called to set the head part of the page which is the <head> tag of the HTML.
        • On line 3-4: Body tag is called and the BarChart template is called under the body tag.
      • Go to the properties tab of the template, and select Route
        • HTTP Method property is set to GET.
        • URL Path is set to chart/bar which will give us the complete endpoint URL <HOST>/app/chart/bar.
        • Open your browser and visit the given URL and the chart page will be open.
      • Using HTTP Filter to render a chart in an iframe or embed
        • Open `ChartHttpFilter` under `Endpoints`.
        • Under `HTTP Filter Configuration` the `Path Pattern` property is the place where to put what endpoints will be filtered when called for example /app/chart/linechart.
        • Open `HttpFilterListener` service under \\code\demo011\services\http_filter folder.
          This is the service that will be triggered when the endpoint request suffices the condition of the HTTP filter endpoint.
        • On line 3: The map step is added to create a new response object that will be used for the response of the endpoint.
        • On line 4: Script step is added to set a header for the response which is `Content-Security-Policy` and the value is `frame-ancestors 'self'`, which means this will allow same-origin page to be rendered on an Iframe or an Embed.
      • Open `IframeChart` template under \\code\demo011\webpage_templates\iframe folder.
        • On line 1-4: Simple setup of the <head> tag of the page
        • On line 5-6: Body & Div tag is added to give the Iframe a container
        • On line 7: Iframe tag is called with simple style attributes and the src attribute which the value is the endpoint URL of the line chart page
        • Open your browser and visit the `URL` given to the `IframeChart` which was set on the properties view under the `Route` tab.
      • Open `EmbedChart` template under \\code\demo011\webpage_templates\embed folder.
        • On line 1-4: Simple setup of the <head> tag of the page
        • On line 5-6: Body & Div tag is added to give the Embed a container
        • On line 7: Embed tag is called with simple height and width attributes and the src attribute which the value is the endpoint URL of the line chart page
        • Open your browser and visit the `URL` given to the `EmbedChart` which was set on the properties view under the `Route` tab.
      • Rendering Multiple Chart on Single Page
        • As mentioned earlier the implementation is slightly different which is the chart element is separated from the page itself, this is due to allow the chart to be rendered on any page as long as it has libraries it uses.
        • Open `ChartsDashboard` template under \\code\demo011\webpage_templates folder.
        • On line 1-2: `DataSet1` & `DataSet2` are called to provide datasets to all of our charts.
        • On line 3-7: A simple setup for the <head> tag of the page.
        • On line 8: `Script` template is called and put the library used by the charts. the reason, why it's under the <Head> tag and not on the <body> tag is because due to the implementation of the Charts, each Charts has a script that initializes it, in that case, those scripts will execute first before the library which will just cause an error since the library doesn't, exists yet.
        • On line 9-10: <body> & <div> is called as the containers of the charts.
        • On line 11-25: Every row has 2 charts and each column has one corresponding chart.
        • On line 26-28: Bootstrap dependency for simple designing.