Pie Charts
Adding Pie Charts to Your Solution
Enhancing your user interface with Pie Charts provides a unique visual perspective for presenting your data.
Examples
Create a Pie Chart to add to the Vehicle List Summary
- In your code editor, navigate to objects -> dashui -> templates
- Find the Entity you want to add a Pie Chart to.
- We will add a Pie Chart to the Vehicles Entity representing Vehicle Types and Colors.
- Add a new file named vehicleMakeModelPieChart.json and vehicleColorPieChart.json.
Copy the code below into your vehicleMakeModelPieChart.json file.
{ "kind": "template", "name": "ugottaride:vehicleMakeModelPieChart", "target": "*", "props": { "width": 470, "height": 224, "dataName": "", "title": "", "groupBy": "", "backColor": "rgba(0,0,0,0.2)" }, "preprocess": "$ ~> | style | {'width': $props.width, 'background-color': $props.backColor} | ~> | elements[1].elements | {'groupBy': $props.groupBy, 'width': $props.width, 'height': $props.height - 16, 'dataName': $props.dataName} | ~> | elements[0].elements | {'content': $props.title} |", "element": { "instanceOf": "html", "style": { "width": "100%", "justify-content": "center", "box-sizing": "border-box" }, "elements": [ { "instanceOf": "html", "style": { "margin-top": "0px", "margin-left": "0px", "lineHeight": "16px", "fontSize": "14px" }, "elements": { "instanceOf": "text", "content": "Vehicle Types" } }, { "instanceOf": "html", "style": { "display": "flex", "flex-direction": "column", "align-items": "center" }, "elements": { "instanceOf": "pieChart", "groupBy": "attributes(make_model)", "dataName": "Type", "width": "100%", "height": 211, "centerFontSize": 36, "innerSize": 82, "labelSize": 12 } } ] } }Copy the code below into your vehicleColorPieChart.json file.
{ "kind": "template", "name": "ugottaride:vehicleColorPieChart", "target": "*", "props": { "width": 470, "height": 224, "dataName": "", "title": "", "groupBy": "", "backColor": "rgba(0,0,0,0.2)" }, "preprocess": "$ ~> | style | {'width': $props.width, 'background-color': $props.backColor} | ~> | elements[1].elements | {'groupBy': $props.groupBy, 'width': $props.width, 'height': $props.height - 16, 'dataName': $props.dataName} | ~> | elements[0].elements | {'content': $props.title} |", "element": { "instanceOf": "html", "style": { "width": "100%", "justify-content": "center", "box-sizing": "border-box" }, "elements": [ { "instanceOf": "html", "style": { "margin-top": "0px", "margin-left": "0px", "lineHeight": "16px", "fontSize": "14px" }, "elements": { "instanceOf": "text", "content": "Vehicle Colors" } }, { "instanceOf": "html", "style": { "display": "flex", "flex-direction": "column", "align-items": "center" }, "elements": { "instanceOf": "pieChart", "groupBy": "attributes(exterior_color)", "dataName": "Color", "width": "100%", "height": 211, "centerFontSize": 36, "innerSize": 82, "labelSize": 12 } } ] } }
Create the Vehicle Summary List
- In your code editor, navigate to objects -> dashui -> templates -> vehicle
- Add a new file named vehicleListSummary.json.
- Copy the code below into your vehicleListSummary.json file.
In the vehicleListSummary json file, you can see we have added references to both Pie Charts that we created earlier between the start and end tags.
{ "kind": "template", "name": "ugottaride:vehicleListSummary", "view": "default", "target": "ugottaride:vehicle", "element": { "style": { "gap": "5px", "width": "100%", "height": "100%", "margin": "5px 5px 1%", "display": "flex", "flexDirection": "column" }, "elements": [ { "element": { "style": { "display": "flex", "font-size": "300%", "margin-top": "3px", "flexDirection": "row", "margin-bottom": "5px" }, "elements": [ { "props": { "style": { "width": "25%", "margin-left": "5px", "margin-right": "5px" } }, "elements": [ { "props": { "style": { "height": 100 }, "title": "Miles per Hour" }, "elements": [ { "path": "metrics(\"ugottaride:miles_per_hour\", \"ugottaride\").value", "instanceOf": "number", "maximumFractionDigits": 0 } ], "instanceOf": "card" } ], "instanceOf": "card" }, { "props": { "style": { "width": "25%", "margin-right": "5px" } }, "elements": [ { "props": { "style": { "height": 100 }, "title": "Miles Traveled" }, "elements": [ { "path": "metrics(\"ugottaride:miles_traveled\", \"ugottaride\").value", "instanceOf": "number", "maximumFractionDigits": 0 } ], "instanceOf": "card" } ], "instanceOf": "card" }, { "props": { "style": { "width": "25%", "margin-right": "5px" } }, "elements": [ { "props": { "style": { "height": 100 }, "title": "Engine RPM" }, "elements": [ { "path": "metrics(\"ugottaride:engine_rpm\", \"ugottaride\").value", "instanceOf": "number", "maximumFractionDigits": 0 } ], "instanceOf": "card" } ], "instanceOf": "card" }, { "props": { "style": { "width": "25%", "margin-right": "10px" } }, "elements": [ { "props": { "style": { "height": 100 }, "title": "Engine Temp (F)" }, "elements": [ { "path": "metrics(\"ugottaride:engine_temperature\", \"ugottaride\").value", "instanceOf": "number", "maximumFractionDigits": 0 } ], "instanceOf": "card" } ], "instanceOf": "card" } ], "instanceOf": "html" }, "instanceOf": "html" }, <START> { "element": { "style": { "display": "flex", "font-size": "300%", "margin-top": "3px", "flexDirection": "row", "margin-bottom": "5px" }, "elements": [ { "props": { "style": { "width": "50%", "margin-left": "5px", "margin-right": "5px" } }, "elements": [ { "title": "Vehicle Types", "groupBy": "attributes(make_model)", "dataName": "", "backColor": "", "innerSize": 82, "labelSize": 12, "instanceOf": "ugottaride:vehicleMakeModelPieChart", "align-items": "center", "centerFontSize": 20 } ], "instanceOf": "card" }, { "props": { "style": { "width": "50%", "margin-left": "5px", "margin-right": "10px" } }, "elements": [ { "title": "Vehicle Colors", "groupBy": "attributes(exterior_color)", "dataName": "", "backColor": "", "innerSize": 82, "labelSize": 12, "instanceOf": "ugottaride:vehicleColorPieChart", "align-items": "center", "centerFontSize": 20 } ], "instanceOf": "card" } ], "instanceOf": "html" }, "instanceOf": "html" }, <END> { "element": { "style": { "display": "flex", "font-size": "300%", "flexDirection": "row", "margin-bottom": "5px" }, "elements": [ { "props": { "style": { "width": "50%", "margin-left": "5px", "margin-right": "5px" } }, "elements": [ { "props": { "style": { "height": 220 }, "title": "Miles per Hour", "legend": true }, "children": [ { "type": "COLUMN", "namePath": "attributes(make_model)", "props": {}, "metric": { "y": { "field": "value" }, "name": "ugottaride:miles_per_hour", "source": "ugottaride" } } ], "instanceOf": "cartesian" } ], "instanceOf": "card" }, { "props": { "style": { "width": "50%", "margin-left": "5px", "margin-right": "10px" } }, "elements": [ { "props": { "style": { "height": 220 }, "title": "Miles Traveled", "legend": true }, "children": [ { "type": "COLUMN", "namePath": "attributes(make_model)", "props": {}, "metric": { "y": { "field": "value" }, "name": "ugottaride:miles_traveled", "source": "ugottaride" } } ], "instanceOf": "cartesian" } ], "instanceOf": "card" } ], "instanceOf": "html" }, "instanceOf": "html" }, { "props": { "style": { "width": "98.7%", "margin-left": "5px", "margin-right": "5px", "margin-bottom": "5px" } }, "elements": [ { "props": { "style": { "height": 220 }, "title": "Engine RPM", "legend": true }, "children": [ { "type": "LINE", "namePath": "attributes(make_model)", "props": { "name": "RPM", "stack": 1 }, "metric": { "y": { "field": "value" }, "name": "ugottaride:engine_rpm", "source": "ugottaride" } } ], "instanceOf": "cartesian" } ], "instanceOf": "card" }, { "props": { "style": { "width": "98.7%", "margin-left": "5px", "margin-right": "5px", "margin-bottom": "5px" } }, "elements": [ { "props": { "style": { "height": 220 }, "title": "Engine Temp (F)", "legend": true }, "children": [ { "type": "LINE", "namePath": "attributes(make_model)", "props": { "name": "Temp (F)", "stack": 1 }, "metric": { "y": { "field": "value" }, "name": "ugottaride:engine_temperature", "source": "ugottaride" } } ], "instanceOf": "cartesian" } ], "instanceOf": "card" } ], "instanceOf": "html" } }
Add the vehicleListSummary refernce to your ecpList file
- In your code editor, navigate to objects -> dashui -> templates -> vehicle
- Edit the ecpList.json that we created earlier.
Add a new element before the reference to the vehicleRideGridTable to reference the vehicleListSummary between the start and end tags.
{ "kind": "template", "name": "dashui:ecpList", "view": "default", "target": "ugottaride:vehicle", "element": { "instanceOf": "ocpList", "elements": { "instanceOf": "card", "props": { "style": { "height": "calc(200%)", "padding": 0, "width": "100%" } }, "elements": [ <START> { "instanceOf": "ugottaride:vehicleListSummary" }, <END> { "instanceOf": "ugottaride:vehicleGridTable" } ] } } }