Establishing the bottom limit for the vertical axis on a column chart with the Visualization Google API

Question

Establishing the bottom limit for the vertical axis on a column chart with the Visualization Google API

I am currently working on implementing the Google Chart API alongside AngularJS.
I attempted to adjust the min property of the vertical axis for my column chart to 0 using the following code:

var dataMois = CaDuMois.query(function(){
    $scope.comparatifVentes.data = {
        "cols": [
            {id: "t", label: "Month", type: "string"},
            {id: "s", label: "Sales", type: "number"}
        ],
        "rows": [
            {c: [
                {v: d.getFullYear()-4},
                {v: dataMois[4].value},
            ]},
            {c: [
                {v: d.getFullYear()-3},
                {v: dataMois[3].value}
            ]},
            {c: [
                {v: d.getFullYear()-2},
                {v: dataMois[2].value},
            ]},
            {c: [
                {v: d.getFullYear()-1},
                {v: dataMois[1].value},
            ]},
            {c: [
                {v: "Current "+d.getFullYear()},
                {v: dataMois[0].value},
            ]}
        ],
        "vAxis.viewWindow": [{min:"0"}]
    };
    $scope.comparatifVentes.type = "ColumnChart";
    $scope.comparatifVentes.options = {
        'backgroundColor': '#f5f5f5',
        'title': "Total Sales Amount (€) for the Last 5 Months of "+monthNames[n],'height':"250"
    }
});

<div class="row">
    <div class="col-md-12">
        <div google-chart chart="comparatifVentes" style="{{chart.cssStyle}}"/>
    </div>
</div>

However, despite setting the min to 0, the value displayed on my chart remains at 250000.
Could I possibly be making an error somewhere in my implementation?

javascript angularjs google-api google-visualization

Answer 1

Answer №1

According to the documentation on Visualization: Column Chart:

vAxis.viewWindow.min

The minimum horizontal data value to display.

Not taken into account when vAxis.viewWindowMode is set to 'pretty' or 'maximized'. Type: number Default: auto

I believe there might be a typo in the word “horizontal”.

This code snippet demonstrates the correct way of implementing it:

// create it correctly
var options = {
    vAxis : { 
        viewWindow : { 
            min : 0 
        }
    } 
}

If you need to modify it after creation, you can do it like this:

// use this if the variable already exists
options.vAxis.viewWindow.min = 123;

Your initial implementation is incorrect for two main reasons:

// avoid doing it this way
var options = { "vAxis.viewWindow" : [{min:"0"}] }

This creates options["vAxis.viewWindow"] instead of options["vAxis"]["viewWindow"]
It places the value inside an object and that object within an array. Thus, to access it, you would need to refer to it as:
```
options["vAxis.viewWindow"][0]["min"]
```

Answer 2

According to the documentation on Visualization: Column Chart:

vAxis.viewWindow.min

The minimum horizontal data value to display.

Not taken into account when vAxis.viewWindowMode is set to 'pretty' or 'maximized'. Type: number Default: auto

I believe there might be a typo in the word “horizontal”.

This code snippet demonstrates the correct way of implementing it:

// create it correctly
var options = {
    vAxis : { 
        viewWindow : { 
            min : 0 
        }
    } 
}

If you need to modify it after creation, you can do it like this:

// use this if the variable already exists
options.vAxis.viewWindow.min = 123;

Your initial implementation is incorrect for two main reasons:

// avoid doing it this way
var options = { "vAxis.viewWindow" : [{min:"0"}] }

This creates options["vAxis.viewWindow"] instead of options["vAxis"]["viewWindow"]
It places the value inside an object and that object within an array. Thus, to access it, you would need to refer to it as:
```
options["vAxis.viewWindow"][0]["min"]
```

Establishing the bottom limit for the vertical axis on a column chart with the Visualization Google API

Answer №1

Similar questions

Error: The current element cannot be clicked. Please try again

Issue with Phong material not responding to area light in a three.js.obj model

Creating a custom type for accepted arguments in a Typescript method

Triggering multiple onClick events in React / Material-UI when used within a data.map() loop

Tips for updating a value within ng-repeat only if the value is equal to "string"; otherwise, hide it from display

What's the best way to trigger an event within a tag in a Vue.js component?

Creating content by extracting key value pairs from a JSON object retrieved from Firebase

Exploring the concepts of arc functions in discord/js programming

Determining the best use-case for a React framework like Next or Gatsby versus opting for Create React App

Select a background using the Konvas.js library by clicking on a CSS class

The requested command is not being recognized

The rationale behind organizing analogous variables into groups

Creating the jquery/javascript code needed to produce an event or alert similar to the "Confirm Navigation" prompt used on sites like Stack Overflow

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application

Unlocking Discord Account Information through OAuth2

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

A Fresh Approach for Generating Unique UUIDs without Bitwise Operators

Which Express.js template allows direct usage of raw HTML code?

How can parameters be included in ng-href when using ng-click?