ChartJS

Using the ChartJS library v2.7.1

For this content, the panel frame url_name must be frame_chartjs, and it must have a type (e.g. combo_double_y_axis).

{
    'title': 'Performance',
    'width': 12,
    'height': 450,
    'full_row': True,
    'type': 'combo_double_y_axis',
    'url_name': 'frame_chartjs',
    'url_action_name': 'panel_delivery_report_monthly_otp_autoform',
    ...

The content has the following attributes and possible panel type values (defined at the panel level, not the content level):

• view with possible values:

  • api_views.ChartJSAPIPie for pie charts, with required panel type pie

  • api_views.ChartJSAPILine for line charts

  • api_views.ChartJSAPIBar for bar charts, with possible panel types bar (vertical bars) or horizontalBar (horizontal bars). The panel attribute stacked_chart can be set to False to avoid stacking the bars if the grouping has more than one field.

  • api_views.ChartJSAPIBarDaily for bar charts with datetime values converted into date values

  • api_views.ChartJSAPIRadar for radar charts with required panel type radar

{
    "title": "Monthly OTP",
    "width": 12,
    "height": 565,
    "row_start": True,
    "type": "combo_double_y_axis",
    "url_name": "frame_chartjs",
    "url_action_name": "panel_scorecard_monthly_otp",
    "content": {
        'view': custom_views.ChartJSAPIComboOTP,
        'url_params_list': [
            None,
            {'group_by': 'vendor__name'},
            {'group_by': 'ready_d_month__year_month_name_short'},
        ],
        'view_params': {
            'label_quantity': 'Shipped Quantity (units)',
            'month_field': 'ready_d_month',
            'model': custom_models.Delivery,
            'decimal_rounding': 4,
            'limit': 15,
            'order_by': '-annotation',
            'aggregations': [
                {'function': 'Sum', 'value': 'ready_quantity'},
                {'function': 'Custom', 'value': Cast(Sum('ontime_quantity'), FloatField())/Cast(Sum('ready_quantity'), FloatField())},
            ],
            'include_filters_extra': {
                'monitor__isnull': False,
                'ready_quantity__gt': 0,
            }
        },
    }
}