CODEWITHSUNDEEP
javascriptcssgoogle-visualization
Budda
Budda

Reputation: 18343

Google chart: how to make right side of the "white space" empty?

I use Google Chart in order to build some graphichs together with text description.

On the first iteration I used small "title" for each graph type and that was looking well. But at some point I've added total value for each graph... and text started to be wrapped.

Question 1: Is there any way to prevent text wrapping (see the right portion of the chart)?

I've tried put text inside of "..." but Google chart just convert these tags into pure text.

Question 2: Is there any way to move whole graph to the left and consume unused area so the right part will have more space for text?

Any thoughts are welcome! Probably there is any other solution that will work for me?

P.S. Please see how that looks right now on the screenshot: enter image description here

P.P.S Here is JS code I use to display the graphs

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/google/jsapi.js"></script>
<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    var expArray = [<%=ExperienceArray %>];

    function drawChart() {
        if (expArray.length > 0) {
            $('#chart_div').show();
            $('#MessagesDiv').hide();

            var total = 0, train = 0, match = 0, ageing = 0;
            for (var i = 0; i < expArray.length; i++) {
                total += expArray[i][1];
                train += expArray[i][2];
                match += expArray[i][3];
                ageing += expArray[i][4];
            }
            var data = google.visualization.arrayToDataTable([
                ['№', 'Total (' + total + ')', 'Training (' + train + ')', 'Matches (' + match + ')', 'Ageing (' + ageing + ')']
            ].concat(expArray));

            var options = {
                title: 'Gained experience',
                allowHtml: 'true',
                hAxis: { title: '', titleTextStyle: { color: 'black' } },
                colors: ['#00FF00', '#6600CC', '#0000CC', '#000000']
            };

            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        } else {
            $('#chart_div').hide();
            alert("Data are absent");
        }
    }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

Upvotes: 4

Views: 4266

Answers (1)

jmac
jmac

Reputation: 7128

Add the following code (adjust as necessary) to your options: chartArea: {left: 0}

So your options file would become this:

        var options = {
            title: 'Gained experience',
            allowHtml: 'true',
            hAxis: { title: '', titleTextStyle: { color: 'black' } },
            colors: ['#00FF00', '#6600CC', '#0000CC', '#000000'],
            chartArea: {left: 0}
        };

Note: the current setting will slice off the entire axis labels, so you want to use something appropriate in size bigger than 0 (you can calculate something with an algorithm, or just fiddle until you have it like you want it).

For the legend, however, there is no trick.

When Google creates the SVG for the chart, it will split the legend in to two lines (two separate SVG text elements) so it's not easy to tweak. You can't very well fix it easily. One option is to create a separate chart with just the legend (and no chart area) which will mimic the legend, and then link the two charts together (if you want click interactivity with the legend).

Alternatively, you can reduce the font size using legend: {textStyle: {fontSize: 8}} or whatever font size will prevent the text from wrapping (again, you can create an algorithm or fiddle with it until it works).

As a separate option, you can create a manual legend and use javascript to mimic click interactivity, and then you can use CSS/Javascript to format it however you want.

Upvotes: 7

Related Questions