adjusting the vertical axis scale on the Google Charts API

During my experimentation with setting the vertical axis scale in Google charts, I found that the automatic scaling was not satisfactory for comparing two results. I wanted both results to be on an equal scale for a fair comparison.

Despite setting the maximum and minimum values in my code, they did not seem to reflect in the output.

Below is the code snippet:

function createExpenseChart(data) {
        google.load("visualization", "1", {packages:["corechart"]});

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

    chartdata.addColumn('number', 'Expense');
    chartdata.addColumn('number', '2013');
        chartdata.addColumn('number', '2014');

        for (var k in data["Expense"]["2013"]){
            if (data["Expense"]["2013"].hasOwnProperty(k)) {
["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)])
                chartdata.addRow([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)]);
            }
        }

    var options = {'title':'2013 vs. 2014 comparison',
                curveType: 'function',

viewWindowMode:'explicit',
              viewWindow:{
                max:100000,
                min:10000
        },
        vAxis: {title: 'Cost ($)',
                        minValue: 0,
                },
        hAxis: {title: 'Expense (dollars)'},
        height: 600,
        width: 1000
    };

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

I also attempted the following adjustments but saw no visible effect:

var options = {'title':'2013 v/s 2014',
                curveType: 'function',

viewWindowMode:'explicit',
              viewWindow:{
                max:80,
                min:20
        },
vAxis: {
title: 'Cost ($)'
    viewWindowMode:'explicit',
    viewWindow: {
        max:10000,
        min:10000
    }
},
        hAxis: {title: 'Expense (dollars)'},
        height: 600,
        width: 1000
    };

Answer №1

Hey everyone, good news! I was able to resolve the issue by making a few tweaks to the code. It turns out that cleaning my cache did the trick.

I apologize for any confusion earlier.

function generateExpenseChart(data) {
        google.load("visualization", "1", {packages:["corechart"]});

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

    chartData.addColumn('number', 'Expense');
    chartData.addColumn('number', 'Previous Cost');
        chartData.addColumn('number', '2014 Cost');

        for (var key in data["Expense"]["2013"]){
            if (data["Expense"]["2013"].hasOwnProperty(key)) {
                chartData.addRow([parseInt(key,10),parseInt(data["Expense"]["2013"][key],10),parseInt(data["Expense"]["2014"][key],10)]);
            }
        }

    var formatter = new google.visualization.NumberFormat({negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
    formatter.format(chartData, 1);
    formatter.format(chartData, 2);

    var options = {'title':'2013 vs. 2014 Costs by Expense',
                curveType: 'function',
                viewWindowMode:'explicit',
                viewWindow:{
                        min:0
        },
        vAxis: {title: 'Cost ($)',
                viewWindowMode : 'explicit',
                viewWindow:
                {
                        min: 0,
                        max:42000000
                }
                },
        hAxis: {title: 'Expense (years)'},
        height: 600,
        width: 1000
    };

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launching an online platform with Express and Ember frameworks

I am embarking on a project to create a straightforward CMS using Node.js (with Express) and Ember.js. While I have experience with Angular, I am new to Ember.js. I've noticed that Ember.js operates similarly to Angular in terms of its CLI reliance, a ...

What is the process for updating the class of the target button?

I am new to using Vue and struggling to achieve a specific functionality. I have multiple buttons and I want to ensure that only one button can be selected at a time. Currently, I have tried implementing it with the following code: :class="isActive ? ...

Using Vue.js: Invoking a Function from a Different Component

Here is the HTML snippet from Component1 <component2></component2> This is the <script> block from Component1 export default { methods: { fetchData() { ... } } } Now, I want to call the method fetchData() in Compon ...

add element into the center of the div

I am attempting to insert an element (such as a div) in the middle of another div and directly after two line breaks. Below is an example of my code. The length of the div may vary. <html> <head> <title></title> <script ...

Tips for sending multiple variables in a loop as JSON data through an AJAX request

I need assistance with the code below. I am trying to pass the value[i] into a data string in a json ajax post submit. Essentially, my goal is to gather all the checked values in a form and insert them into an existing json data string using ajax. This is ...

Utilize the context API to efficiently share information from the parent to both its children and sibling children

I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...

ESLint refuses to be turned off for a particular file

I am in the process of creating a Notes.ts file specifically for TypeScript notes. I require syntax highlighting but do not want to use eslint. How can I prevent eslint from running on my notes file? Directory Structure root/.eslintignore root/NestJS.ts r ...

Display event using Angular

I am currently working on an Angular project where I need to print a specific area of the page. While I know that this can be done using media CSS, it is causing issues for me due to the numerous print functionalities present in the project. I am attemptin ...

JSP checkbox functionality

I have been attempting to solve this issue since last night, but I am struggling and need some help. There are two pages, named name.jsp and roll.jsp. In name.jsp, there are two input text boxes and one checkbox. After entering data in the text boxes and ...

Executing a Ruby method on a server using JavaScript - A guide

I'm facing a seemingly simple issue that I can't seem to find a clear solution for anywhere. Essentially, I have a JavaScript application hosted on a server that requires passing information between the JS app and a Rails-built server. The proces ...

Alert: VirtualizedList warns of slow updates for a large list despite optimized components

Struggling with avoiding the warning message "VirtualizedList: You have a large list that is slow to update" while utilizing the <FlatList> component in React-Native. Despite thorough research and attempts at finding a solution, including referencin ...

Losing POST data when sending HTTP status codes in Express 3.4.8

I have implemented a route handler in Express 3.4.8 to check for privileges on all my routes. In case the credentials sent with each request are invalid, I want to respond with a status of 403. app.all('*',function(req,res,next){ //req.body c ...

Is it possible for Vue.js to allow for templateUrl configuration similar to Angular.js?

Vue.js is great for its simplicity, but I want to avoid complicating it with browserify or webpack. I would rather use something similar to templateUrl in Angular, allowing me to serve partial pages (usually components) directly with Nginx. How can I ach ...

Removing CSS from a Link in react-router-dom

My attempt to create unique divs for different pages using the code in my home.js didn't go as planned. <Link to="Subject1"> <Product title="The Lean Startup" image="https://images-na.ssl-images-amazon.co ...

Putting together different materials on one side of a cube using Three.js (which involves using multiple materials)

In my latest project, I have successfully created a cube (skybox) with different materials for each side using MeshFaceMaterial: var imagePrefix = "images-nissan/pano_"; var imageDirections = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; var imageSuf ...

Unexpected behavior with if statements in jQuery

Having recently started using jQuery, I am embarking on the creation of a survey. Each question within the survey resides in its own div and is unveiled upon clicking the "Next" button. Currently, all divs are hidden except for the current one. My approach ...

Is there a way for me to obtain the present value of the chosen button in the list below?

I am working with a group of three buttons labeled English, Hindi, and Urdu. How can I retrieve the value of the selected button in a JavaScript function? <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

What is the best approach to display data in React fetched from an API request? If this is not the right method, what changes should be made to the JSX rendering to convert

As I begin my journey with React, I find myself questioning the best practices for displaying data. Should I always break down components into smaller ones rather than having one large component render everything? It seems like a good practice, but I' ...

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

Creating a dynamic Google Chart by fetching data from MongoDB with AJAX/JQuery

After completing the MongoDB tutorial for nodejs on their website, I am in the process of creating a simple test case to send query results to a Google Chart using AJAX. Below is the nodejs code snippet used to form the query: CODE: var MongoClient = re ...