API Token

Obtain an API token to allow you to embed your own custom meteogram in your web page (like this) or on your phone's home screen (via a suitable widget like this).

Just customise the meteogram using the options editor on this page, using the live preview to guide you, and grab the resulting link to use in your own application.

The Starter Plan has a super-simple pay-as-you-go pricing structure:

  • only £0.001 per API call
  • 500 free API calls per month
  • seven-day free trial

Click on the following button to subscribe to the Starter Plan and obtain a token for immediate use. Payment information is required even if you do not expect to use more than the free quota.

If you already have an existing API plan, then clicking above and entering your details again will retrieve and display your existing token; you will not be charged for a second token.

Live Preview

The preview above will auto-update as each option is changed. Bear in mind that the preview is resized to fit into the container, so it will not be the actual size you requested. Use the direct URL to see the full-size meteogram, and also use that as a basis for your own use in other contexts!

Save Settings

Click on the following button to save your settings for future use.

Meteogram Options Editor

All available options are presented below (click on the arrow icon to expand). As you make changes, this will be reflected in the preview meteogram.

If you require an API token, see the separate panel on this page to obtain one. The demo API token only works for the default location.

Click here to open this page with a few settings changed from their default values, as an example of just how cutomisable the meteogram is... almost any design is achievable!

Generated Options

These options can, for example, be copied and pasted into the "custom options" field at meteograms.com to use the design there.

Encoded Options

The encoded version of the options can be used directly in a URL without causing problems.

Raw Options

You can also make changes to the options here by editing the values in the editor below and then clicking

Editor Options

Validation

This will update whenever the form changes to show validation errors if there are any.

Schema

You can change the schema by pasting a new version below and then clicking

Code

// Set default options
JSONEditor.defaults.options.theme = 'bootstrap2';

// Initialize the editor
var editor = new JSONEditor(document.getElementById('editor_holder'),{
  schema: {
      type: 'object',
      properties: {
          name: { 'type': 'string' }
      }
  }
});

// Set the value
editor.setValue({
    name: 'John Smith'
});

// Get the value
var data = editor.getValue();
console.log(data.name); // 'John Smith'

// Validate
var errors = editor.validate();
if(errors.length) {
  // Not valid
}

// Listen for changes
editor.on('change',  function() {
  // Do something...
});