stormpython/example.html

## example.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      body {
        font: 10px sans-serif;
      }

      div#visualize {
        position: relative;
        width: 700px;
        height: 500px;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <div id="visualize"></div>
    <!-- Install Phoenix: npm install phx -->
    <script src="node_modules/phoenix/build/phoenix.js"></script>
    <script>
      // Setting up DOM Element
      var el = document.getElementById("visualize");

      // Global options for all charts
      var options = {
        type: "series", // Chart type - `series` by default (used for time series charts)
        accessor: function (d) { return d.data; }, // Method for accessing the chart data from the chart object - `data` is the default accessor
        layout: "grid", // Visualization layout - options include `rows, columns, and grid`
        margin: {top: 20, right: 50, bottom: 50, left: 50}, // margins around each chart
        x: function (d) { return d.x }, // pulls out x value, can pass a function or a string, e.g. `x`; `x` - default
        y: function (d) { return d.y }, // pulls out y value, can pass a function or a string, e.g. `y`; `y` - default
        z: function (d) { return d.z }, // pulls out z value for second axis, can pass a function or a string, e.g. `z`; `z` - default
        xScale: {
          scale: "time.utc", // defaults to a time scale; can pass it a d3 scale function or string
          domain: null, // Array of the min and max values, e.g. [0, 240] - calculates min and max of data by default
          clamp: false, // Specifies whether to clamp values to the scale - false by default
          nice: false // Specified whether to round the min and max values for the scale - false by default
        },
        yScale: {
          scale: "linear", // defaults to linear scale
          domain: null,
          clamp: false,
          nice: true
        },
        zScale: {
          scale: "linear",
          domain: null,
          clamp: false,
          nice: true
        },
        xAxis: {
          show: true, // whether to show axis, true by default
          gridlines: false, // whether to show gridlines, false by default,
          class: "x axis", // DOM class for g element
          transform: null, // specifies how to transform the x axis - this is done for you
          tick: {
            number: 10, // number of ticks, 10 by default
            values: null, // specifies the tick values,
            size: 6, // size of tick marks
            innerTickSize: 6, // size of inner tick marks
            outerTickSize: 6, // size of outer tick marks
            padding: 3, // padding around tick marks
            format: null, // specifies how to format tick values, can pass a function, null by default
          },
          tickText: {
            anchor: "middle", // tick text-anchor option
            x: 0, // x position
            y: 9, // y position
            dx: "", // dx position
            dy: ".71em", // dy position
          },
          rotateLabels: {
            allow: true, // whether to allow automatic rotation of labels
            truncateLength: 10, // length at which to truncate tick text
            text: { // Options to transform text
              transform: "rotate(-45)"
              x: 0,
              y: 6,
              dx: "",
              dy: ".71em",
              anchor: "end"
            }
          },
          title: {
            class: "axis title",
            anchor: "middle",
            x: 6,
            y: 6,
            dx: "",
            dy: ".71em",
            anchor: "end",
            transform: "translate(0,0)",
            text: ""
          }
        },
        yAxis: {
          // Same as above
        },
        zAxis: {
          // Same as above
        },
        line: [{ // Line options
          scale: "y", // axis the line is associated with - `y` is the default
          interpolate: "basis", // smoothed line between points
          tension: 0.7, // tension of line between points - 0.7 is the default
          defined: function (d) { return d.y !== null; }, // option to break line on null or NaN values
          properties: {
            class: "line", // DOM class of path element - used to set style with CSS
            fill: "none", // option to fill the line, can be passed a hex color or a function to set the color - `none` by default
            stroke: #0000FF, // color of line, can be set using a function
            strokeWidth: 3, // stroke-width of line - 3 by default
            opacity: 1 // opacity of line - 1 by default
          }
        }],
        area: [{
          scale: "y",
          offset: "zero", // specifies how to offset the stack - options: `zero`, `overlap`, `wiggle`, `silhouette`, `expand`
          interpolate: "basis",
          tension: 0.7,
          defined: function (d) { return d.y !== null; },
          properties: {
            class: "area", // DOM class of path element - used to set style with CSS
            fill: function (d, i) { return d3.scale.category10()(i); }, // option to fill the line, can be passed a hex color or a function to set the color
            stroke: function (d, i) { return d3.scale.category10()(i); }, // color of line, can be set using a function
            strokeWidth: 0, // stroke-width of line - 3 by default
            opacity: 1 // opacity of line - 1 by default
          }
        }],
        bar: [{
          interval: "1m", // time interval between data points - "1m" by default, specify with number + 1 letter string for time abbreviation
          padding: 0.1, // padding between bars
          group: false, // specifies whether to group bars - false stacks bars
          groupPadding: 0, // padding between grouped bars
          rx: 0, // rounded x corners
          ry: 0, // rounded y corners
          properties: {
            class: "point",
            fill: function (d, i) { return d3.scale.category10()(i); }, // can pass it a color function
            stroke: function (d, i) { return d3.scale.category10()(i); }, // can pass it a color function
            strokeWidth: 0,
            opacity: 1
          }
        }],
        points: [{
          scale: "y",
          radius: 5, // specifies point radius, can pass it a number or function
          properties: {
            class: "point",
            fill: function (d, i) { return d3.scale.category10()(i); },
            stroke: function (d, i) { return d3.scale.category10()(i); },
            strokeWidth: 0,
            opacity: 1
          }
        }]
      };

      // Data
      // With phoenix, data consists of an array of chart objects.
      // Each chart object
      var charts = [ chart1, chart2, chart3, chart4, chart5, chart6 ];
      /*
       * chart1 : {
       *  options: {...}, // can specify options that overide global options
       *  data: [ // Array of data points
       *     [ {x: 1411761450000, y: 91, label: "200"}, {..}, {..} ],
       *     [ {x: 1411761450000, y: 12, label: "404"}, {..}, {..} ],
       *     [ {x: 1411761450000, y: 1, label: "503"}, {..}, {..} ],
       *  ]
       * }
       */

      // Instantiate chart with Phx and pass it options and data
      var lineChart = new Phx(el)
        .options(options)
        .data(charts);

      lineChart.draw(); // Draw chart(s)
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	body {
	font: 10px sans-serif;
	}

	div#visualize {
	position: relative;
	width: 700px;
	height: 500px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>
	</head>
	<body>
	<div id="visualize"></div>
	<!-- Install Phoenix: npm install phx -->
	<script src="node_modules/phoenix/build/phoenix.js"></script>
	<script>
	// Setting up DOM Element
	var el = document.getElementById("visualize");

	// Global options for all charts
	var options = {
	type: "series", // Chart type - `series` by default (used for time series charts)
	accessor: function (d) { return d.data; }, // Method for accessing the chart data from the chart object - `data` is the default accessor
	layout: "grid", // Visualization layout - options include `rows, columns, and grid`
	margin: {top: 20, right: 50, bottom: 50, left: 50}, // margins around each chart
	x: function (d) { return d.x }, // pulls out x value, can pass a function or a string, e.g. `x`; `x` - default
	y: function (d) { return d.y }, // pulls out y value, can pass a function or a string, e.g. `y`; `y` - default
	z: function (d) { return d.z }, // pulls out z value for second axis, can pass a function or a string, e.g. `z`; `z` - default
	xScale: {
	scale: "time.utc", // defaults to a time scale; can pass it a d3 scale function or string
	domain: null, // Array of the min and max values, e.g. [0, 240] - calculates min and max of data by default
	clamp: false, // Specifies whether to clamp values to the scale - false by default
	nice: false // Specified whether to round the min and max values for the scale - false by default
	},
	yScale: {
	scale: "linear", // defaults to linear scale
	domain: null,
	clamp: false,
	nice: true
	},
	zScale: {
	scale: "linear",
	domain: null,
	clamp: false,
	nice: true
	},
	xAxis: {
	show: true, // whether to show axis, true by default
	gridlines: false, // whether to show gridlines, false by default,
	class: "x axis", // DOM class for g element
	transform: null, // specifies how to transform the x axis - this is done for you
	tick: {
	number: 10, // number of ticks, 10 by default
	values: null, // specifies the tick values,
	size: 6, // size of tick marks
	innerTickSize: 6, // size of inner tick marks
	outerTickSize: 6, // size of outer tick marks
	padding: 3, // padding around tick marks
	format: null, // specifies how to format tick values, can pass a function, null by default
	},
	tickText: {
	anchor: "middle", // tick text-anchor option
	x: 0, // x position
	y: 9, // y position
	dx: "", // dx position
	dy: ".71em", // dy position
	},
	rotateLabels: {
	allow: true, // whether to allow automatic rotation of labels
	truncateLength: 10, // length at which to truncate tick text
	text: { // Options to transform text
	transform: "rotate(-45)"
	x: 0,
	y: 6,
	dx: "",
	dy: ".71em",
	anchor: "end"
	}
	},
	title: {
	class: "axis title",
	anchor: "middle",
	x: 6,
	y: 6,
	dx: "",
	dy: ".71em",
	anchor: "end",
	transform: "translate(0,0)",
	text: ""
	}
	},
	yAxis: {
	// Same as above
	},
	zAxis: {
	// Same as above
	},
	line: [{ // Line options
	scale: "y", // axis the line is associated with - `y` is the default
	interpolate: "basis", // smoothed line between points
	tension: 0.7, // tension of line between points - 0.7 is the default
	defined: function (d) { return d.y !== null; }, // option to break line on null or NaN values
	properties: {
	class: "line", // DOM class of path element - used to set style with CSS
	fill: "none", // option to fill the line, can be passed a hex color or a function to set the color - `none` by default
	stroke: #0000FF, // color of line, can be set using a function
	strokeWidth: 3, // stroke-width of line - 3 by default
	opacity: 1 // opacity of line - 1 by default
	}
	}],
	area: [{
	scale: "y",
	offset: "zero", // specifies how to offset the stack - options: `zero`, `overlap`, `wiggle`, `silhouette`, `expand`
	interpolate: "basis",
	tension: 0.7,
	defined: function (d) { return d.y !== null; },
	properties: {
	class: "area", // DOM class of path element - used to set style with CSS
	fill: function (d, i) { return d3.scale.category10()(i); }, // option to fill the line, can be passed a hex color or a function to set the color
	stroke: function (d, i) { return d3.scale.category10()(i); }, // color of line, can be set using a function
	strokeWidth: 0, // stroke-width of line - 3 by default
	opacity: 1 // opacity of line - 1 by default
	}
	}],
	bar: [{
	interval: "1m", // time interval between data points - "1m" by default, specify with number + 1 letter string for time abbreviation
	padding: 0.1, // padding between bars
	group: false, // specifies whether to group bars - false stacks bars
	groupPadding: 0, // padding between grouped bars
	rx: 0, // rounded x corners
	ry: 0, // rounded y corners
	properties: {
	class: "point",
	fill: function (d, i) { return d3.scale.category10()(i); }, // can pass it a color function
	stroke: function (d, i) { return d3.scale.category10()(i); }, // can pass it a color function
	strokeWidth: 0,
	opacity: 1
	}
	}],
	points: [{
	scale: "y",
	radius: 5, // specifies point radius, can pass it a number or function
	properties: {
	class: "point",
	fill: function (d, i) { return d3.scale.category10()(i); },
	stroke: function (d, i) { return d3.scale.category10()(i); },
	strokeWidth: 0,
	opacity: 1
	}
	}]
	};

	// Data
	// With phoenix, data consists of an array of chart objects.
	// Each chart object
	var charts = [ chart1, chart2, chart3, chart4, chart5, chart6 ];
	/*
	* chart1 : {
	* options: {...}, // can specify options that overide global options
	* data: [ // Array of data points
	* [ {x: 1411761450000, y: 91, label: "200"}, {..}, {..} ],
	* [ {x: 1411761450000, y: 12, label: "404"}, {..}, {..} ],
	* [ {x: 1411761450000, y: 1, label: "503"}, {..}, {..} ],
	* ]
	* }
	*/

	// Instantiate chart with Phx and pass it options and data
	var lineChart = new Phx(el)
	.options(options)
	.data(charts);

	lineChart.draw(); // Draw chart(s)
	</script>
	</body>
	</html>