Show Vaxis line in bar graph through google chart

StackOverflow https://stackoverflow.com/questions/23647371

Domanda

I am working on a project where I need to show graph like this.

enter image description here

I am using google visualisation chart api to achieve this. I am able to draw the chart as follows.

enter image description here

I am very new to this. The problem I am facing is, I am not able to draw the vAxis line as shown in example graph. Also, how can I change the colour and same as I am using. Change the interval of VAxis as shown. Please advice. Below is the code which I am using

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi">
            </script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable(
                                                                 [ ['Year', 'Sales', 'Expenses', 'Profit'],
                                                                  ['May,14', 5, 1, 2],
                                                                  ['April,14', 4, 2, 3],
                                                                  ['March,14', 6, 7, 2],
                                                                  ['Feb,14', 1, 7, 2],
                                                                  ['Jan,14', 3, 3, 2],
                                                                  ['Dec,14', 4, 3, 2],
                                                                  ['Nov,14', 5, 3, 2],
                                                                  ['Oct,14', 6, 6, 2],
                                                                  ['Sept,14',7, 6, 2],
                                                                  ['Aug,14', 3, 5, 2],
                                                                  ['July,14', 5, 5, 2],
                                                                  ['June,14', 6, 3, 2]]);
                var options = {
                    orientation:'horizontal',
                    animation: {duration: 2000, easing: 'out'},
                    legend: 'none' };

                var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options); }
        </script>
    </head>
    <body>
        <div id="chart_div" style="position: absolute; top:-50px; left:-70px; width: 900px; height: 500px;">
        </div>
    </body>
</html>
È stato utile?

Soluzione

You will get a line there if you use a continuous type axis. Since you are plotting months, you could use a "date" type:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        [new Date(2014, 4), 5, 1, 2],
        [new Date(2014, 3), 4, 2, 3],
        [new Date(2014, 2), 6, 7, 2],
        [new Date(2014, 1), 1, 7, 2],
        [new Date(2014, 0), 3, 3, 2],
        [new Date(2014, 11), 4, 3, 2],
        [new Date(2014, 10), 5, 3, 2],
        [new Date(2014, 9), 6, 6, 2],
        [new Date(2014, 8),7, 6, 2],
        [new Date(2014, 7), 3, 5, 2],
        [new Date(2014, 6), 5, 5, 2],
        [new Date(2014, 5), 6, 3, 2]
    ]);

    var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM, yyyy'});
    dateFormatter.format(data, 0);

    var options = {
        // FYI, a horizontal BarChart is the same thing as a ColumnChart
        orientation: 'horizontal',
        animation: {
            duration: 2000,
            easing: 'out'
        },
        legend: 'none',
        hAxis: {
            format: 'MMM, yyyy'
        }
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

see example here: http://jsfiddle.net/asgallant/WJCpx/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top