Is there any way you can enable the value of each slice of the pie-chart to be shown? You could cheat by putting it in the label obviously, but it would be nice if you could hover over the slice to see the value..

It would be great to document some technical specs/parameters for the widgets.

My specific question is: How many data items can you include in the linechart? I've had it up to 300 and I'll eventually find out the limit with some testing but it would be great to just read this from docs.

cheers, keep up the great work on GB

James

Hi Paul, 

I am writing a wrapper for .Net/ asp.net Mvc and I am wondering what the post parameters are for the chart widgets (I assume format stays the same, is there a type = 1,2,3 ?)

Best,

Martin

Something else. Please use american spelling in future api revisions. Color instead of Colour. 

Thanks

I'll publish it on github in a couple of days and post a link here.

Regarding the spelling: Most libraries are written using American English for names, so using the British version introduces the chance for tiny yet hard to find bugs. The number one headache for APIs these days is getting people to use it so it makes sense to follow the herd here and remove any and all obstacles. 

Just an update for everyone:

The format parameter is omitted when set to json, and the values seem to be 1 for xml and 0 for json, and not xml and json.

Uploaded the first version to github at https://github.com/mwawrusch/GeckoboardNet

As this is my first attempt to use git for a visual studio project things might be a bit bumpy. 

I'm just getting set up but have a couple of questions on the custom graphs:

1) It looks like you can only do one line per graph - any possibility of two lines?  I'd like to show today's visitors by hour vs yesterday's

2) You mentioned the URL you send to Google - do you use the Google chart tool for the charts?  Could you create a widget which exposed that in a raw format?  Or just a widget that could read the URL for an image?

3) Are the connections to the widget data source coming from the browser or your servers?  I'd love to do one of these for internal-only data but it has to hit a local address.

Thanks for the quick reply - I'll check out the image widget as a Google chart workaround for some more complex stuff.  Does it pull the image from the original source or do you guys grab it and cache it?  

We have a testbed running using the API key setup - I'd like to be able to pass username as well as password to it so that I can make the authentication happen in apache (even if it's an optional, secondary piece).  Given the way the auth headers work I have to take care of the API authentication at the application level, which leaves more opportunity for a bug.  We will use it this way for now - it's just a comfort level thing.

This is great - thanks for the help.

I created a piece in the API we're building for Geckoboard to allow me to publish Google Graphs based on custom data.  I ran in to two problems:

 -1) The image widget doesn't include a spot for an API key

 -2) The image widget enforces the need for an image extension - I'm setting this as a png in the headers but don't want to mess with my rewrite rules to actually name it .png

I have been playing with some of the widgets - is there a way I can send over the URL of the google chart using a text widget and let you guys load it?  The text widgets support API keys and I don't have to alter the system on my side to make png extensions executable by php....

Can you give me an example of the syntax to use?  I tried a few variations and eventually gave up - this is the last one I tried.  I always get a blank:

That worked - I actually had that at one point but didn't even test it because it didn't render directly in a browser. Thanks.

Hey Guys,

was wondering if you can give me some links/advice on using the custom widget to make graphs from Google Analytics data? I'm not too familiar with XML or JSON so if anyone already has some example script/code that would be awesome.

-Craig

Happy to - it's actually pretty simple...

First - Design your graph / chart.  Here is a great tool for doing this: http://imagecharteditor.appspot.com/  Some advice:

 - Use transparent backgrounds - it'll make the chart fit in a lot better - specifically this parameter: chf=a,s,000000|bg,s,00000000

 - Use colors that compliment GB - filled line charts with bright white lines at the top look really good.

 - Don't worry about putting random variables on to keep it from cacheing - when the chart changes so does the URL so it's built in

Next - have your place to serve the file from.  We set up a cloud server specifically for gecko and used the http auth to create an API key.  Keep this simple - security is a concern here.

The XML is actually really simple - basically you're taking advantage of the fact that GB allows some HTML: 

<root>
<item>

<img src = "YOUR GOOGLE IMAGE URL">

  <type>0</type>

</item>

</root>

That's basically it.  You can put in multiple items and have the images rotate - this is default behavior and looks really slick.

-John

Sorry - I just realized I left PHP code in the XML - primitive comment system won't let me edit...

<root>

  <item>

    <img src="GOOGLE CHART URL">

    <type>0</type>

  </item>

</root>

John,

I think it would be beneficial if you could write (video) a couple of tutorials on this for non developers - its such a great system and I have worked out some of the YQL stuff but the power comes with getting secure data out and I really dont get the authentication through Auth to get to my google chart data

Cheers

Jonathan

Ah I see I was trying to make a chart with the widgets from Google API data didn't think of trying to embed a chart from google!

Thanks for the advice. 

Jon,

I'd be happy to put something together, but I have one problem.  Since GB announced their pricing strategy I am not sure we'll stick with them.  The pay-per-screen thing is a bit too much - everyone in my company wants to use this as their screen saver and I have been asked to put dashboards on 5 different TVs as permanent fixtures.  At this rate I'll be paying $150 / month for the basic plan.  I am looking for an alternative (we write all our own widgets so we get nothing from the pre-defined ones - we even rewrote the Google Analytics and Chartbeat widgets) so I am hesitant to spend any time on it.  If they gave out an unlimited plan - say even $50 / month for unlimited screens - it would be a different story.

I went a very easy route, and could easily pack up the software I created and post it up.  I used codeignitor and created a single controller and a couple of views to handle the GB stuff.  Basically any method has to output an array formatted in one of a couple of ways, then call the view associated with that particular method.  In PHP if you want to grab the API key and compare against it just look for the $_SERVER['PHP_AUTH_USER'] variable.  We then hardcoded the key into the controller. If it didn't match I threw a 401 exception and killed the page.  I then used Apache rewrite rules to point everything at the geckoboard controller, therefore making sure nothing else could be executed.

Let me know if that helps.  Cheers.

-John

Ciara,

I don't really want to sign up another account to post to the blog - I know this isn't the best forum but my 2-cents is pretty short.

Per-device limit makes it very hard to scale this to people that want to see it, or pull it up during a meeting to show it off.  It's just too constricting.  Give me unlimited devices and I'll asses if that fee is worth it for me.

Secondly - you alienate people (like me) that want to dev against the platform.  I have to pay $10 / month for my own dev setup - and you guys want me to give back?  A dev platform can be "hard refresh only" but I need to see how my widgets work against your system.

-John 

Hey guys, sorry for delay in reply but I didn't have any time to work on the suggestions john gave me!

I have looked through your example John and while it has helped me real a bit about pulling in a Google Graph API (which was very actually useful for my tiny developer-less brain) I still haven't managed to graph data from Google analytics, is there a simply way to pull GA data into the Google Graphs API?

Ahhh - You will need to pull the Google Analytics data via their API, then re-build it into the graph that you want and feed it to Google Graphs.  I don't know anything about the Google Analytics API - but I know we pull some custom numbers (I didn't write that piece) for our GB dashboard.  

I'll ask around and see if I can find you a starting point.

This came from Keith - he's one of my partners here and the one that wrote our GA widgets - he said he's using this module:

http://code.google.com/p/gapi-google-analytics-php-interface/wiki/G...

Thanks for the link John, PHP is a bit more familiar to me so I think I can make a go of this.

@John:

I'd love a post up with the CodeIgniter package. Or if you want to email me at tommy [at] brandos [dot] com that's fine too (as I don't monitor this too frequently). Would really appreciate it.

/Tommy

Sorry - I got busy and let this get to the wayside.  I'll post something up tonight.

I wanted to get this uploaded before the end of the day - check out the README in the zip.  It's definitely rough (and untested - sorry) but should give you the framework you need.  You definitely have to be able to get CodeIgnitor up and running yourself, but the basics are here for API and Google Graphs.  I'd actually recommend using this more as a guideline than just copy / pasting the code.

Cheers,

-John

My pleasure - I hope it's helpful.  Feel free to throw any questions at me.

Can you reverse the Geck-o-meter so that high numbers are red and low numbers are green (i.e. phone calls to the a support center)?

I was going to request a normal bar graph (which would still be nice) -- but a couple additions to the 'funnel' type might get me the results I'd like.

A flag to hide the percentages would be great, as well as implementing the 'reverse' coloring option above might get me most of the way there.

Thanks!

Ciara,

Excellent! This is perfect. Thanks so much for taking a look into it.

The geck-o-meter indicator doesn't do anything for me, see file attached. Shouldn't it in this case be pointed upwardish?

Hmm, never mind, I get it now!

Hey it says above "The bullet graph contains a number of different components which are explained in our blog post on bullet graphs" but I can't find any other blog posts about them I want to see more details about the components. I assume there is only 3 colours available to display?

Hi, I am trying to get geck-o-meter to display correctly, the issue i am having is the widget never displays the min figure but always sets it to the item value. The item value will always be lower than the min as we are using the geck-o-meter to rather display an average. I am assuming the widget is detecting that the "item" value is lower than the "min" value and rather using that ?

If that is the case are there any recommendations of widget would be better suited to displaying averages ?

The XML i am using is 

I also have a future feature request, We use the funnel graph quite a bit and regularly have multiple variations of the same funnel graph. I.E a leader board of the top 10 scores, then broken down into several locations. At the moment i have to create 6 or so funnel graphs for roughly the same thing it would be nice if you could add similar functionality to the graphs like you do for the text widgets that allow you to scroll / select "sub widgets" this would drasitcally help reduce the overall size of some of our dashboards :)

Hi Ciara, 

Basically i have a  requirement to show a percentage i.e 69% with the two figures user to achieve that percentage

EG:  Total Questions = 22325 Total correct = 14729 gives us a 65% figure, We thought using a Geck-o-meter would allow us to display these three figures but the geck-o-meter uses the 65 as the lowest number instead of the supplied 14729. 

So were trying to work out which other widget would suite our needs, I did look at the number widget but that automatically creates the percentage and hides the higher number which is not what we were trying to achieve.  Any thoughts ?

Thank you for the original response, 

Regards 

Jarratt

Hello,

I am trying to use custom Highcharts in my Geckoboard dashboard, and for the most part things work well.  I'm looking into Highcharts ability to load data dynamically, and so have added an "events" parameter in the chart options object that's returned to Geckoboard.  Unfortunately, Geckoboard seems to be parsing the "events" object oddly, and thus mangling the Highcharts configuration object.

Is there a known way to get Geckoboard to respect/use Highcharts' event capabilities?

Thanks!

Bennett

Is there a JSON api for using bullets?

Is it possible to add a theme to a highcharts custom widget?

Such as at http://www.highcharts.com/demo/column-stacked/gray

The white background of the graph really ruins the whole appearance of the geckoboard.  I'm able to make the graph work, but I don't see how to integrate the style.

Ciara, thanks for that info.  It doesn't seem to work though, but I changed the none to '#333333' and it worked pretty well.

Is it going to be possible to do any other sizes such as a 4x4 or 2x6?  We use some large charts.....

I'm trying to get highcharts working on Geckoboard and am running into some problems. Basically, I can't get a simple line chart to appear even though it seems to work with Highcharts directly. On my geckoboard it shows up as a blank widget. My config is below, but in general what tools do you use to debug highcharts on geckoboard and what debug process do you use?

{
    "chart": {
        "renderTo": "container"
    },
    "xAxis": {
        "type": "datetime"
    },
    "series": [{
        "name": "ydlTransactionsByDate"
    },
    {
        "data": [[1300172400000, "2"], [1300258800000, "2"], [1300345200000, "7"], [1300431600000, "3"], [1300604400000, "2"], [1300690800000, "10"], [1300777200000, "3"], [1300863600000, "1"], [1300950000000, "3"], [1301036400000, "2"], [1301122800000, "1"], [1301209200000, "8"], [1301295600000, "7"], [1301382000000, "1"], [1301468400000, "1"], [1301641200000, "7"], [1302418800000, "1"], [1302505200000, "4"], [1302591600000, "1"], [1302678000000, "3"], [1302850800000, "5"], [1302937200000, "4"], [1303023600000, "4"], [1303196400000, "4"], [1301727600000, "4"], [1303282800000, "3"], [1303369200000, "4"], [1303455600000, "3"], [1303542000000, "3"], [1303628400000, "1"], [1303714800000, "7"], [1303801200000, "3"], [1303887600000, "3"], [1303974000000, "3"], [1304060400000, "5"], [1301814000000, "3"], [1304146800000, "2"], [1301900400000, "2"], [1301986800000, "1"], [1302073200000, "3"], [1302159600000, "3"], [1302246000000, "7"], [1302332400000, "1"], [1304233200000, "1"], [1305010800000, "5"], [1305097200000, "7"], [1305183600000, "6"], [1305270000000, "9"], [1305356400000, "5"], [1305442800000, "1"], [1305529200000, "10"], [1305615600000, "5"], [1305702000000, "9"], [1305788400000, "1"], [1304319600000, "6"], [1305874800000, "5"], [1306047600000, "4"], [1306134000000, "7"], [1306220400000, "12"], [1306306800000, "7"], [1306393200000, "5"], [1306479600000, "9"], [1306566000000, "6"], [1306652400000, "3"], [1304406000000, "3"], [1306738800000, "14"], [1306825200000, "10"], [1304492400000, "8"], [1304578800000, "4"], [1304665200000, "5"], [1304838000000, "3"], [1306911600000, "5"], [1307689200000, "5"], [1307862000000, "4"], [1307948400000, "6"], [1308034800000, "3"], [1308121200000, "1"], [1308207600000, "2"], [1308294000000, "2"], [1308380400000, "4"], [1306998000000, "4"], [1307084400000, "8"], [1307170800000, "2"], [1307257200000, "1"], [1307343600000, "9"], [1307430000000, "13"], [1307516400000, "5"], [1307602800000, "9"]]
    }]
}

There is not  JSON example for the Funnel Chart.  Here is one :)

{"item": [ {"value": 87809 ,"label": '"Step1"},
         {"value": 70022 ,"label": '"Step2"},
{"value": 63232 ,"label": '"Step3"},
{"value": 53232 ,"label": '"Step4"},
{"value": 32123 ,"label": '"Step5"},
{"value": 23232 ,"label": '"Step6"},
{"value": 12232 ,"label": '"Step7"},
{"value": 2323 ,"label": '"Step8"}
]}

When I'm working on the charts I will debug it by running it outside of Geckoboard, just in HTML.  Then once I have everything the way I want it, I copy the middle portion and put it into a new file for integration with Geckoboard.  It isn't clean or pretty, but it works pretty well.  This way you can quickly do the change, refresh, test, type workflow and use tools such as firebug to better debug where there are problems initially.

Hi Paul,

It seems that the Highcharts widget is broken on Geckoboard. My Firebug says, that a closing curly bracket character is missing in the javascript that loads the widget.

A snippet from the returned request body:

var chart100690 = null;\n    $(document).ready(function() {\n        chart100690 = new Highcharts.Chart({\"legen\":{\"enabled\":false},\"title\":{\"text\":\"Title\"},\"series\":[{\"name\":\"Series name\",\"data\":[100.0,100.0,0.0,0.0,0.0,0.0,0.0,100.0,80.0,100.0,0.0,0.0,75.0,100.0,100.0,0.0,100.0,0.0,0.0,100.0,80.0,100.0,100.0,100.0,0.0,100.0,83.3,0.0,66.7,0.0],\"type\":\"line\"}],\"yAxis\":{\"max\":1,\"min\":0},\"xAxis\":{\"categories\":[\"22 Jun\",\"23 Jun\",\"24 Jun\",\"25 Jun\",\"26 Jun\",\"27 Jun\",\"28 Jun\",\"29 Jun\",\"30 Jun\",\"01 Jul\",\"02 Jul\",\"03 Jul\",\"04 Jul\",\"05 Jul\",\"06 Jul\",\"07 Jul\",\"08 Jul\",\"09 Jul\",\"10 Jul\",\"11 Jul\",\"12 Jul\",\"13 Jul\",\"14 Jul\",\"15 Jul\",\"16 Jul\",\"17 Jul\",\"18 Jul\",\"19 Jul\",\"20 Jul\",\"21 Jul\"],\"labels\":{\"y\":30,\"rotation\":90}},\"chart\":{ height: 398, width: 440, renderTo: 'w-highchart-100690');\n    });\n

The last option "chart" isn't closed and that causes widget to not load correctly.

Paul, sorry to chime in with a similar issue, but..... pasted below is the code I'm trying, which works fine in jsFiddle, but when I plug it into Geckoboard, it won't display - oddly enough, it displays only one single point in time, with y-axis values equivalent to the *average* of the values for each series below.  Any thoughts?  I'm slowly (but surely) going insane trying to debug it.

Thanks!

{
    	chart: {
        	renderTo: 'container',
        	defaultSeriesType: 'line',
        	marginRight: 0,
        	marginBottom: 20,
        	plotBackgroundColor: 'none',
        	backgroundColor: 'none',
        	plotShadow: false
    	},
    	title: {
        	text: null
    	},
    	legend: {
        	enabled: true
    	},
    	xAxis: {
        	type: 'datetime',
        	gridLineColor: '#282828',
        	gridLineWidth: 1,
        	tickColor: '#444',
        	lineWidth: 0,
        	tickPixelInterval: 70
    	},
    	yAxis: {
        	title: {
            	text: null
        	},
        	gridLineColor: '#282828',
        	gridLineWidth: 1,
        	lineWidth: 0,
        	tickWidth: 1,
       	 	tickColor: '#444',
        	tickPixelInterval: 20,
        	startOnTick: false,
        	endOnTick: false
    	},
    	colors: ['#44FF44', '#FF5500'],
    	credits: {
        	enabled: false
    	},
    	plotOptions: {
        	line: {
        	    marker: {
        	        enabled: false
        	    }
        	}
    	},
    	series: [{
        	name: 'ABC',
        	data: [0.46,0.58,0.61,0.40,0.56,0.55,0.49,0.46,0.44,0.56,0.72,0.53],
        	pointStart: Date.UTC(2011, 4, 1),
        	pointInterval: 24 * 3600 * 3000},{
        	name: 'DEF',
			data: [0.54,0.28,0.78,0.28,0.39,0.16,0.22,0.38,0.35,0.48,0.07,0.74],
        	pointStart: Date.UTC(2011, 4, 1),
        	pointInterval: 24 * 3600 * 3000}]
}

Nope, that looks correct..... argh.  Perhaps some sort of transmission issue on my end.  I'll keep digging.  Thanks for the quick reply!

Joe

If I were to use a line chart..is there any way I can include two lines to compare in the same widget? For example If I wanted to compare 2010 and 2011 data?

Is there any plans/timeline to be able to make these widgets larger?  For example on a HDTV screen I would like to be able to have 1 complex chart fill the entire screen for some period of time and then rotate to another dashboard.  Is this possible?

Hello all,

It has been a pleasure working with geckoboard custom charts, but I must ask:

Is there a way to increase the font size through JSON (or XML for that matter)?

For example, I would like to make the units of a line chart larger and easier to see.

I'm sorry to complain again, but I'm having more problems with Geck-O-Meter here.  I tried setting this up as per the instructions above, and it somewhat works, I get the arrow on the curved meter.  However the actual number and the min max numbers do not show up, and there is no coloring.

Any ideas?

I'm having difficulty rendering a Highchart on my Geckoboard, here's the feed:

{"chart":{"renderTo":"container","defaultSeriesType":"column"},"title":{"text":"Stacked column chart"},"xAxis":["aarpasi","ngawr","moweb"],"yAxis":{"min":0,"title":{"text":"Issue Priorities"},"stackLabels":{"enabled":true,"style":{"fontWeight":"bold","color":"gray"}}},"legend":{"align":"right","x":-100,"verticalAlign":"top","y":20,"floating":true,"backgroundColor":"white","borderColor":"#CCC","borderWidth":1,"shadow":false},"tooltip":{},"plotOptions":{"column":{"stacking":"normal","dataLabels":{"enabled":true,"color":"white"}}},"series":[{"name":"Trivial","data":[19,0,0]},{"name":"Minor","data":[11,0,1]},{"name":"Major","data":[17,46,40]},{"name":"Critical","data":[13,1,5]},{"name":"Blocker","data":[1,0,2]}]}

I'm wondering if there is a format issue or if this chart can be rendered in this small of a space?

Thanks,

-Gage

Trying to get HighCharts to work - this works fine in JSFiddle but will not work as a widget in Gecko Boards:

        chart: {

            renderTo: 'container',

            defaultSeriesType: 'line'

        },

        title: {

            text: 'Engineering P1 Defects',

            x: -20 //center

        },

        xAxis: {

            title: { text: 'Sprint' },

            categories: ['29', '30', '31', '32', '33', '34',

            '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48']

        },

        yAxis: {

            title: {

                text: 'Defects'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            formatter: function () {

                return '<b>' + this.series.name + '</b><br/>' +

               this.x + ': ' + this.y;

            }

        },

        series: [{

            name: 'Defects',

            data: [4, 6, 3, 2, 1, 2, 3, 3, 0, 1, 4, 1, 0, 5, 2, 7, 1, 0, 1, 1]

        }]

Here's an easier repro to illustrate the problem I'm having.  I created two HighCharts widgets.  One points at the file you reference above here:  http://dl.dropbox.com/u/512939/GB/hc20110725.txt

The other points at the exact same file located in my own public Dropbox folder here: http://dl.dropbox.com/u/8819296/Dashboard/test.txt

Yours renders fine, mine doesn't render (no errors either).

I'm puzzled about something in the geck-o-meter. Is it unable to cope with negative numbers? Using a minimum of -365, a maximum of 177 and a value of -188, I expected the needle to be about a third of the way up but it's right at the bottom on the left of the meter.

If geck-o-meter doesn't support negative numbers, is this something which could be added?

See above. This may be a bug in geck-o-meter. If the minimum is negative and the maximum is positive, then any positive value puts the needle in the correct place but a negative value or 0 always puts the needle to the extreme left.

It seems like you can no longer color pie charts anymore, it just uses the default yellow colors, here is the json I'm passing:

Would anyone be so kind as to provide a php based example here. I'm having a hard time generating an array structure that works.