javascript - Google chart: how to make right side of the "white space" empty? - Stack Overflow

admin管理员组

文章数量:1392050

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 wele! Probably there is any other solution that will work for me?

P.S. Please see how that looks right now on the screenshot:

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>

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 wele! Probably there is any other solution that will work for me?

P.S. Please see how that looks right now on the screenshot:

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>

• javascript
• css
• google-visualization

Share Improve this question Follow edited Apr 2, 2013 at 2:50 Budda asked Apr 2, 2013 at 2:19 BuddaBudda 18.4k3535 gold badges128128 silver badges211211 bronze badges 5

• Can you post the HTML and CSS or a fiddle? – JSW189 Commented Apr 2, 2013 at 2:22
• Or a link would be great, thanks! – Mitchell Layzell Commented Apr 2, 2013 at 2:27
• Hard to guess without seeing a fiddle as suggested, but from using other Google API stuff, you might have to set a width for the whole container, using CSS. Setting a larger fixed width might help with the wrap. – James Glass Commented Apr 2, 2013 at 2:34
• Updated question with full JS+HTML code. Those parts don't use CSS. Hope that will help... Will try to put same stuff into fiddle. – Budda Commented Apr 2, 2013 at 2:51
• Put it to fiddle, but it doesn't work: jsfiddle/8D2Qa/1. Didn't actually had a chance to get familiar with it to use properly... will try later again – Budda Commented Apr 2, 2013 at 2:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

So your options file would bee 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.

本文标签： javascriptGoogle chart how to make right side of the quotwhite spacequot emptyStack Overflow