« Cookies in HTMLViewer… | Home | OmegaBundle and DynaP… »

A chart similar to the one on Apple Watch

While we don't have the exact same chart ready to use like you see them on the Apple Watch, we can create similar charts with our MBS Xojo ChartDirector Plugin.

We take a pie chart and have it render. Than we pick the draw area and draw a few circles on top with some labels.

if you like you can modify it to draw several circle segments to have it look more like an Apple Watch with Move, Exercise and Stand chart.

The chart on the right is created by the code below:
' The data for the pie chart dim angles() as double ' The sum must be 360 angles.Append 270 angles.Append 90 // our colors dim colors() as integer colors.Append &HA00060 colors.Append &H3f0025 const midRadius = 80 const halfRingWidth = 20 dim chartWidth as integer = (midRadius + halfRingWidth + 10) * 2 dim chartHeight as integer = chartWidth dim cX as integer = chartWidth / 2 dim cY as integer = chartHeight / 2 // start with a pie chart dim c as new CDPieChartMBS(chartWidth, chartHeight, &H004060) Call c.setDonutSize(cX, cY, midRadius + halfRingWidth, midRadius - halfRingWidth) ' Set the pie data and the pie labels Call c.setData(angles) Call c.setLabelFormat(" ") Call c.setColors(c.kDataColor, colors) // generate chart dim d as CDDrawAreaMBS = c.makeChart() // and draw some circles Call d.circle(cX, cY - midRadius, halfRingWidth, halfRingWidth, colors(0), colors(0)) dim endX as double = cX + midRadius * Sin(angles(0) * 3.1416 / 180) dim endY as double = cY - midRadius * Cos(angles(0) * 3.1416 / 180) Call d.circle(endX, endY, halfRingWidth, halfRingWidth, colors(0), colors(0)) Call d.circle(endX, endY, halfRingWidth - 5, halfRingWidth - 5, &HEEEEEE, &HEEEEEE) Call c.addText(endX, endY, "3", "arialbd.ttf", 20, colors(0), c.kCenter) Call d.circle(cX, cY, 40, 40, &HEEEEEE, &HEEEEEE) Call c.addText(cX, cY, "3", "arialbd.ttf", 40, colors(0), c.kCenter) Backdrop = c.makeChartPicture
The biggest plugin in space...
20 02 16 - 00:10