Skip to content

Instantly share code, notes, and snippets.

@stormpython

stormpython/example.html

Last active September 15, 2015 17:07
Show Gist options
  • Save stormpython/c57c54de878ad53bac9a to your computer and use it in GitHub Desktop.
Save stormpython/c57c54de878ad53bac9a to your computer and use it in GitHub Desktop.
Download ZIP
Creating a Line Chart with Phoenix
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment