CODEWITHSUNDEEP
javascripthtmljqueryhighcharts
Dan Griffin
Dan Griffin

Reputation: 13

Highcharts - How would I use HTML input boxes to input the data for a Pie Chart?

Sorry, this is my first stackoverflow question so let me know if I've formatted this wrong.

I attempted to use document.getElementById("id").value in order to get the input value from the input box but I couldn't quite figure out how to make it work. I saw other answers making use of JSON or JQuery but I don't have much experience in those yet so if I could make this work without those(if possible) I'll take that option. Any bits of code that are commented out are just me trying to get it to work. (Sidenote: I know my HTML code might be a bit scuffed, that isn't a priority right now)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pricer.ie</title>
        <link rel="stylesheet" href="homepage.css"/>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="/js/themes/gray.js"></script>
        <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
    </head>
    <body>
        <nav class="navbar">
            <ul>
                <li class="logo">
                    <a href=""><img src="logopricer.png" alt="logo" id="logo" ></a>
                </li>
                <li>
                    <a href="login.py" class="logintopright">Login</a>
                </li>
            </ul>
        </nav>
        <main>
            <figure class="highcharts-figure">
                <div id="container" style="width:100%; height:400px;"></div>
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                    var myChart = Highcharts.chart({
                        chart: {
                            renderTo: 'container',
                            type: 'pie',
                            events: {
                                load: function(event) {
                                    var chart = this,
                                        points = chart.series[0].points,
                                        len = points.length,
                                        total = 0,
                                        i = 0;

                                    for (; i < len; i++) {
                                        total += points[i].y;
                                    }

                                    chart.setTitle({
                                        text: '<span style="font-size: 13px">Current Price</small><br>'  + '<b>' + '€' + total.toFixed(2) + '</b>',
                                        align: 'center',
                                        verticalAlign: 'middle',
                                        y: -10,
                                    });
                                }
                            }
                        },
                        title: {
                            text: 'Product Details'
                        },
                        tooltip: {
                            pointFormat: '<b>{point.percentage:.1f}</b>' + '<b>%</b>'
                        },
                        plotOptions: {
                            pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: €{point.y:.2f}'
                            }
                            }
                        },
                        series: [{
                            name: 'Total', [{
                                name: 'Profit Margin',
                                // y: document.getElementById('pcost').value
                                y : 0.29
                            }, {
                                name: 'Taxes',
                                // y: document.getElementById('taxes').value // external thing! database cuz tax changes depending on product
                                y : 4.25
                            }, {
                                name: 'Ebay Fees',
                                // y: document.getElementById('listfee').value
                                y : 3.93
                            }, {
                                name: 'Unit + Shipping Costs',
                                // y : document.getElementById('icost').value + document.getElementById('scost').value
                                y : 17.03  
                            }],
                            size: '60%',
                            innerSize: '70%',
                            showInLegend:true,
                            dataLabels: {
                                enabled: true
                            }
                        }]
                    },
                    )
                    }
                    )
                </script>
            </figure>
            <article>
                <form>
                    <label for="icost">Item Cost:</label>
                    <input type="number" id="icost" name="icost" step="0.01"><br><br>
                    <label for="scost">Shipping Cost:</label>
                    <input type="number" id="scost" name="scost" step="0.01"><br><br>     <!-- names and ids are incorrect just like this for now -->
                    <label for="pcost">Pickpack Cost:</label>
                    <input type="number" id="pcost" name="scost" step="0.01"><br><br>
                    <label for="taxes">Taxes:</label>
                    <input type="number" id="taxes" name="taxes" step="0.01"><br><br>     <!-- shouldnt exist as taxes is from database but sure look-->
                    <label for="listfee">Listing Fee:</label>
                    <input type="number" id="listfee" name="listfee"><br><br>
                    <button onclick="Function()">Save Changes</button>
                  </form>
            </article>
        </main>
        <footer>
        </footer>
    </body>
<html>

I would link to a JSFiddle but not sure how I would do that as my JS is currently embedded within my HTML lol. Thanks in advance to anyone that decides to give me a hand with this. Any advice with this is useful!

Upvotes: 0

Views: 178

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to get data and put them in a format required by Highcharts. Simple example below:

document.getElementById('btn').addEventListener('click', function() {
    var data = [
        parseInt(document.getElementById('data1').value),
        parseInt(document.getElementById('data2').value)
    ];

    Highcharts.chart('container', {
        series: [{
            type: 'pie',
            data
        }]
    });
});

Live demo: http://jsfiddle.net/BlackLabel/dyp5208b/

API Reference: https://api.highcharts.com/highcharts/series.pie.data

Upvotes: 1

Related Questions