Adding progress bar to JQuery app

Hello,
I would like to add a semi-circle type progress bar as is shown here - https://kimmobrunfeldt.github.io/prog... .
More specifically, it's not a progress bar I am interested in, but an indicator which will show a value and I will decide what percentage of the progress bar to show depending on that value.
How do I add such a thing to my JQuery mobile app?

Thanks!
1 person has
this question
+1
Reply
  • Yoni,

    It is impossible to do with default Appery.io functionality but you can definitely try adding some custom CSS, JS like described here:
    https://docs.appery.io/docs/appbuilde....
    Also, you might find the next posts discussing similar topics useful: https://getsatisfaction.com/apperyio/...
    https://getsatisfaction.com/apperyio/...
    https://getsatisfaction.com/apperyio/...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I'm sorry but i'm still stuck with this issue. I have found multiple sources for a feature that I would like to add called a "gauge". Here is one such source - http://bernii.github.io/gauge.js/

    I just don't understand how I can take this JS and add it to my JQuery mobile app. I want it to show a specific value based a number that's being passed through. This "gauge" needs to be displayed on a specific page (preferably within a grid). How do I do this?

    Thanks for your help!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hello,

    We are very sorry, but this is something outside the scope (https://docs.appery.io/docs/general-s...) of our standard support.

    Please do the following steps:

    1) Create the HTML component with the content
    <canvas id="foo"></canvas>


    2) Upload the library "gauge" from this link https://raw.githubusercontent.com/ber... (Create new -> JavaScript)

    3) Run the following JS code on the page show event:
    var opts = {
    angle: 0.15, // The span of the gauge arc
    lineWidth: 0.44, // The line thickness
    radiusScale: 1, // Relative radius
    pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.035, // The thickness
    color: '#000000' // Fill color
    },
    limitMax: false, // If false, max value increases automatically if value > maxValue
    limitMin: false, // If true, the min value of the gauge will be fixed
    colorStart: '#6FADCF', // Colors
    colorStop: '#8FC0DA', // just experiment with them
    strokeColor: '#E0E0E0', // to see which ones work best for you
    generateGradient: true,
    highDpiSupport: true, // High resolution support

    };
    var target = document.getElementById('foo'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 3000; // set max gauge value
    gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(3000); // set actual value
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Once again, you guys surpass my expectations. Got it working like a charm.

    Much appreciated!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated