Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Chart Customization
    primarykey
    data
    text
    <p>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?</p> <p><img src="https://i.stack.imgur.com/dyfVA.png" alt="current chart layout"></p> <pre><code>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); </code></pre> <p><a href="http://jsfiddle.net/YyYsN/2/" rel="nofollow noreferrer">http://jsfiddle.net/YyYsN/2/</a></p> <p>Edit: Added chart data</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload