How to show X Axis at all teh time with Google AngularJS Chart DIrective

987 views
Skip to first unread message

vipul choudhary

unread,
Aug 4, 2014, 7:04:21 PM8/4/14
to google-visua...@googlegroups.com
Hi,
 
I have to use the Google Line Chart for Angularjs. I use the below mentioned code. Even though I have data for X axis and Y axis, I am not able to see the X axis label for dates all the time( it shows up sometime, but If my data is for an year or so the X axis doesn't show up).
 
Please se the attached file screenshot.  
 
My Code snippet is as follows:
 
$scope.chartObject = {
    "type": "LineChart",
    "displayed": true,
    "data": {
        "cols": [
            {
                "label": "Month",
                "type": "number", // <-- this comma
            },
            {
                "label": "Weight",
                "type": "number", // <-- this comma
            }
        ],
        "rows": chartdata
    },
    "options": {
        "title": "Weight per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxis": {
            "title": "Sales unit",
            "gridlines": {
                "count": 10
            }
        },
        "hAxis": {
            "title": "Date", // <-- this comma
        }
    },
    "formatters": {}
}
 
My JSON Data that I prepare is as follows:
 
    function processArrayForWeight(json) {
        var chartData = [];
        for (var i = 0; i < json.length; i++) {
            if (json[i].Weight != null) {
                chartData.push
                    ({
                        c: [
                                { v: formatDate(new Date(json[i].EventTime)) },
                                { v: json[i].Weight }
                        ]
                    });
            }
        }
        return chartData;
    }
    function formatDate(date)
    {
        return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
    }
 
 
I have few other queries as well which are as follows:
I have to show a Google cart with two Y axis where I have to show the Y axis as shown in the screenshot ( chart Required with two Y axis where both Y axis will plot two separate numerical value sets) . How can I achieve it for Google Angular Line Chart Directive.
 
I have to show points on the Line Chart as shown in the screenshot "Chart with Points plotted on Line Graph" . Please let me know how I can achieve it on Line Chart Directive.
 
Please let me know your suggestions.
 
Let me know if you need any more information.
 
Many Thanks in advance.
 
Regards
Bipul Kumar
Accenture Pvt Services
 
RequirementForTwoYAxis.jpg
NO X AxisLabel Shown.jpg

Andrew Gallant

unread,
Aug 4, 2014, 8:17:32 PM8/4/14
to google-visua...@googlegroups.com
I suspect that your dates are not showing up because the chart is too short; if you make it taller (or use the chartArea.height and chartArea.top options to make the inner height shorter and/or move it up higher) there will be more space for the axis labels to draw.

The second y-axis should be getting values set appropriately.  Which data series do you have hooked up to it?  I can't tell from the chart, but at a guess it looks like just the middle dashed line is.

You can make the points in your chart visible by setting the pointSize option; this takes an integer value for the size of the points in pixels.

vipul choudhary

unread,
Aug 5, 2014, 12:31:08 PM8/5/14
to google-visua...@googlegroups.com
Hi Andrew,
 
Thank You for sharing information about pointSize and height & top properties. That resolved my two issues.
 
But for the double Y axis, can you please provide any code snippet example for the double Y axis for Google Angular Chart.
For this I will have two data Array combination for two series say "processArrayForWeight" and "processArrayForHeight" both sets will have Event Time and respective Height and Weight Values as shown in two functions where I am preparing datasets for two series.
 
 function processArrayForHeight(json) {

        var chartData = [];
        for (var i = 0; i < json.length; i++) {
            if (json[i].Weight != null) {
                chartData.push
                    ({
                        c: [
                                { v: formatDate(new Date(json[i].EventTime)) },
                                { v: json[i].Height}
                        ]
                    });
            }
        }
        return chartData;
    }
 
 function processArrayForWeight(json) {
        var chartData = [];
        for (var i = 0; i < json.length; i++) {
            if (json[i].Weight != null) {
                chartData.push
                    ({
                        c: [
                                { v: formatDate(new Date(json[i].EventTime)) },
                                { v: json[i].Weight }
                        ]
                    });
            }
        }
        return chartData;
    }
    function formatDate(date)
    {
        return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
    }
 
Once I plot the graph. I provide X axis as Event time which will be common for both and Height on first Y axis and Weight on the second Y axis. I will have two series of graphs in the middle  corresponding to both Height and Weight. The graph should be plotted between the two Y axis as shown in the screenshot I shared before for my requirement.
 
Please , let me know if you need any m ore information.
 
Thanks for all your help.
 
Regards,
Bipul Kumar

Andrew Gallant

unread,
Aug 5, 2014, 7:13:27 PM8/5/14
to google-visua...@googlegroups.com
In order to make that chart, you need a data set that contains both the height and weight data series together.  Assuming that both data series are available in your "json" variable, you could use something like this to create the data:

function processArrayForWeight(json) {
    var chartData = [];
    for (var i = 0; i < json.length; i++) {
        if (json[i].Weight != null) {
            chartData.push({
                c: [
                    { v: formatDate(new Date(json[i].EventTime)) },
                    { v: json[i].Weight },
                    { v: json[i].Height }
                ]
            });
        }
    }
    return chartData;
}
function formatDate(date) {
    return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
}

You would need to modify the chart like this:

$scope.chartObject = {
    "type": "LineChart",
    "displayed": true,
    "data": {
        "cols": [{
            "label": "Month",
            "type": "number"
        }, {
            "label": "Weight",
            "type": "number"
        }, {
            "label": "Height",
            "type": "number"
        }],
        "rows": chartdata
    },
    "options": {
        "title": "Weight per month",
        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "vAxes": {
            0: {
                // options for left y-axis
                "title": "Weight",
                "gridlines": {
                    "count": 10
                }
            },
            1: {
                // options for right y-axis
                "title": "Height",
                "gridlines": {
                    "count": 10
                }
            }
        },
        "hAxis": {
            "title": "Date"
        },
        series: {
            0: {
                targetAxisIndex: 0 // use the left y-axis
            },
            1: {
                targetAxisIndex: 1 // use the right y-axis
            }
        }
    },
    "formatters": {}
}

Vipul

unread,
Aug 6, 2014, 10:56:01 AM8/6/14
to google-visua...@googlegroups.com
Thanks a lot Andrew, it worked.
 
I love Google controls as the support from you guys is awesome :)
 
Will come vack to you for any other support if required.


--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/G8rLVTkmb2Q/unsubscribe.
To unsubscribe from this group and all its topics, 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.



--
Vipul
Three things in life never fails -  'TRUE LOVE', 'DETERMINATION' and 'BELIEF'

Vipul

unread,
Aug 6, 2014, 6:17:05 PM8/6/14
to google-visua...@googlegroups.com
Hi Andrew, 

I have ran into another issue now. When I create my ChartData to be feeded in chart according to below method. There can be scenario that on a given EventTime date my chart will have Null Value for Weight and have value for Height and similar wise for next series in my array. 
So when I plot the graph. My lines gets discontinuous as show in attached screenshot. Is there a way to connect the scattered points in ascending order( No matter my data-set) is 
empty. 

Please provide me some approach to either plot graph with connected lines irrespective of null value in my series. Or any other way to create my chart data where I can eliminate Null value for my series. 

I cannot put null check on both with AND condition in below code as requirement wise I can record Height and skip weight for a day. 

function processArrayForWeight(json) {
    var chartData = [];
    for (var i = 0; i < json.length; i++) {
 {
            chartData.push({
                c: [
                    { v: formatDate(new Date(json[i].EventTime)) },
                    { v: json[i].Weight },
                    { v: json[i].Height },
                    { v: json[i].Temperature}
                ]
            });
        }
    }
    return chartData;
}

Possible Set of Values that I am trying to form for chart for your reference ( this will be my Json Data that I  am passing in above function) 

EventTime  Height  Weight  Temperature

01/01/2013 155      140     37
07/02/2013 160      NULL    NULL
01/03/2014 NULL     148     NULL
07/04/2014 170      NULL    38


Let me know if you need any more information.

Thank You 

Bipul Kumar 
Accenture 
USA
DiscontinuousChart.png

Andrew Gallant

unread,
Aug 6, 2014, 8:15:49 PM8/6/14
to google-visua...@googlegroups.com
You need to set the chart's "interpolateNulls" option to true.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@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.
--
Vipul
Three things in life never fails -  'TRUE LOVE', 'DETERMINATION' and 'BELIEF'

Vipul

unread,
Aug 7, 2014, 11:54:01 AM8/7/14
to google-visua...@googlegroups.com
Thanks a lot Andrew, it worked.
 
Is there a Link where I can have documnetation for the Google Graphs for Angular


To unsubscribe from this group and all its topics, 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.

Andrew Gallant

unread,
Aug 7, 2014, 8:10:19 PM8/7/14
to google-visua...@googlegroups.com
The only Angular Google Charts directive I know about (this one) is a 3rd-party library.  As far as I know, the only existing documentation is what is on the Github page.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
--
Vipul
Three things in life never fails -  'TRUE LOVE', 'DETERMINATION' and 'BELIEF'



--
Vipul
Three things in life never fails -  'TRUE LOVE', 'DETERMINATION' and 'BELIEF'

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/G8rLVTkmb2Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@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.

Vipul

unread,
Aug 8, 2014, 12:14:31 PM8/8/14
to google-visua...@googlegroups.com
Thank You Andrew :). This was helpful


To unsubscribe from this group and all its topics, 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.

Vipul

unread,
Aug 12, 2014, 11:52:12 AM8/12/14
to google-visua...@googlegroups.com
Hi Andrew,

We have got this another requirement to show lines for upper bound and lower bound lines on the Line chart as shown in the screenshot. I will have just one data point for these Lines. How can I draw a straight line with one point only.

Please provide assistance with this as what property should I set to achieve this in Google Line Charts for Angular.

Thanks
Bipul Kumar
Accenture
Create A Line with one point.png

Vipul

unread,
Aug 12, 2014, 6:17:04 PM8/12/14
to google-visua...@googlegroups.com
Hi Andrew,

I have one more query\Concern.

Currently my Application uused ng-google-chart.js which has link to www.google.com\jsapi.

My application will be provided to users with no internet connectivity. How I can achieve it for offline application?

Please let me know. Thank You

Regards
Bipul Kumar

Andrew Gallant

unread,
Aug 12, 2014, 6:57:39 PM8/12/14
to google-visua...@googlegroups.com
In order to draw the boundary lines, you will need at least two points.  I recommend creating two new data series and setting your boundary values in the first and last rows.

Unfortunately, the Visualization API requires an active internet connection; there is no way to use it offline.
Visit this group at <a href="http://groups.google.com/group/go
...
Reply all
Reply to author
Forward
0 new messages