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 > Open Schema Composer, click on the 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:
Example Datasource in JSON
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 Examples
Further JSON examples are provided in the Example Model (see the Package 'Reporting > Charts > Dynamic Charts').
Each Chart example provides a Dashboard diagram and DynamicChart element. Select an element from any of these examples and press ' ' 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.