Variable javascript array chartists.js

Question

What I am trying to do with the chartist.js is allow for variable to change the values in the array which creates the chart.

So I am using the donut chart which I am using a series of 2 inside that array and 1 label.

    var x = 20, 
        y = 60,

    var chart = new Chartist.Pie('.ct-chart', {
          series: [x, y],
          labels: [43]
    }, {
      donut: true,
      showLabel: true
});

I am getting an error when trying to set the x & y variables of Uncaught SyntaxError: Unexpected token var I know this is a bit of a schoolboy error but I want to make sure I am doing this the right way but not sure - the end goal is to have two input boxes which I can submit two values which in turn change the chart values and create the donut chart.

Santanu · Accepted Answer · 2015-10-30 10:07:53Z

1

            <!DOCTYPE html>
            <html>
                <head>
                    .....
                </head>
                <body>
                    <script>
                        function onDrawClick() {
                            var x = document.getElementById("xFieldId").value;
                            var y = document.getElementById("yFieldId").value;
                            var chart = new Chartist.Pie('.ct-chart', {
                                series: [x, y],
                                labels: [43]
                            }, {
                                donut: true,
                                showLabel: true
                            });
                        }
                    </script>
                    <div class="ct-chart"></div>        
                    <input type="number" id="xFieldId">
                    <input type="number" id="yFieldId">
                    <button onclick="onDrawClick()">Show</button>
                </body>
            </html>

Your code with full example.

edited Oct 30, 2015 at 10:07

answered Oct 30, 2015 at 9:56

Santanu

4203 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

coder123 Over a year ago

Ah brill that has done the trick! A quick question how would I add an input box to change the values of x and y? instead of having static values?

Santanu Over a year ago

You can use two <input type='number' id='x_field_id'> and use var x=document.getElementById('x_field_id').value to get updated value.

coder123 Over a year ago

I am terrible with javascript - would you be able to show me an example at all?

Collectives™ on Stack Overflow

Variable javascript array chartists.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related