# \[Solved\] How can I make a radial chart? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** solved\ **Created:** [April 23, 2020, 2:26pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951 "2020-04-23T14:26:42Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 23, 2020, 2:26pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/1 "2020-04-23T14:26:42Z")
> **[pandameister/chartjs-chart-radial-gauge](https://github.com/pandameister/chartjs-chart-radial-gauge#options)** > > chartjs radial gauge chart implementation. Contribute to pandameister/chartjs-chart-radial-gauge development by creating an account on GitHub. I want to create a rounded chart like the site attached above. Can’t I make it thunkable without using the web? I wish I could make it thunkable if possible. If that doesn’t work How do I make it using the web? ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 23, 2020, 2:31pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/2 "2020-04-23T14:31:10Z")
> **[jaredgibb.xyz](http://jaredgibb.xyz/thunkable/chartingwiththunkable/)** > > This domain may be for sale! this is based on the info from > **[GitHub - thunkable/webviewer-extension: Communicate between the Thunkable Web...](https://github.com/thunkable/webviewer-extension)** > > Communicate between the Thunkable Web Viewer and a website - GitHub - thunkable/webviewer-extension: Communicate between the Thunkable Web Viewer and a website ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 24, 2020, 4:01am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/3 "2020-04-24T04:01:26Z")
Thank you for the detailed information. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 24, 2020, 4:07am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/4 "2020-04-24T04:07:10Z")
it looks like the radials would be very similar. it’s just an additional extension and a different initial chart config. then you would load the data the same way. Would you share with me when you figure that out? I would add it to my repository to keep public and available for other Thunkers as examples of complex charts. ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 24, 2020, 4:18am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/5 "2020-04-24T04:18:25Z")
I am reading what you have informed. However It seems that it is difficult to apply the method you have informed with my skills that I do not understand well. In case I implement this, I will release it. ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 24, 2020, 9:16am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/6 "2020-04-24T09:16:24Z")
I wish I had a very simple example tutorial. I hope that anyone who wants to draw a chart for the first time can make enough of it. For example Chart a person’s math scores. A bar or round chart indicating that the math score is 70 is sufficient. Rather than explaining complex table numbers, I would like to explain in detail how to put a very simple table into a thunkable and display it. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 25, 2020, 6:31am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/7 "2020-04-25T06:31:00Z")
[https://jaredgib.github.io/index.html](https://jaredgib.github.io/index.html) [https://jaredgib.github.io/Charts/graph-Radial.html](https://jaredgib.github.io/Charts/graph-Radial.html) i will be posting a video tutorial tomorrow morining for how to use this. Just for you! but it also applies to all the other charts i’m hosting in that repsotitory ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 25, 2020, 7:17am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/8 "2020-04-25T07:17:40Z")
Thank you. Thank you so much for making it for me. The chart at the address you attached is really a very simple chart I said. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 25, 2020, 1:00pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/9 "2020-04-25T13:00:28Z")
No problem! ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 25, 2020, 3:28pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/10 "2020-04-25T15:28:50Z")
I have posted a video and info [here](http://jaredgibb.xyz/thunkable/chartingfollowup/) for now. When my wordpress dashboard decides to work again, I will update this link. If you follow the link, you can also grab the relevant chart files. if you have more than 1 data set, you simply add another parameter. and ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 26, 2020, 5:00am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/11 "2020-04-26T05:00:50Z")
I am so grateful to you for letting me know this precious information. If someone sees the video, even beginners like me can apply the chart to thunkable. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 26, 2020, 5:09am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/12 "2020-04-26T05:09:44Z")
That’s awesome! I’m prone to keep making more videos! ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 27, 2020, 4:22am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/13 "2020-04-27T04:22:45Z")
![20200427_125458](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6db99f667e0b7e381c715fd0b8744167b7ca32ce.png) How can I change the picture on the left from the attached picture to the picture on the right? 1. I want to get rid of the number of points in the middle. 2. I want to remove the data1 and red icons at the bottom. 3. I want to remove the white margins on the outside as much as possible so that the screen fills with only the chart. I don’t know JavaScript, so I can’t find what to edit or delete. ==================================== var titleName = messageList.title document.getElementById(‘messageDisplay’).innerHTML = "This chart is for " + messageList.title; ============================= I erased the code above to remove the letters. The letters were gone, but it was thunkable and communication was lost. I also want to know how to get rid of text. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 27, 2020, 4:51pm UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/14 "2020-04-27T16:51:53Z")
can you copy and paste your code here. the c3 documentation shoudl say how to remove the text ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 28, 2020, 12:44am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/15 "2020-04-28T00:44:42Z")
html, body { height: 50%; margin: 0; } ``` div { height: 100%; width: 100%; } p { text-align: center; } #chart .c3-circles-trendLine { display: none; } .c3-line-trendLine { stroke-dasharray: 5, 5; } .c3-axis .tick line { display: none; } .chart { width: 100%; height: 100%; } /* .c3-axis-y text { font-size: 10px; change the size of the fonts } .c3-axis-x text { font-size: 10px; /* change the size of the fonts } */ ``` var chart = c3.generate({ data: { columns: [['미션 달성률', 10], ], type: 'gauge', onclick: function (d, i) { console.log("onclick", d, i); }, onmouseover: function (d, i) { console.log("onmouseover", d, i); }, onmouseout: function (d, i) { console.log("onmouseout", d, i); } }, gauge: { label: { format: function (value, ratio) { return value; }, show: false // to turn off the min/max labels. }, min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change max: 100, // 100 is default units: ' %', width: 20 // for adjusting arc thickness }, color: { pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values. threshold: { // unit: 'value', // percentage is default // max: 200, // 100 is default values: [30, 60, 90, 100] } }, size: { height: 120 } }); ``` // when we get a message from the app, display it on the page // message should be a JSON string of a list of numbers //I think there is a way to change the legend titles. I dont want the trend title to show at all. EVER ThunkableWebviewerExtension.receiveMessage(function (message) { try { var messageList = JSON.parse(message); var titleName = messageList.title chart.load({ columns: [ ['미션 달성률'].concat(messageList.data), ], names: { data1: titleName } }); } catch (e) { console.error("An error occurred. Message probably wasn't a JSON string of an array of numbers"); } }); ``` ---
**Author:** ![mom7667yafy](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mom7667yafy](https://community.thunkable.com/u/mom7667yafy)\ **Post date:** [April 28, 2020, 12:51am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/16 "2020-04-28T00:51:04Z")
[https://kyochoul.github.io/chart\_clone/Charts/graph-Radial.html](https://kyochoul.github.io/chart_clone/Charts/graph-Radial.html) ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:29am UTC](https://community.thunkable.com/t/solved-how-can-i-make-a-radial-chart/563951/17 "2024-11-08T11:29:36Z")