Prev Next

Chart Definition using JSON

Rather than code a Dynamic Chart yourself, you might want to provide a simple description of the Chart instead. Dynamic Charts can be designed and entirely defined by a single datasource; JSON is currently the preferred datasource format, but XML and others will be available in the future.

You define the Chart by providing a simple JSON data structure that adheres to the DynamicChart schema. The schema is available in the Schema Composer. It is also easily viewable in the Dynamic Charts Package of the Enterprise Architect Example Model.

(To view the DynamicChart Schema, select Develop > Schema Modeling > Schema Composer, click on the Browse. button in the 'Profile' field, and select DynamicChartSchema.)

Datasources - JSON

To render a chart using a JSON data structure, first select the DynamicChart Artifact element, then open the 'internal code' editor.  For a selection in the Browser, right-click and choose 'Features > Edit Internal Code', or for a selection on a diagram, right-click and choose 'Edit Chart Script'. These will open the editor for you to edit the chart script. Create a JSON variable that defines the chart to render, then compose your ConstructChart function.

The ConstructChart function takes as its single argument the identity (a GUID string) of the Chart element being displayed on the opening diagram. You then call the built-in function ConstructChartFromJSON, passing the GUID as the first parameter and the JSON structure as the second argument, as illustrated in this example:

var barChart2DJSON =

{

  "Category" : "BarSmart",

  "Type" : "Simple",

  "Title" : "Vehicle Expenses",

  "Series" :

  [

     {

"Label" : "Fuel",

"Data":

{

"Type" : "Column",

"Points" :

[

{ "Category": "Jan", "Y": 1.0 },

{ "Category": "Feb", "Y": 3.0 },

{ "Category": "Mar", "Y": 7.0 },

{ "Category": "Apr", "Y": 8.0 },

{ "Category": "May", "Y": 10.0 },

{ "Category": "Jun", "Y": 15.0 }

]

}

},

{

"Label" : "Taxes",

"Data":

{

"Type" : "Normal",

"Points" :

[

{ "Y":10.0 },

{ "Y":12.0 },

{ "Y":16.0 },

{ "Y":17.0 },

{ "Y":10.0 },

{ "Y":12.0 }

]

}

},

{

"Label" : "Maintenance",

"Data":

{

"Type" : "Normal",

"Points" :

[

{ "Y":5.0 },

{ "Y":2.0 },

{ "Y":6.0 },

{ "Y":7.0 },

{ "Y":1.0 },

{ "Y":2.0 }

]

}

},

{

"Label" : "Other",

"Data":

{

"Type" : "Normal",

"Points" :

[

{ "Y":2.5 },

{ "Y":2.5 },

{ "Y":2.5 },

{ "Y":2.5 },

{ "Y":2.5 },

{ "Y":2.5 }

]

}

}

  ]

};

function ConstructChart(chartGuid)

{

ConstructChartFromJSON(chartGuid, barChart2DJSON);

}

Further JSON examples are provided in the Example Model.

Each Chart example provides a Dashboard diagram and DynamicChart element. Select an element from any of these examples and press Alt+7 to view the behavior behind the Chart. Looking at the variety of Chart examples is the best way to get to know how to use JSON to produce the types of Chart you might be interested in.