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": {}
}
On Tuesday, August 5, 2014 12:31:08 PM UTC-4, vipul choudhary wrote:
>
> 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
>
>
> On Monday, 4 August 2014 19:17:32 UTC-5, Andrew Gallant wrote:
>
>> 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.
>>
>> On Monday, August 4, 2014 7:04:21 PM UTC-4, vipul choudhary wrote:
>>>
>>> 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
>>>
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
