chartwerk.scripts

Chartwerk scripts are the custom code that underlies every template in Chartwerk. They are completely customizable JS/CSS/HTML scripts and dependency files.

scripts.draw

Contains a single javascript function which must be named draw. This function is called by Chartwerk to render your chart whenever a user chooses or changes an option in the editor.

draw(){
  var werk = window.chartwerk;

  var svg = d3.select("#chart")
        .append("svg");

  // etc.
}

scripts.helper

You may create an object with methods to help draw your chart. This object can be useful for removing boilerplate code used to parse UI options, keeping your draw function cleaner and easier to work with.

The object will be accessible in the global scope.

var werkHelper = {

  parseAxes: function(werk){
    // Do a thing...
  },

  parseScales: function(werk){
    // Do another...
  },

  build: function(werk){
    parseAxes(werk);
    parseScales(werk);
    // ...
    return werk;
  }

}

scripts.style

CSS style rules. These are injected below any dependency stylesheets.

scripts.html

Any HTML elements specified here are appended to the element, div#chartwerk.

Important: Chartwerk expects certain elements will be present to inject data from the editor into, specifically text elements. These elements are selected by their id property. At minimum the following elements should be present, though they need not necessarily be structured this way:

<div id='chart-header'>
    <h2 id='headline'></h2>
    <div id='chatter'></div>
</div>
<div id='chart-legend'></div>
<div id='chart'></div>
<div id='chart-footer'>
    <div id='footnote'></div>
    <div id='source'></div>
    <div id='author'></div>
</div>

scripts.dependencies

An object containing arrays of URLs for scripts and stylesheets used as dependencies by a chart template.

Only valid URL references to .js and .css files are allowed. These are injected into the page in the order given.

{
  scripts: [
    'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  ],
  styles: [
    'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css'
  ]
}

results matching ""

    No results matching ""