I'm trying to add a Donut chart with the following data using the first-row option and highcharts library

donut data

And this is how it looks:

Also when using the fist-column I faced the same issues.

How can I get it to work with labels and percentages?

CommentFileSizeAuthor
#18 3252634-pie-donut-18.patch14.43 KBandileco
#17 3252634-pie-donut-14.patch14.43 KBn.ghunaim
#14 first_row.png526.73 KBandileco
#14 first_column.png555.79 KBandileco
#13 3252634-pie-donut-13.patch14.42 KBandileco
#8 3252634.3.patch2.73 KBn.ghunaim
#5 3252634-2.patch2.72 KBn.ghunaim
#3 3252634-1.patch2.74 KBn.ghunaim
#3 donut-chart.png35.17 KBn.ghunaim
donut-chart-not-working.png20.43 KBn.ghunaim
donut-data.png51.46 KBn.ghunaim

Comments

n.ghunaim created an issue. See original summary.

n.ghunaim’s picture

n.ghunaim commented
Issue summary: View changes
n.ghunaim’s picture

n.ghunaim commented
StatusFileSize
new donut-chart.png35.17 KB
new 3252634-1.patch2.74 KB

I developed this patch to get it working with the first-row option please review.

This is how it looks now:

n.ghunaim’s picture

n.ghunaim commented
Status: Active » Needs review
n.ghunaim’s picture

n.ghunaim commented
StatusFileSize
new 3252634-2.patch2.72 KB

Small fix on datalabels format

n.ghunaim’s picture

n.ghunaim commented
n.ghunaim’s picture

n.ghunaim commented
n.ghunaim’s picture

n.ghunaim commented
StatusFileSize
new 3252634.3.patch2.73 KB

Rollback the patch.

n.ghunaim’s picture

n.ghunaim commented
Component: Chart API » Highcharts integration
andileco’s picture

andileco commented
Status: Needs review » Needs work

Thank you for working on this. This one gives me issues if I implement #8 and visit /charts/example/display (after enabling the charts_api_example module). Can you look into what may be happening?

n.ghunaim’s picture

n.ghunaim commented

Hello andileco, I just opened this /charts/example/display and everything working well and ​all changes I did are on Highcharts only and the examples are for C3, so it shouldn't be affected by my changes.

So please can you give more details about the issues you faced.

andileco’s picture

andileco commented

So if you set the default library to Highcharts here: /admin/config/content/charts, the charts at /charts/example/display will all be Highcharts. What happened was the donut became a solid donut instead of having multiple slices.

I looked into this a bit more (using your great examples above), and there's an issue with two files:

src/Element/ChartDataCollectorTable.php
src/Element/Chart.php

They should be generating an output more similar to the other places where charts works well for donuts and pies (through Views or the API).
I've started working on a patch, but won't be ready with it today.

andileco’s picture

andileco commented
Status: Needs work » Needs review
StatusFileSize
new 3252634-pie-donut-13.patch14.42 KB

Uploading my patch to see how the tests run.

andileco’s picture

andileco commented
StatusFileSize
new first_column.png555.79 KB
new first_row.png526.73 KB

With the patch in #13:

First column:
Screenshot of the chart field settings with a single series donut chart using the first column to identify the categories.

First row:
Screenshot of the chart field settings with a single series donut chart using the first row to identify the categories.

n.ghunaim’s picture

n.ghunaim commented

Hello again @andileco!
I just tried to run your patch and it's working as expected, Thanks!

n.ghunaim’s picture

n.ghunaim commented

@andileco, I noticed this error when trying to add donut chart after applied your patch
Warning: Undefined array key "title" in Drupal\charts\Element\Chart::buildElement() (line 397 of modules/contrib/charts/src/Element/Chart.php).

Can you please let me know what are you trying to get here, which title?

n.ghunaim’s picture

n.ghunaim commented
StatusFileSize
new 3252634-pie-donut-14.patch14.43 KB

Added if statement to check if this value exists or not for now.

andileco’s picture

andileco commented
StatusFileSize
new 3252634-pie-donut-18.patch14.43 KB

Attaching with the edit mentioned in #16 since #17 didn't apply.

  • andileco committed 5c78c6c on 5.0.x 
    Issue #3252634 by n.ghunaim, andileco: Donut using highcharts library...
andileco’s picture

andileco commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.