CODEWITHSUNDEEP
jquerygoogle-visualization
Darth
Darth

Reputation: 433

Line Chart in Google Analytics

Hi guys just recently learned Google Visualization and am running in trouble. Currently, the chart that is drawn is a little bit small from what I want it to be. when I try to set the width and height under options, it gives me the desired size but at the cost of dates below are overlapping. Any ideas on how should I work this one out?

Current size of chart | Desired size of chart

Below is my code:

var manWindowWidth = $(window).width() / 1.25; // Gives me 1152
var manWindowHeight = $(window).height() / 1.25; // Gives me 668.8

var options = {
    title: 'Performance',
    pointSize: 5,
    //width: manWindowWidth,
    //height: manWindowHeight,
    hAxis: {title: 'Dates', titleTextStyle: {color: '#FF0000'}},
    vAxis: {title: 'Visits', titleTextStyle: {color: '#FF0000'}},
    tooltip: {trigger: 'hover'}
};

Upvotes: 0

Views: 476

Answers (1)

Lian
Lian

Reputation: 2377

When I had the same problem, I made the text labels slanted (like in your smaller chart). Try setting hAxis.slantedText to true and hAxis.slantedTextAngle to about 40.

Sample code:

var manWindowWidth = $(window).width() / 1.25; // Gives me 1152
var manWindowHeight = $(window).height() / 1.25; // Gives me 668.8

var options = {
    title: 'Performance',
    pointSize: 5,
    width: manWindowWidth,
    height: manWindowHeight,
    hAxis: {title: 'Dates', titleTextStyle: {color: '#FF0000'}, slantedText: true, slantedTextAngle: 40},
    vAxis: {title: 'Visits', titleTextStyle: {color: '#FF0000'}},
    tooltip: {trigger: 'hover'}
};

Edit: in your first chart, the hAxis.showTextEvery is automatically set to 3. Also try playing with that value.

Upvotes: 1

Related Questions