Line chart: x axis data column type is date but i want the x axis to be discrete

914 views
Skip to first unread message

Amarjit Prasad

unread,
Jun 5, 2015, 3:43:54 AM6/5/15
to google-visua...@googlegroups.com
I am using a google chart where x axis data column type is date. But i want the x axis to be discrete. Is there any way to accomplish this.
When I changed the  'type' option of the axis to be 'category' then i am unable to see trendlines
here is my code

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

function drawChart() {

var revenueChart_93;    

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

   data.addColumn('date', 'Month');   
   data.addColumn('number', 'Predicted Grade');      
   data.addColumn('number', 'Working Grade');
   data.addColumn('number', 'Estimated Grade');


data.addRow([new Date(2015, 2, 12),  1.0,  1.0,  1.0 ]);
data.addRow([new Date(2015, 5, 12), 4.5, 5.0, 6.5]);
data.addRow([new Date(2015, 6, 1), 5.0, 6.0, 4.5]);
data.addRow([new Date(2015, 11, 1), 6.5, 7.0, 5.0]);


var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,     
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
    pattern: 'yyyy MMM'
});
dateFormatter.format(data, 0);
var chartHeight = 550;
var chartWidth = 750;
var chartOptions = {
    trendlines: {
        1: {
            color: 'yellow',
    //tooltip: false
        }
    },
    title: 'Progress Report',
    isStacked: true,
    width: chartWidth,
    height: chartHeight,      
    hAxis: {
        title: 'Year',
        slantedText: true,
        slantedTextAngle: 45,
        textStyle: {
            fontSize: 10
        },
        format: 'MMM yyyy', 
    },
    vAxis:{title: "Grade",
            minValue: 1,
            maxValue: 10, 
            gridlines: {
            count: 19
            },
            baselineColor: 'none',


            },       
    series: {
        2: { lineDashStyle: [2, 2] },
         },
 legend: { position: 'right', alignment: 'start' },

};

revenueChart_93 = new google.visualization.LineChart(document.getElementById('progress'));
revenueChart_93.draw(data, chartOptions);
}



Daniel LaLiberte

unread,
Jun 5, 2015, 8:40:11 AM6/5/15
to google-visua...@googlegroups.com
Hi Amarjit,

The trendline feature currently requires that the domain axis data be continuous.  Typically discrete values are not ordered meaningfully, so trendlines based on discrete values would not be meaningful.  

Is there a reason you want to use discrete values instead of dates?  You can also control the format of the tick values and tooltip values, if that is what you really want. You would say type: 'string' by the way.  I'm not sure what happens if you just provide Date values for your string type column (depends on how you declare you're DataTable), but the effect would be that non-uniformly distributed dates would end up being uniformly distributed on a discrete axis.  If you skip weekends, for example, a trendline, assuming it worked, would not know about it.

What you probably should do, if you want each successive date to be used like a discrete value, is change your dates to successive integers and also provide the formatted representation of each integer as the corresponding date converted to a string.  Like so:

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

   data.addColumn('number', 'Month');   
   data.addColumn('number', 'Predicted Grade');      
   data.addColumn('number', 'Working Grade');
   data.addColumn('number', 'Estimated Grade');

data.addRow([{v: 0, f: (new Date(2015, 2, 12)).toString(),  1.0,  1.0,  1.0 ]);
data.addRow([{v: 1, f: (new Date(2015, 5, 12)).toString(), 4.5, 5.0, 6.5]);
data.addRow([{v: 2, f: (new Date(2015, 6, 1)).toString(), 5.0, 6.0, 4.5]);
data.addRow([{v: 3, f: (new Date(2015, 11, 1)).toString(), 6.5, 7.0, 5.0]);

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Daniel LaLiberte

unread,
Jun 5, 2015, 9:06:00 AM6/5/15
to google-visua...@googlegroups.com
Regarding setting the 'type' of the hAxis, I had missed Sergey's suggestion (at https://github.com/google/google-visualization-issues/issues/1986) to set that to type: 'category', which does treat the individual date values as discrete values.  The fact that trendlines feature doesn't work with discrete values is a separate issue that I tried to address with my suggestion.

Amarjit Prasad

unread,
Jun 5, 2015, 9:18:09 AM6/5/15
to google-visua...@googlegroups.com
 Hi  Daniel,

               Thanks for suggestion. Yes I got your point.
Reply all
Reply to author
Forward
0 new messages