Google Chart Customization

Question

I want following Google Chart (Column Chart) to show its first label on horizontal axis. Also I want each column to have same width; first and last column need a change. How is it possible?

var chartDataRaw = [{
    "month": "201211",
        "articles": 41467
}, {
    "month": "201212",
        "articles": 31820
}, {
    "month": "201301",
        "articles": 43817
}, {
    "month": "201302",
        "articles": 42773
}, {
    "month": "201303",
        "articles": 38695
}, {
    "month": "201304",
        "articles": 41257
}];

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('date', 'Month');
dataTable.addColumn('number', 'Articles');

var i = 1;

//chartDataRaw is array of objects, requested from server. looped through jquery each to fill dataTable
$.each(chartDataRaw, function () {

    var year = this.month.substring(0, 4);
    var month = this.month.substring(4);

    var dataItem = [new Date(year, month), this.articles];

    dataTable.addRow(dataItem);

});

var options = {
    title: 'Company Coverage',
    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px'
    },
    vAxis: {
        textPosition: 'none'
    },
    trendlines: {
        0: {
            color: 'black',
            lineWidth: 3,
            opacity: 0.4
        }
    },
    legend: 'none'
};

var monthYearFormatter = new google.visualization.DateFormat({
    pattern: "MMM, yyyy"
});
monthYearFormatter.format(dataTable, 0); //change date format to render on chart


var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);

http://jsfiddle.net/YyYsN/2/

Edit: Added chart data

Answer 1

Executive Summary

You are committing several mortal sins:

1. You are not defining dates right
2. You have no y axis values distorting your data
3. You are using columns to describe a continuous series
4. You are predicting based on only 6 data points

You are not defining dates right

Look at the value for January 2013. It says 31,820 articles. The issue is your data says there were 43,817 articles in January. What the heck is going on?

Javascript Date Objects use month values from 0-11, not 1-12. That means when you convert the dates, you need to change your function.

Old:

var dataItem = [new Date(year, month), this.articles];

New:

var dataItem = [new Date(year, month - 1), this.articles];

You have no y axis values distorting your data

Compare the second bar to the third bar. What is the ratio between the two? It looks like the second bar is around .5 gridlines, and the third bar is around 3.5 gridlines. That is a 700% increase in articles!

Only if you look at the data, it's actually going from 31,820 to 43,817, and increase of only 37%.

Bar charts should always start from zero, otherwise you get incredibly distorted perspective of the data, especially when there are no labels to boot.

Old:

    vAxis: {
        textPosition: 'none',
    },

New:

    vAxis: {
        textPosition: 'none',
        minValue: 0
    },

You are using columns to describe a continuous series

Columns show discrete items. If I want to poll how many kids in a class like dogs, cats, and iguanas, a column chart is great since it allows me to compare the popularity (height) across unrelated categories (horizontal). Columns are okay for showing sales per month (or articles per month), but by making them columns you are implying that the columns should be compared as individual items, not as a progressing series.

If you want to show that these data items are connected (as implied by the trendline) it would make much more sense to show an area chart.

(Ideally, the area chart would show articles over the last 30 days, and have daily data, rather than a monthly compilation since months are arbitrary cutoffs, and things like weekends and holidays probably have a significant impact on your data which further distorts what you're trying to show).

Old

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

New

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

You are predicting based on only 6 data point

Six points does not a trend make. Your data's highest value is the second point, yet you are showing the trend increasing over time. Perhaps the trendline suggests an upward trend (since the later values are higher than the first value), but as soon as you move 1 month forward you will have a descending trendline (barring a massive increase in articles).

This makes no rational sense. 5 months of data are the same. How can changing 1 month of a 6-month series change the direction of the trendline? Forecasting is iffy-enough as it is (see the Black Swan theory), but doing it on a minimal 6-month series likely isn't the best. This means the trendline should probably be removed altogether since it not only doesn't convey useful information, it potentially conveys incorrect information.

Summary

That said, if you just want your left and right columns not to be cut off, you can change the following code:

Old

    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px',
    },

New

    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px',
        minValue: new Date(2012,9),
        maxValue: new Date(2013,4)
    },

Answer 2

fixed it myself by changing corechart visualization version to 1.1

google.load("visualization", "1.1", {packages:["corechart"]});