Javascript – Google visualization line chart missing Y axis

google-visualizationjavascript

I am new to javascript and the Google Visualization library. I've created a line chart as below 1, but cannot get the Y Axis to display anything; I'm looking for the axis itself to be drawn, along with the values from the Data Table.

Here's my code (the chart labels are changed from the screenshot, but nothing more):

google.setOnLoadCallback(drawLineChart);
function drawLineChart(){var data=google.visualization.arrayToDataTable(
    [
        [
            'Day',
            'Label 1','Label 2','Label 3','Label 4','Label 5',
            'Label 6','Label 7','Label 8','Label 9','Label 10',
        ],
        ['19 Aug 2013',1,0,0,0,0,0],
        ['20 Aug 2013',2,2,2,0,0,0],
        ['21 Aug 2013',5,5,0,6,5,0],
        ['22 Aug 2013',1,4,3,2,0,0],
        ['23 Aug 2013',0,0,0,4,0,0],
        ['24 Aug 2013',3,2,1,2,0,15],
        ['25 Aug 2013',1,2,1,2,0,0],
        ['26 Aug 2013',3,1,2,1,0,0],
        ['27 Aug 2013',0,0,3,2,0,1]
    ]);

    var options = {
        title:'Title',
        legend:{position:'bottom'},
        curveType:'none',
        interpolateNulls:true,
        chartArea:{left:0,top:10,width:"100%"}
    };

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

Screenshot

Best Answer

An alternative answer that keeps the chartArea.width option at 100%: set the vAxis.textPosition option to "in", which will draw the labels inside the chartArea:

var options = {
    title:'Title',
    legend:{position:'bottom'},
    curveType:'none',
    interpolateNulls:true,
    chartArea:{left:0,top:10,width:"100%"},
    vAxis:{textPosition: 'in'}
};

That will give you the axis labels just inside the edge of the chartArea

Related Solutions

Javascript – Why does Google prepend while(1); to their JSON responses

It prevents JSON hijacking, a major JSON security issue that is formally fixed in all major browsers since 2011 with ECMAScript 5.

Contrived example: say Google has a URL like mail.google.com/json?action=inbox which returns the first 50 messages of your inbox in JSON format. Evil websites on other domains can't make AJAX requests to get this data due to the same-origin policy, but they can include the URL via a <script> tag. The URL is visited with your cookies, and by overriding the global array constructor or accessor methods they can have a method called whenever an object (array or hash) attribute is set, allowing them to read the JSON content.

The while(1); or &&&BLAH&&& prevents this: an AJAX request at mail.google.com will have full access to the text content, and can strip it away. But a <script> tag insertion blindly executes the JavaScript without any processing, resulting in either an infinite loop or a syntax error.

This does not address the issue of cross-site request forgery.

Javascript – How to pass command line arguments to a Node.js program

Standard Method (no library)

The arguments are stored in process.argv

Here are the node docs on handling command line args:

process.argv is an array containing the command line arguments. The first element will be 'node', the second element will be the name of the JavaScript file. The next elements will be any additional command line arguments.

// print process.argv
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

This will generate:

$ node process-2.js one two=three four
0: node
1: /Users/mjr/work/node/process-2.js
2: one
3: two=three
4: four

Related Topic

Javascript – Turning off eslint rule for a specific line