[Solved] How can I make a radial chart?

Questions about Thunkable
1

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?

2

this is based on the info from

1 Like
3

Thank you for the detailed information.

1 Like
4

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.

5

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.

2 Likes
6

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.

7

https://jaredgib.github.io/index.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

8

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.

9

No problem!

10

I have posted a video and info here 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

2 Likes
11

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.

1 Like
12

That’s awesome! I’m prone to keep making more videos!

13

20200427_125458
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.

14

can you copy and paste your code here.

the c3 documentation shoudl say how to remove the text

15
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");
        }
    });
</script>
16

https://kyochoul.github.io/chart_clone/Charts/graph-Radial.html