This is the third in a series of posts introducing the new LiveCompare 3.1 apps system. I'm building a Diabetes Tracker app. Part 1 covered the data model and the data entry workflows. Part 2 covered migrating all the data from my current Excel-based tracker to LiveCompare. In this post I'm going to look at the summary reports and the dashboard I'll use when I go for my Diabetic screenings. In the final part of the series I'll put everything together as an app and run it from my smartphone.
My Excel-based tracker has various summary reports. I can examine my min, max and average blood sugar reading by month
I have several charts for my blood pressure data:
The reason for no variance for about 2/3 of the charts is that it was only after that point that I started taking readings from both arms.
Finally I have a couple of charts for my weight data:
It's a bit of a faff every month to update the chart ranges to include the latest data – something I want my LiveCompare app to take of automatically.
LiveCompare 3.1 introduces a new action called Create Dashboard Report. Here's a partial example:
The action accepts any number of input table parameters – it comes with Source 1, Source2 and Source 3 and you can use the Define Action Parameters wizard to add more.
It has a report name, an output report URL and a Dashboard Spec. The Dashboard Spec is a sophisticated XML-based input parameter that defines the layout of the dashboard and how each input table dataset is transformed into a chart.
Dashboards are rendered as a single page of HTML. The page is split into rows and columns. Each row may contain at most 12 columns. A particular row/column "cell" may span multiple columns. If you've used Excel's "merge cells" feature then you'll get the idea.
Here's the dashboard specification from my workflow:
<CHART_TITLE>Weight Loss (Annual, Kgs)</CHART_TITLE>
For now you must edit this directly using either using the built-in LiveCompare XML editor or any number of free XML editing tools (I prefer Emacs or Notepad++). We're looking at what design tools we can provide in the future. My start point is always one of the sample dashboards.
The XML specifies a dashboard that has one row containing two cells. Each cell contains a single graphic (always a chart). The graphic determine the type of chart, its size, which palette is used to colour the data series and various other factors that control the look of the chart.
The result is this LiveCompare powered dashboard:
I can click on any chart to see its data:
Yes, I have moved from lbs (Excel) to Kgs (LiveCompare) when presenting my weight data – I was told it was time to get with the decimalisation programme!
The underlying HTML will "downsize" to fit any device – something that'll be important later once we've registered the app and want to run it from (and look at the results on) a smartphone.
Given the number of charts in my Excel-based tracker I settled on three dashboards, one for each category:
Here are the final dashboards starting with Blood:
I popped in a couple of charts. One for the current period and one that shows my blood records from all time.
And finally BP:
The dashboard UI (in fact all the apps UI as we'll see next time) uses pure HTML. This is important because apps must run in browsers on all platforms, not just the ActiveX supporting Internet Explorer. Here's the BP dashboard in Chrome:
The Dashboard Spec supports wide-range of options:
Type of chart: Pie, Doughnut, Bar, Bar-Cylinder, Column, Column-Cylinder, Line, StackedBar, StackedBar-Cylinder, StackedColumn and StackedColumn-Cylinder
Chart width in pixels.
Chart height in pixels.
Pick a specific colour from the palette. Useful for matching a single series chart against a series from a multi-series chart.
3D or not 3D.
Angle of inclination for a 3D chart.
Angle of rotation for a 3D chart.
Can be used to set the maximum value for the y-axis, for instance to limit a percentage range to 100.
Show legend or not.
Show Value Labels
Show numerical value labels.
X Axis Interval
Reduce quantity of x-axis labels to a specified interval. Useful when the series has many item values.
Show X Major Grid
Shows the major x-axis grid lines or not.
Show X Minor Grid
Shows the minor x-axis grid lines or not.
Show Y Major Grid
Shows the major y-axis grid lines or not.
Show Y Minor Grid
Shows the minor y-axis grid lines or not.
Line width on line charts only.
Title of chart. Defaults to name of Source dataset.
Title Font Family
Title Font Size
Title font size.
Title Font Style
One of: Regular, Bold, Italic, Strikethrough or Underline. Default is regular.
Please note; the information above is subject to change – we are still working through samples to determine what chart features need to be surfaced.
In this post I've covered the new LiveCompare 3.1 Create Dashboard Report action and explained the page layout and charting features it supports. In the next post we'll wrap things up by publishing the data entry and dashboard workflows as an app, which I'll run from my smartphone.
Tomorrow Rich and I will be heading to London to prepare for our London to Paris Challenge Ride in support of Diabetes UK that starts on Friday. I would like to say a big thank you to all our sponsors. We wouldn't be here without you.