1
\$\begingroup\$

My code displays a Google chart that shows a mana curve. I'm not very experienced with Google charts, so I'd like help optimizing my code. I'd like my code to be more readable and to have fewer lines (if possible.)

https://jsfiddle.net/p8grf68x/

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Column Chart</title>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Mana Cost", "Cards"],
                ["0", 1],
                ["1", 0],
                ["2", 9],
                ["3", 1],
                ["4", 8],
                ["5", 3],
                ["6", 3],
                ["7+", 1]
            ]);
            var maxV = 0;
            for (var i = 0; i < data.getNumberOfRows(); i++) {
                if (data.getValue(i, 1) > maxV) {
                    maxV = data.getValue(i, 1);
                }
            }
            maxV += maxV / 2.5;
            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
            }, ]);
            var options = {
                backgroundColor: "#000000",
                enableInteractivity: false,
                height: '250',
                title: "Mana Curve",
                width: '500',
                annotations: {
                    alwaysOutside: true,
                    highContrast: false,
                    stem: {
                        color: "transparent"
                    },
                    textStyle: {
                        auraColor: 'transparent',
                        color: "#FFFFFF",
                        fontName: 'Lato',
                        fontSize: 18.75
                    }
                },
                bar: {
                    groupWidth: "75%"
                },
                chartArea: {
                    backgroundColor: {
                        stroke: '#FFFFFF',
                        strokeWidth: 1
                    },
                    width: '95%'
                },
                hAxis: {
                    textStyle: {
                        color: "#FFFFFF",
                        fontName: "Lato",
                        fontSize: 18.75
                    }
                },
                legend: {
                    position: "none"
                },
                titleTextStyle: {
                    color: "#FFFFFF",
                    fontName: "Lato",
                    fontSize: 25
                },
                vAxis: {
                    baselineColor: 'transparent',
                    gridlines: {
                        color: 'transparent'
                    },
                    textPosition: "none",
                    viewWindow: {
                        max: maxV
                    }
                }
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
            chart.draw(view, options);
        }
    </script>
</head>

<body>
    <div id="columnchart_values" style="width: 500px; height: 250px;"></div>
</body>

</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.