Gauge Chart

As the plugin description states:

You can make:

Area charts
Bar charts
Bubble charts
Candlestick charts
Column charts
Combo charts
Histogram charts
Line charts
Pie charts
Scatter charts
Stepped area charts

Guage charts are not supported. It may not be difficult to add support for them, though. If you choose to do so please contribute your patch to the rest of the community. Thanks. ??

Thanks just wanted to make sure I hadn’t missed obvious.. Yes just had look at code as you said quite easy to add..

Managed to get it all working but one part which is the warning areas on gauge not showing. Code on generated page looks ok but image generated doesn’t show the warning levels..

<div id="igsv-7-Gaugechart-1Wj_AoG3H5z5CL8L0XujXXRetF50H4RJby7uzq8IM5C8" class="igsv-chart" title="" data-chart-type="Gauge" data-datasource-href="url_here" data-chart-greenfrom="1" data-chart-greento="500" data-chart-height="250" data-chart-max="1280" data-chart-redfrom="1000" data-chart-redto="1280" data-chart-width="602" data-chart-yellowfrom="500" data-chart-yellowto="1000">

Going to dig around it again in a few see if done anything daft..

Russ

Cool, Russ. ?? Once you have it working, please submit a patch (via GitHub, ideally).

Been looking at this know what the issue is basicly added to displayShortcode

'chart_redFrom'                    => false,
'chart_redTo'                      => false,

However the plugin somewhere is converting to chart_redfrom and chart_redto. But apparently google gauge chart stuff is case sensitive. Tried looking but at moment can’t see where it is converting it.

Looking at it already put into lowercase by time it hits DisplayShortcode.

@meitar

Anyideas on where it would be converting it to lower case I must be missing the obvious..

Russell

Yeah. So, the algorithm for chart integration has two main parts and works like this:

The first part is PHP processing to produce output in HTML that provides a container HTMLElement DOM object for the chart JavaScript to work inside of. That works like this:

• Read and validate the shortcode attributes.
• Find all chart-related attributes. (See the getChartOptions() method.)
• Convert each chart attribute shortcode to a valid HTML5 data- attribute/value pair. (See the getGVizChartOutput() method.) This is also the step that converts WordPress’s shortcode syntax (like_this="syntax") into valid HTML5 data- attributes (data-like-this='syntax').

Once the HTMLElement has been created and output to the browser as an HTML string, the JavaScript (igsv-gvizcharts.js) picks up where this left off. This file’s algorithm is as follows:

• Load the Google Charts API packages.
• Look for any HTMLElements produced by the PHP output in the previous section (these are elements whose class is igsv-chart).
• For each chart container found, read the element’s data- attributes and collect them into a chart options object suitable for Google Charts API. (This is the step that changes the case of the attribute names. See the lowerFirstCharInKeys() helper method in the JavaScript file.)
• Pass the collected options for this chart into the Google Chart API loader, and save the response into the HTMLElement object container.

That’s the whole implementation from start to finish. ?? There are some details in various steps that I glossed over, mostly to do with making sure the attributes and values are valid at each step and that the next step in the process has a consistent view of what to expect. But that’s basically how it works.

Hope this helps! And thanks again for working to add Guage support. ??

No problem thanks for info…

After doing google searching find issue wordpress converts any shortcode attrubutes into lowercase.

Which means got to use str_replace but not sure where would use it that won’t be effected by wordpress..

Russ

Right, so WordPress expects shortcode attributes to be lowercased and underscore separated, like_this, whereas the Google Chart API uses camel cased names, likeThis. I’ve already implemented the translation from the one to the other all the way through in a generic fasion, so you shouldn’t need to write any more code to handle case changes at all.

All you should need to do is tell the plugin to recognize whatever Guage chart option values are needed from the shortcode (like chart="Guage" or whatever its name is), and the specific options (if any) it needs, like yellowTo. But since you need to tell WordPress about that option, you need to do it in the way WordPress expects and then let my code handle passing it to Google Charts API.

This means instead of adding a shortcode option like chart_yellowTo, which is a combination of underscore separated names and camelCased names, just do chart_yellow_to in the WordPress shortcode, and let the plugin automatically take that through the process of converting the attribute name to a Google Charts API option name (yellowTo).

You’ll still need to tell the igsv-gvizcharts.js file to recognize a “Guage” chart type, and you’ll need to tell the PHP plugin file to accept shortcode attributes that are unique to a guage chart, but you shouldn’t have to worry about converting individual option names from the one format to the other.

Cool..

So if I reading the above right..

Add

'chart_redTo' => false,

To the list in displayShortcode function and then add into the shortcode..

chart_red_to="1000"

Russ

No.

Add

'chart_red_to' => false,

in the list and then add

chart_red_to="1000"

in the shortcode.

If do that it just outputs data-chart-red-to into the div and doesn’t convert etc..

Russ

data-chart-red-to is the correct conversion for a Google Chart API option name of redTo.

So it is ?? thanks ??

ok will finish testing this end and then submit everything as patch via github..

Russell

That’d be great, thanks! ??

Hi Russ, any word on a patch for supporting gauge chart?

Actually, I just looked at adding support for this chart type and it turns out it was very easy, so if you update to version 0.9.11, you’ll have Gauge chart support. ??