Dynamic Charts

Dynamic Charts#

This page explains how the Dynamic Charts feature of Dynamic Django can be used to showcase information in any model without coding

👉 New to AppSeed? Join our 8k+ Community using GitHub One-Click SignIN.

Configuration#

Extracting reports from a source can be a challenging task and Dynamic Charts module aims to solve this task in an easy way. In order to activate the reports extraction, the model needs to be added in settings.

The section is a list of rules saved in a dictionary where the key is the path where the Dynamic Chart feature is provided and the value is the import path of the model.

core/settings.py#
# Syntax: URI -> Import_PATH
DYNAMIC_CHARTS = {
    "product": "home.models.Product",
    "sales": "home.models.Sales",
}

How it works#

The information is extracted and later showcased using a chart template where the user can edit a few properties like:

  • Chart Type: almost every popular type is supported: LINE, BAR, DONUT, RADAR .. etc

  • X-Axis column

  • Y-Axis column

  • Other column requsted by that speficic chart type

  • Each property can be preprocessed via filter like date-processor, uppercase .. etc

In the end, the chart template is applied on the model data and the charts displayed to the users using real data.

UI Sections#

All models registered in “settings.DYNAMIC_CHARTS” are shown in the home page of charts section:

Dynamic Django - HOMEpage of the Dynamic Charts module

When a model is selected, we can see all defined templates and also we can inspect the information on page or the embedded format, that can be integrated in external services.

  • Top section exposes three TABS

    • DataTable for data saved in the model

    • Add Item can be used to add a new item on the model

    • Add Chart: define a new chart

  • 2nd Section

    • Table with all the charts defined for the current model

Dynamic Charts - The table with all defined chart templates
  • Chart Section (bottom)

    • This section becomes visible when the user clicks the view link for a specific chart. For instance this is shown for a POLAR chart

Dynamic Charts - POLAR Chart Sample, extracted from the sales DB Table
  • Embeddable Form

    • Each defined chart can be integrated into external systems via external link that provides the chart without any styles

    • For a DONUT Chart, here is the Embeddable Link

Dynamic Charts - DONUT Chart Sample, embeddable form

Resources#

  • 👉 New to AppSeed? Join our 8k+ Community using GitHub One-Click SignIN.

  • 👉 Download products and start fast a new project

  • 👉 Bootstrap your startUp, MVP or Legacy project with a custom development sprint

Contents