Dashboard Chart - Expanded Type Support

The dashboard charting feature has been expanded in v11 release 1 to support not only a Canvas chart, but SVG, PNG and a URL to an Image (Google Chart URL) as well. This example shows how to integrate the 3 new chart type to your web page.

Create a dashboard chart

A dashboard chart is created from the Admin Control Panel. The key to enabling the chart feature is to check the "Use Chart" checkbox in the Dashboard Editor.

In this example, we have precreated 3 dashboard named PNG_Chart, SVG_Chart and Google_Chart. From the backend database, each dashboard chart will be generated from the method named DAX_DevHook_DefineChart. Here is what it looks like inside the method DAX_DevHook_DefineChart:

  C_TEXT($1;$2;$3;$ReportName_t;$SelectionName_t;$ReportOwner_t)
  If(Count parameters>=3)
    $ReportName_t:=$1
    $SelectionName_t:=$2
    $ReportOwner_t:=$3
    Case of
      : ($ReportName_t="PNG_Chart") & ($SelectionName_t="View_1")
        C_PICTURE ($png_pic)
        Set_Chart_PNG (->$png_pic) ` Create a PNG Chart
        DAX_Dev_SetDashboardPNG (->$png_pic) ` Set created PNG to the Dashbard
      : ($ReportName_t="SVG_Chart") & ($SelectionName_t="View_1")
        C_BLOB ($svg_x)
        Set_Chart_SVG (->$svg_x) ` Create an SVG Chart
        DAX_Dev_SetDashboardSVG (->$svg_x) ` Set created SVG to the Dashbard
      : ($ReportName_t="Google_Chart") & ($SelectionName_t="View_1")
        C_TEXT ($googleurl_t)
        Set_Chart_GoogleURL (->$googleurl_t) ` Create a Google Chart URL
        DAX_Dev_SetDashboardImageURL (->$googleurl_t) ` Set created Google URL to the Dashbard
    End case
  End if

Load Dashboard Chart into HTML

In the HTML file, the command dax_chartViewer is executed in the onAfterInit function. The command loads a dashboard chart into a specific <DIV>.

    Syntax: dax_chartViewer(DashboardName, DivReference);

pngchart = new dax_chartViewer('PNG_Chart', $('pngdiv'));
svgchart = new dax_chartViewer('SVG_Chart', $('svgdiv'));
googchart = new dax_chartViewer('Google_Chart', $('googdiv'));