labels and shading for area charts

[John Hughes]

I am converting a Flash AreaChart to a Google AreaChart, so far so good but I have two questions.

The chart I have has 4 trend lines with shading below.  H title, V title, and legend right.

1) I need to a label to the end points (far left, far right).  All four lines start at the same point.  Basically label first point and last point on one of the trend lines.

2) I want one of the trend lines to have shading but I want to disable it on the other trend lines.  So 1 with shading and 3 without.  I am thinking to set the shading to the same color as the background or make it transparent but so far have not found out how.

[Andrew Gallant]

Do you want to have axis labels at the end points, or do you want to label the data points themselves?

For the area fills, set the series.<series indec>.areaOpacity option to 0 for all series that you want to remove the shading on.  So, if the first, second, and third data series should not have area fills, set it like this:

series: {

    0: {

        // options for 1st series

        areaOpacity: 0

    },

    1: {

        // options for 2nd series

        areaOpacity: 0

    },

    2: {

        // options for 3rd series

        areaOpacity: 0

[John Hughes]

The series suggestion worked perfectly, thanks.

Technically I want to label the first and last points on one of the traces.  Something along the lines of data[0].label = "start" and data[len-1].label = "end".  I don't want the labels on the middle points.

Attached is the chart I am trying to emulate.  I drew the 1 & 2 where the "TX Site 3" & "RX Site 3" labels are.  As you can see all four data traces start and end at the same point so I can use any trace just need the two labels.

[Andrew Gallant]

Add an "annotation" role column to your data set (which will be attached to whatever series of data immediately precedes it in the DataTable).  This is a string type column that contains labels to add to data points.  Use null values for all points that you do not want to have labels.  If you post your chart code and some sample data, I can show you how to add this.

[John Hughes]

Andrew,

Thanks the annotation allowed me to add the labels to both ends.

But the label runs past the end of the chart ends up on top of the number on the left and the legend on the right.  Any ideas on how to make them appear fully on the chart.  I have tried the textStyle but no luck

John

[Andrew Gallant]

You can't change the placement of the annotation except to place it at a different data point.  Are you using a discrete (string-based) or continuous (number, date, datetime, timeofday based) domain axis?

[John Hughes]

I believe the answer is continuous but I maybe incorrect.  Below is my latest code, no data.  The data from a JSON request but maybe you can get an idea of what I am doing.

drawChart(id: number, name: string, isMetric: boolean = false): void {
        "use strict";
        /// Get data from server
        $.getJSON("/Api/PtPSiteData/" + id, function (data: any): void {
            /// distance string
            var hLabel: string = (isMetric ? "km" : "miles");
            var vLabel: string = (isMetric ? "meters" : "feet");
            var txLabel: string = data.report.TXSiteName;
            var rxLabel: string = data.report.RXSiteName;
            /// Build the chart data table
            /*
             * report
             * Reference
             * Profile
             * Curvature
             * Fresnal
             * Fresnal60
             */
            var table: google.visualization.DataTable = new google.visualization.DataTable();
            table.addColumn("number", "x", "x");
            table.addColumn("number", "Point-to-Point Profile", "Profile");
            table.addColumn("number", "Line of Sight Path", "Reference");
            table.addColumn("number", "First Fresnel Zone", "Fresnal");
            table.addColumn("number", "60% of First Fresnel Zone", "Fresnal60");
            table.addColumn({ type: "string", role: "annotation" });
            for (var i: number = 0; i < data.Profile.length; i++) {
                var label: string = null;
                if (i === 0) {
                    label = txLabel;
                } else if (i === data.Profile.length - 1) {
                    label = rxLabel;
                }
                table.addRow([data.Profile[i].X,
                    data.Profile[i].Y,
                    data.Reference[i].Y,
                    data.Fresnal[i].Y,
                    data.Fresnal60[i].Y,
                    label]);
            }
            /// Set chart options
            var options: google.visualization.AreaChartOptions = {
                title: "Path profile between TX and RX sites",
                is3D: true,
                hAxis: {
                    title: "Distance between Tx Site and Rx site (" + hLabel + ")",
                    titleTextStyle: { color: "#333" }
                },
                vAxis: {
                    title: "Normalized Height Referenced to LOS Path (" + vLabel + ")",
                },
                series: {
                    0: { color: "#6E9A3F" },
                    1: { color: "#DBAF00", areaOpacity: "0.0" },
                    2: { color: "#800080", areaOpacity: "0.0" },
                    3: { color: "#5895DB", areaOpacity: "0.0" }
                },
                annotation: {
                    5: { style: "letter" }
                },
                annotations: {
                    textStyle: {
                        bold: true,
                        italic: true,
                        color: "black"
                    }
                }
            };
            /// Create the area chart
            var chart: google.visualization.AreaChart = new google.visualization.AreaChart(document.getElementById(name));
            /// Draw the chart
            chart.draw(table, options);
        }).fail(function (request: any, status: any, error: any): void {
                alert(request.responseText);
        });
    }

[Andrew Gallant]

Yes, your data should be continuous.  The easiest way to handle this would be to create some offset space to the left and right of your data by setting the hAxis.viewWindow.min and hAxis.viewWindow.max options to values below and above the min and max of your "x" values (respectively):

var offset; // some value to offset the min/max by

var range = table.getColumnRange(0);

in options:

hAxis: {

    title: "Distance between Tx Site and Rx site (" + hLabel + ")",

    titleTextStyle: { color: "#333" },

    viewWindow: {

        min: range.min - offset,

        max: range.max + offset

    }

}

You will have to experiment with different values of the offset to get something that works for you.  

An alternative would be to create a new series of data with two points set slightly in from the min/max of the data set, and annotate these data points.  This is likely to be more work to accomplish, but will probably produce a more aesthetically pleasing chart.

                    1: { color: "#DBAF00",<span class="styled-by-prettify" styl

...

[John Hughes]

Andrew,

Thanks for the suggestions.  The first one works but does not look very good.  At about 0.50 the words start to get into the correct location but then the lines are so far from the edge it starts looking bad.

I will see what I can do about implementing the second options.

--
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/jrgEZBZZVtU/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.

--
Regards,
John J. Hughes II