Question

I need help changing axis color to black and background color to transparent for google charts…
I have looked all over the web with no luck
Also I’ve tried with css, still no luck
I am using the following script:

    //Set-up the values for the Axis on the chart
    $maxWeeks = count($priceResults);
    //Set chd parameter to no value
    $chd = '';
    //Limit in my example represents weeks of the year
    $limit = 52;

    //Start to compile the prices data
    for ($row = 0; $row < $limit; $row++) {
        //Check for a value if one exists, add to $chd
        if(isset($priceResults[$row]['price']))
        {
            $chd .= $priceResults[$row]['price'];
        }
        //Check to see if row exceeds $maxWeeks
        if ($row < $maxWeeks) {
            //It doesn't, so add a comma and add the price to array $scaleValues
            $chd .= ',';
            $scaleValues[] = $priceResults[$row]['price'];
        } else if ($row >= $maxWeeks && $row < ($limit - 1)) {
            //Row exceeds, so add null value with comma
            $chd .= '_,';
        } else {
            //Row exceeds and is last required value, so just add a null value
            $chd .= '_';
        }
    }

    //Use the $scaleValues array to define my Y Axis 'buffer'
    $YScaleMax = round(max($scaleValues)) + 5;
    $YScaleMin = round(min($scaleValues)) - 5;
    //Generate the number of weeks of the year for A Axis labels
    $graphSequence = generateSequence(1, 10, "|");

    $cht = 'lc';//Set the chart type
    $chxl = '';//custom axis labels
    $chxp = '';//Axis Label Positions
    $chxr = '0,' . $YScaleMin . ',' . $YScaleMax . '|1,1,52|3,1,12|5,' . $YScaleMin . ',' . $YScaleMax . '';//Axis Range
    $chxtc = '0,5|1,5|5,5';//Axis Tick Mark Styles
    $chxt = 'y,x';//Visible Axes
    $chs = '500x200';//Chart Size in px
    $chco = '76E32C';//Series Colours
    $chds = '' . $YScaleMin . ',' . $YScaleMax . '';//Custom Scaling
    $chg = '-1,-1,1,5';//Grid lines
    $chls = '2';//line styles
    $chm = '';//Shape Markers

    //Build the URL
    $googleUrl = 'http://chart.apis.google.com/chart?';
    $rawUrl = $googleUrl . 'cht=' . $cht . '&chxl=' . $chxl . '&chxp=' . $chxp . '&chxr=' . $chxr . '&chxs=' . $chxs . '&chxtc=' . $chxtc . '&chxt=' . $chxt . '&chs=' . $chs . '&chco=' . $chco . '&chd=t:' . $chd . '&chds=' . $chds . '&chg=' . $chg . '&chls=' . $chls . '&chm=' . $chm;

    $output = $rawUrl;

    return $output;
}

/**
 * A nicer way to test arrays
 */
function displayArray($val)
{
    echo "<pre>";
    print_r($val);
    echo "</pre>";
    return;
}

/**
 * a simple numeric sequence generator. requires a min and max for the sequence, and can take an optional seperator
 */
function generateSequence($min, $max, $seperator = "")
{
    $output = '';
    for ($i = $min; $i <= $max; $i++)
    {
        $output .= $i . $seperator;
    }
    return $output;
}

$chart = generateGoogleChart();

$html = '<div id="chart">';
$html .= '<img src="' . $chart . '" />';
$html .= '</div>';

echo $html;
?>

Thank you for your time.

Answer 1

I have used the Image Charts API in the past and implemented the builder pattern to generate my chart URL. Transparent backgrounds and coloured axis were used in our app with the method call providing transparency shown below;

/**
 * Remove any background fill colours. The #chco parameter is used for {@link ChartType#BAR}
 * fills.
 * 
 * @return this.
 * @see https://developers.google.com/chart/image/docs/chart_params#gcharts_solid_fills
 */
public GoogleImageChartBuilder withTransparentBackgroundFill() {
 stringBuilder.append("&chf=bg,s,00000000");
 return this;
}

So on re-reading the documentation linked to above I have said with the chf parameter; “give me a solid background fill that is transparent”… perhaps a more sensible way of putting it would have been “give me a transparent background fill”! i.e.

 stringBuilder.append("&chf=bg,t,00000000");

The axis colouring is defined by the chxs parameter. Take a look at the last optional argument documented here named <opt_axis_color>.

Hope that helps you out. Remember the image charts API is now deprecated. The JavaScript version isn’t so terrifying 🙂