You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.2 KiB
101 lines
2.2 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Dimple.js - horizontal step
|
||
|
|
*
|
||
|
|
* Demo of a single step chart. Data stored in .tsv file format
|
||
|
|
*
|
||
|
|
* Version: 1.0
|
||
|
|
* Latest update: August 1, 2015
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
// Construct chart
|
||
|
|
var svg = dimple.newSvg("#dimple-step-horizontal-single", "100%", 500);
|
||
|
|
|
||
|
|
|
||
|
|
// Chart setup
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
d3.tsv("assets/demo_data/dimple/demo_data.tsv", function (data) {
|
||
|
|
|
||
|
|
// Filter data
|
||
|
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||
|
|
|
||
|
|
|
||
|
|
// Create chart
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Define chart
|
||
|
|
var myChart = new dimple.chart(svg, data);
|
||
|
|
|
||
|
|
// Set bounds
|
||
|
|
myChart.setBounds(0, 0, "100%", "100%")
|
||
|
|
|
||
|
|
// Set margins
|
||
|
|
myChart.setMargins(55, 10, 10, 45);
|
||
|
|
|
||
|
|
|
||
|
|
// Create axes
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Horizontal
|
||
|
|
var x = myChart.addCategoryAxis("x", "Month");
|
||
|
|
x.addOrderRule("Date");
|
||
|
|
|
||
|
|
// Vertical
|
||
|
|
var y = myChart.addMeasureAxis("y", "Unit Sales");
|
||
|
|
|
||
|
|
|
||
|
|
// Construct layout
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Add line
|
||
|
|
var s = myChart
|
||
|
|
.addSeries(null, dimple.plot.line)
|
||
|
|
.interpolation = "step";
|
||
|
|
|
||
|
|
|
||
|
|
// Add styles
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Font size
|
||
|
|
x.fontSize = "12";
|
||
|
|
y.fontSize = "12";
|
||
|
|
|
||
|
|
// Font family
|
||
|
|
x.fontFamily = "Roboto";
|
||
|
|
y.fontFamily = "Roboto";
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Draw chart
|
||
|
|
//
|
||
|
|
|
||
|
|
// Draw
|
||
|
|
myChart.draw();
|
||
|
|
|
||
|
|
// Remove axis titles
|
||
|
|
x.titleShape.remove();
|
||
|
|
|
||
|
|
|
||
|
|
// Resize chart
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Add a method to draw the chart on resize of the window
|
||
|
|
$(window).on('resize', resize);
|
||
|
|
$('.sidebar-control').on('click', resize);
|
||
|
|
|
||
|
|
// Resize function
|
||
|
|
function resize() {
|
||
|
|
|
||
|
|
// Redraw chart
|
||
|
|
myChart.draw(0, true);
|
||
|
|
|
||
|
|
// Remove axis titles
|
||
|
|
x.titleShape.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|