mirror of https://github.com/vitalif/dimple
Version 2.0
parent
b36930f336
commit
6ecc5c9f95
|
@ -0,0 +1,22 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Brand");
|
||||||
|
var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
mySeries.getTooltipText = function (e) {
|
||||||
|
return [
|
||||||
|
"Hey you hovered over " + e.aggField[0] + "!",
|
||||||
|
"Each element in the array becomes a new line."
|
||||||
|
];
|
||||||
|
};
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,47 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// This is the simple vertical grouped stacked 100% bar example
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(65, 45, 505, 315)
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
// Using the afterDraw callback means this code still works with animated
|
||||||
|
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
|
||||||
|
// also be used to clear the text from the previous frame)
|
||||||
|
s.afterDraw = function (shape, data) {
|
||||||
|
// Get the shape as a d3 selection
|
||||||
|
var s = d3.select(shape),
|
||||||
|
rect = {
|
||||||
|
x: parseFloat(s.attr("x")),
|
||||||
|
y: parseFloat(s.attr("y")),
|
||||||
|
width: parseFloat(s.attr("width")),
|
||||||
|
height: parseFloat(s.attr("height"))
|
||||||
|
};
|
||||||
|
// Only label bars where the text can fit
|
||||||
|
if (rect.height >= 8) {
|
||||||
|
// Add a text label for the value
|
||||||
|
svg.append("text")
|
||||||
|
// Position in the centre of the shape (vertical position is
|
||||||
|
// manually set due to cross-browser problems with baseline)
|
||||||
|
.attr("x", rect.x + rect.width / 2)
|
||||||
|
.attr("y", rect.y + rect.height / 2 + 3.5)
|
||||||
|
// Centre align
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
.style("font-size", "10px")
|
||||||
|
.style("font-family", "sans-serif")
|
||||||
|
// Make it a little transparent to tone down the black
|
||||||
|
.style("opacity", 0.6)
|
||||||
|
// Format the number
|
||||||
|
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw(2000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,32 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Start off with a couple of rows of data
|
||||||
|
var data = [
|
||||||
|
{ "Date": Date.now(), "Value": 2000000 * Math.random() }
|
||||||
|
];
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
var myChart = new dimple.chart(svg, [].concat(data));
|
||||||
|
myChart.setBounds(60, 50, 480, 250)
|
||||||
|
x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
|
||||||
|
myChart.addMeasureAxis("y", "Value");
|
||||||
|
myChart.addSeries("Sales", dimple.plot.bar);
|
||||||
|
myChart.ease = "linear";
|
||||||
|
window.setInterval(function () {
|
||||||
|
// Let 60 bars accumulate and then start slicing them off the front
|
||||||
|
if (data.length > 60) { data = data.slice(1); }
|
||||||
|
// Keep a day's gap at each end of the axis
|
||||||
|
x.overrideMin = data[0]["Date"] - 86400000;
|
||||||
|
x.overrideMax = data[data.length - 1]["Date"] + 86400000;
|
||||||
|
data.push({
|
||||||
|
"Date": data[data.length - 1]["Date"] + 86400000,
|
||||||
|
"Value": 2000000 * Math.random() });
|
||||||
|
// Update the data, using a clone to maintain order
|
||||||
|
myChart.data = [].concat(data);
|
||||||
|
// Draw with an animation. Each bar will take 1 second to draw and a new
|
||||||
|
// one is added every 500ms so there will be a few animating at once
|
||||||
|
myChart.draw(1000);
|
||||||
|
}, 500);
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 50, 480, 280)
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.setStoryboard("Price Tier");
|
||||||
|
myChart.ease = "bounce"
|
||||||
|
myChart.staggerDraw = true;
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw(800);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 50, 480, 280);
|
||||||
|
var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
|
||||||
|
var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
|
||||||
|
monthAxis.addOrderRule("Date");
|
||||||
|
var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
|
||||||
|
var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar, [priceTierAxis, volumeAxis]);
|
||||||
|
myChart.addSeries("Owner", dimple.plot.area, [monthAxis, volumeAxis]);
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar, [packTypeAxis, volumeAxis]);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
priceTierAxis.title = null;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 50, 480, 280);
|
||||||
|
var monthAxis = myChart.addCategoryAxis("x", "Month");
|
||||||
|
monthAxis.addOrderRule("Date");
|
||||||
|
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
|
||||||
|
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
|
||||||
|
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
volumeAxis.title = "£";
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 50, 460, 280);
|
||||||
|
var monthAxis = myChart.addCategoryAxis("x", "Month");
|
||||||
|
monthAxis.addOrderRule("Date");
|
||||||
|
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
|
||||||
|
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
|
||||||
|
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,72 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id":"adhoc_bar_custom_tooltips",
|
||||||
|
"title":"Custom Tooltip",
|
||||||
|
"shortTitle":"Custom Tooltip",
|
||||||
|
"desc":"Hover over a segment to see a custom tooltip",
|
||||||
|
"prev":{
|
||||||
|
"name":"Release Notes",
|
||||||
|
"url":"https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"adhoc_bar_labels",
|
||||||
|
"title":"Bar Labels",
|
||||||
|
"shortTitle":"Bar Labels",
|
||||||
|
"desc":"This shows how the bar labels example can be done with a starting animation",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adhoc_bar_scroll",
|
||||||
|
"title": "Bar Scroll",
|
||||||
|
"shortTitle": "Bar Scroll",
|
||||||
|
"desc": "A linear transition example. Once the chart fills up it will begin to scroll sideways.",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adhoc_bounce_stagger",
|
||||||
|
"title": "Bounce Stagger",
|
||||||
|
"shortTitle": "Bounce Stagger",
|
||||||
|
"desc": "Dimple v2.0 supports far more robust transitions and flexibility, for example this is how to make bouncy bars in a couple of lines of code.",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adhoc_composite_axis_category",
|
||||||
|
"title": "Composite Categories",
|
||||||
|
"shortTitle": "Composite Categories",
|
||||||
|
"desc": "Example of 3 categories plotted on the same x axis",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adhoc_composite_axis_measure",
|
||||||
|
"title": "Composite Measures",
|
||||||
|
"shortTitle": "Composite Measures",
|
||||||
|
"desc": "Example of 2 measures plotted on the same y axis",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adhoc_dual_axis",
|
||||||
|
"title": "Dual Y Axis",
|
||||||
|
"shortTitle": "Dual Y Axis",
|
||||||
|
"desc": "Example of 2 measures plotted on different y axes",
|
||||||
|
"prev": {
|
||||||
|
"name": "Release Notes",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
|
@ -0,0 +1,156 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<title id="title"></title>
|
||||||
|
<script type="application/javascript" src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script type="application/javascript" src="/dist/dimple.v2.0.0.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="/stylesheets/styles.css">
|
||||||
|
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||||
|
<script type="application/javascript">
|
||||||
|
window.opener = null;
|
||||||
|
</script>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47450855-1', 'dimplejs.org');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<header>
|
||||||
|
<h2 id="heading"></h2>
|
||||||
|
<p>
|
||||||
|
<span id="desc"></span><br/>
|
||||||
|
<table style="width:100%">
|
||||||
|
<tr>
|
||||||
|
<td style="width:50%" align="left"><a style="text-align:left" id="prev"></a></td>
|
||||||
|
<td style="width:50%" align="right"><a style="text-align:right" id="next"></a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</p>
|
||||||
|
<h3>Libraries</h3>
|
||||||
|
<p>
|
||||||
|
<a href="/dist/dimple.v2.0.0.js">
|
||||||
|
Full Javascript Library With Comments
|
||||||
|
</a><br/>
|
||||||
|
<a href="/dist/dimple.v2.0.0.min.js">
|
||||||
|
Minified Javascript Library
|
||||||
|
</a><br/>
|
||||||
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
||||||
|
Zip File
|
||||||
|
</a><br/>
|
||||||
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">
|
||||||
|
Tar Ball
|
||||||
|
</a><br/>
|
||||||
|
</p>
|
||||||
|
<h3>Resources</h3>
|
||||||
|
<p>
|
||||||
|
<a href="/examples_index.html">
|
||||||
|
Examples
|
||||||
|
</a><br/>
|
||||||
|
<a href="/advanced_examples_index.html">
|
||||||
|
Advanced Examples
|
||||||
|
</a><br/>
|
||||||
|
<a href="https://github.com/PMSI-AlignAlytics/dimple">
|
||||||
|
View On GitHub
|
||||||
|
</a><br/>
|
||||||
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">
|
||||||
|
Full API Documentation
|
||||||
|
</a><br/>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div id="chartBox" style="height:410px" class="chartWindow">
|
||||||
|
<img src="/images/wait.gif" style="display: table; margin: 0 auto; margin-top: 75px;"></img>
|
||||||
|
</div>
|
||||||
|
<pre><code id="codeContainer">
|
||||||
|
<img src="/images/wait.gif" style="display: table; margin: 0 auto;"></img>
|
||||||
|
</code></pre>
|
||||||
|
<div id="disqus_thread"></div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
This is an open-source project by <br/>
|
||||||
|
<a href="http://www.align-alytics.com">
|
||||||
|
PMSI-AlignAlytics</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script src="/javascripts/scale.fix.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Get the query string as an object
|
||||||
|
function queryStringObj() {
|
||||||
|
var result = {}, keyValuePairs = location.search.slice(1).split('&');
|
||||||
|
keyValuePairs.forEach(function(keyValuePair) {
|
||||||
|
keyValuePair = keyValuePair.split('=');
|
||||||
|
result[keyValuePair[0]] = keyValuePair[1] || '';
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
// Load the page from the examples.json based on the query string
|
||||||
|
var id = queryStringObj().id;
|
||||||
|
// Prompt if no query string is passed. Mainly useful for debugging.
|
||||||
|
if (id == undefined) { id = window.prompt("Please enter an example id","bars_vertical"); }
|
||||||
|
$.getJSON("/adhoc_meta.json", function(data) {
|
||||||
|
data.forEach(function (spec, i) {
|
||||||
|
if (spec.id == id) {
|
||||||
|
// Set the text elements
|
||||||
|
$("#title").text(spec.title);
|
||||||
|
$("#heading").text(spec.title);
|
||||||
|
$("#desc").text(spec.desc);
|
||||||
|
// Set the code display
|
||||||
|
$.get("adhoc/" + spec.id + ".html", function (page) {
|
||||||
|
$("#codeContainer").text(
|
||||||
|
page.slice(page.indexOf("<div"))
|
||||||
|
.replace("src=\"/dist/dimple.v2.0.0.js\"", "src=\"http://dimplejs.org/dist/dimple.v2.0.0.min.js\"")
|
||||||
|
.replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
|
||||||
|
);
|
||||||
|
$("#chartBox").html(
|
||||||
|
page.slice(page.indexOf("<div"))
|
||||||
|
.replace("src=\"/dist/dimple.v2.0.0.js\"", "")
|
||||||
|
.replace("src=\"/lib/d3.v3.min.js\"", "")
|
||||||
|
);
|
||||||
|
});
|
||||||
|
// adhoc_bouncSet the previous links
|
||||||
|
if (data[i].prev) {
|
||||||
|
$("#prev").attr("href",data[i].prev.url);
|
||||||
|
$("#prev").text("< " + data[i].prev.name);
|
||||||
|
} else {
|
||||||
|
$("#prev").remove();
|
||||||
|
}
|
||||||
|
// Set the next links
|
||||||
|
if (data[i].next) {
|
||||||
|
$("#next").attr("href",data[i].next.url);
|
||||||
|
$("#next").text(data[i].next.name + " >");
|
||||||
|
} else {
|
||||||
|
$("#next").remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var disqus_shortname = 'dimplejs';
|
||||||
|
var disqus_identifier = id;
|
||||||
|
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||||
|
(function() {
|
||||||
|
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||||
|
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||||
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -39,10 +39,10 @@
|
||||||
</table>
|
</table>
|
||||||
<h3>Libraries</h3>
|
<h3>Libraries</h3>
|
||||||
<p>
|
<p>
|
||||||
<a href="/dist/dimple.v1.1.5.js">
|
<a href="/dist/dimple.v2.0.0.js">
|
||||||
Full Javascript Library With Comments
|
Full Javascript Library With Comments
|
||||||
</a><br/>
|
</a><br/>
|
||||||
<a href="/dist/dimple.v1.1.5.min.js">
|
<a href="/dist/dimple.v2.0.0.min.js">
|
||||||
Minified Javascript Library
|
Minified Javascript Library
|
||||||
</a><br/>
|
</a><br/>
|
||||||
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
||||||
|
|
|
@ -83,12 +83,6 @@
|
||||||
"shortTitle":"Responsive Size",
|
"shortTitle":"Responsive Size",
|
||||||
"desc":"Example of the new responsive sizing functionality, meaning charts no longer have to have a fixed pixel size. Click the button to open a resizeable chart."
|
"desc":"Example of the new responsive sizing functionality, meaning charts no longer have to have a fixed pixel size. Click the button to open a resizeable chart."
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id":"advanced_christmas_tree",
|
|
||||||
"title":"Seasons Greetings",
|
|
||||||
"shortTitle":"Seasons Greetings",
|
|
||||||
"desc":"While analysing festive cheer we found these surprising results..."
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id":"advanced_change_bubbles",
|
"id":"advanced_change_bubbles",
|
||||||
"title":"Ghost Bubbles",
|
"title":"Ghost Bubbles",
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
<title id="title"></title>
|
<title id="title"></title>
|
||||||
<script type="application/javascript" src="/lib/d3.v3.min.js"></script>
|
<script type="application/javascript" src="/lib/d3.v3.min.js"></script>
|
||||||
<script type="application/javascript" src="/dist/dimple.v1.1.5.min.js"></script>
|
<script type="application/javascript" src="/dist/dimple.v2.0.0.min.js"></script>
|
||||||
<link rel="stylesheet" href="/stylesheets/styles.css">
|
<link rel="stylesheet" href="/stylesheets/styles.css">
|
||||||
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
|
<link rel="stylesheet" href="/stylesheets/pygment_trac.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||||
|
@ -43,10 +43,10 @@
|
||||||
</p>
|
</p>
|
||||||
<h3>Libraries</h3>
|
<h3>Libraries</h3>
|
||||||
<p>
|
<p>
|
||||||
<a href="/dist/dimple.v1.1.5.js">
|
<a href="/dist/dimple.v2.0.0.js">
|
||||||
Full Javascript Library With Comments
|
Full Javascript Library With Comments
|
||||||
</a><br/>
|
</a><br/>
|
||||||
<a href="/dist/dimple.v1.1.5.min.js">
|
<a href="/dist/dimple.v2.0.0.min.js">
|
||||||
Minified Javascript Library
|
Minified Javascript Library
|
||||||
</a><br/>
|
</a><br/>
|
||||||
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
||||||
|
@ -115,12 +115,12 @@
|
||||||
$.get("examples/" + spec.id + ".html", function (page) {
|
$.get("examples/" + spec.id + ".html", function (page) {
|
||||||
$("#codeContainer").text(
|
$("#codeContainer").text(
|
||||||
page.slice(page.indexOf("<div"))
|
page.slice(page.indexOf("<div"))
|
||||||
.replace("src=\"/dist/dimple.v1.1.5.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"")
|
.replace("src=\"/dist/dimple.v2.0.0.js\"", "src=\"http://dimplejs.org/dist/dimple.v2.0.0.min.js\"")
|
||||||
.replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
|
.replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
|
||||||
);
|
);
|
||||||
$("#chartBox").html(
|
$("#chartBox").html(
|
||||||
page.slice(page.indexOf("<div"))
|
page.slice(page.indexOf("<div"))
|
||||||
.replace("src=\"/dist/dimple.v1.1.5.js\"", "")
|
.replace("src=\"/dist/dimple.v2.0.0.js\"", "")
|
||||||
.replace("src=\"/lib/d3.v3.min.js\"", "")
|
.replace("src=\"/lib/d3.v3.min.js\"", "")
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,63 +0,0 @@
|
||||||
Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
|
|
||||||
-10 09/12/2013 00:00 left trunk none none 0 0 0
|
|
||||||
10 09/12/2013 00:00 right trunk none none 0 0 0
|
|
||||||
-10 11/12/2013 02:00 left trunk none none 0 0 0
|
|
||||||
10 11/12/2013 02:00 right trunk none none 0 0 0
|
|
||||||
-100 11/12/2013 03:00 left none none 0 0 0
|
|
||||||
100 11/12/2013 03:00 right none none 0 0 0
|
|
||||||
-60 13/12/2013 00:00 left none none 0 0 0
|
|
||||||
60 13/12/2013 00:00 right none none 0 0 0
|
|
||||||
-90 13/12/2013 03:00 left none none 0 0 0
|
|
||||||
90 13/12/2013 03:00 right none none 0 0 0
|
|
||||||
-50 15/12/2013 00:00 left none none 0 0 0
|
|
||||||
50 15/12/2013 00:00 right none none 0 0 0
|
|
||||||
-80 15/12/2013 03:00 left none none 0 0 0
|
|
||||||
80 15/12/2013 03:00 right none none 0 0 0
|
|
||||||
-40 17/12/2013 00:00 left none none 0 0 0
|
|
||||||
40 17/12/2013 00:00 right none none 0 0 0
|
|
||||||
-70 17/12/2013 03:00 left none none 0 0 0
|
|
||||||
70 17/12/2013 03:00 right none none 0 0 0
|
|
||||||
-30 19/12/2013 00:00 left none none 0 0 0
|
|
||||||
30 19/12/2013 00:00 right none none 0 0 0
|
|
||||||
-60 19/12/2013 03:00 left none none 0 0 0
|
|
||||||
60 19/12/2013 03:00 right none none 0 0 0
|
|
||||||
-20 21/12/2013 00:00 left none none 0 0 0
|
|
||||||
20 21/12/2013 00:00 right none none 0 0 0
|
|
||||||
-50 21/12/2013 03:00 left none none 0 0 0
|
|
||||||
50 21/12/2013 03:00 right none none 0 0 0
|
|
||||||
-10 23/12/2013 00:00 left none none 0 0 0
|
|
||||||
10 23/12/2013 00:00 right none none 0 0 0
|
|
||||||
-40 23/12/2013 03:00 left none none 0 0 0
|
|
||||||
40 23/12/2013 03:00 right none none 0 0 0
|
|
||||||
0 25/12/2013 00:00 left none none 0 0 0
|
|
||||||
0 25/12/2013 00:00 right none none 0 0 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 3 none 38 42 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 3 none -50 0 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 4 none 30 90 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 4 none -45 50 0
|
|
||||||
0 24/12/2013 00:00 none tinsel 5 none 25 135 0
|
|
||||||
0 25/12/2013 00:00 none tinsel 5 none -40 100 0
|
|
||||||
0 18/12/2013 00:00 none none bauble 1 -100 -150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 1 75 -50 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 1 0 0 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 1 50 50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 1 -40 150 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 2 -100 -150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 2 -25 75 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 2 -70 5 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 2 40 -50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 2 -25 -125 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 3 40 150 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 3 5 120 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 3 20 50 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 3 -25 -50 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 3 100 -150 15
|
|
||||||
0 18/12/2013 00:00 none none bauble 4 40 -100 15
|
|
||||||
0 19/12/2013 00:00 none none bauble 4 -50 -75 14
|
|
||||||
0 20/12/2013 00:00 none none bauble 4 40 -10 15
|
|
||||||
0 21/12/2013 00:00 none none bauble 4 -10 45 13
|
|
||||||
0 22/12/2013 00:00 none none bauble 4 0 175 15
|
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// This is the simple vertical grouped stacked 100% bar example
|
// This is the simple vertical grouped stacked 100% bar example
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
@ -13,24 +13,26 @@
|
||||||
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
var y = myChart.addPctAxis("y", "Unit Sales");
|
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||||
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
myChart.addLegend(200, 10, 380, 20, "right");
|
// Using the afterDraw callback means this code still works with animated
|
||||||
myChart.draw();
|
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
|
||||||
// After drawing we can access the shapes and their associated data
|
// also be used to clear the text from the previous frame)
|
||||||
// to add labels.
|
s.afterDraw = function (shape, data) {
|
||||||
s.shapes.each(function(d) {
|
|
||||||
// Get the shape as a d3 selection
|
// Get the shape as a d3 selection
|
||||||
var shape = d3.select(this),
|
var s = d3.select(shape),
|
||||||
// Get the height and width from the scales
|
rect = {
|
||||||
height = myChart.y + myChart.height - y._scale(d.height);
|
x: parseFloat(s.attr("x")),
|
||||||
width = x._scale(d.width);
|
y: parseFloat(s.attr("y")),
|
||||||
|
width: parseFloat(s.attr("width")),
|
||||||
|
height: parseFloat(s.attr("height"))
|
||||||
|
};
|
||||||
// Only label bars where the text can fit
|
// Only label bars where the text can fit
|
||||||
if (height >= 8) {
|
if (rect.height >= 8) {
|
||||||
// Add a text label for the value
|
// Add a text label for the value
|
||||||
svg.append("text")
|
svg.append("text")
|
||||||
// Position in the centre of the shape (vertical position is
|
// Position in the centre of the shape (vertical position is
|
||||||
// manually set due to cross-browser problems with baseline)
|
// manually set due to cross-browser problems with baseline)
|
||||||
.attr("x", parseFloat(shape.attr("x")) + width / 2)
|
.attr("x", rect.x + rect.width / 2)
|
||||||
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
|
.attr("y", rect.y + rect.height / 2 + 3.5)
|
||||||
// Centre align
|
// Centre align
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.style("font-size", "10px")
|
.style("font-size", "10px")
|
||||||
|
@ -38,9 +40,11 @@
|
||||||
// Make it a little transparent to tone down the black
|
// Make it a little transparent to tone down the black
|
||||||
.style("opacity", 0.6)
|
.style("opacity", 0.6)
|
||||||
// Format the number
|
// Format the number
|
||||||
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
|
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
// Add a bullet chart to the svg
|
// Add a bullet chart to the svg
|
||||||
function addBullet(x, y, height, width, measure, lowMark,
|
function addBullet(x, y, height, width, measure, lowMark,
|
||||||
highMark, axisMax, compareField, keyVal,
|
highMark, compareField, keyVal,
|
||||||
compareVal, color) {
|
compareVal, color) {
|
||||||
|
|
||||||
// This is a custom algorithm to lighten the passed color, I find I can't
|
// This is a custom algorithm to lighten the passed color, I find I can't
|
||||||
|
@ -62,22 +62,12 @@
|
||||||
var bX = bullet.addMeasureAxis("x", "Value");
|
var bX = bullet.addMeasureAxis("x", "Value");
|
||||||
|
|
||||||
// Add a separate x axis for each measure, this is required
|
// Add a separate x axis for each measure, this is required
|
||||||
// where we want to do a series for each measure
|
// where we want to do a series for each measure. By passing
|
||||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
// another axis in place of the position we combine them to create
|
||||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
// a 4 measure composite.
|
||||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||||
|
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||||
// Fix all max values so that a single x axis will read correctly
|
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||||
// for all 4. Without this all axes would scale differently
|
|
||||||
bX.overrideMax = axisMax;
|
|
||||||
lX.overrideMax = axisMax;
|
|
||||||
hX.overrideMax = axisMax;
|
|
||||||
cX.overrideMax = axisMax;
|
|
||||||
|
|
||||||
// Hide the additional axes
|
|
||||||
lX.hidden = true;
|
|
||||||
hX.hidden = true;
|
|
||||||
cX.hidden = true;
|
|
||||||
|
|
||||||
// Add a series for the marks first (the order defines)
|
// Add a series for the marks first (the order defines)
|
||||||
// document z position - first at back, last on top
|
// document z position - first at back, last on top
|
||||||
|
@ -88,7 +78,11 @@
|
||||||
// Add the main series - keyVal is for color and tooltip
|
// Add the main series - keyVal is for color and tooltip
|
||||||
var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
|
var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
|
||||||
// Add the comparison series - compareVal is for color and tooltip
|
// Add the comparison series - compareVal is for color and tooltip
|
||||||
var m = bullet.addSeries(compareVal, dimple.plot.bubble, [bY, cX]);
|
var m = bullet.addSeries(compareVal, dimple.plot.bar, [bY, cX]);
|
||||||
|
|
||||||
|
// Configure the markers as floating bars
|
||||||
|
m.stacked = false;
|
||||||
|
cX.floatingBarWidth = 2;
|
||||||
|
|
||||||
// Set the gaps for the bar series with a narrow main series and full
|
// Set the gaps for the bar series with a narrow main series and full
|
||||||
// width for the markers
|
// width for the markers
|
||||||
|
@ -119,17 +113,17 @@
|
||||||
// means to determine axis bounds would be better but I don't want to
|
// means to determine axis bounds would be better but I don't want to
|
||||||
// bloat this example.
|
// bloat this example.
|
||||||
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
||||||
3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
||||||
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
||||||
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
||||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
@ -73,8 +73,8 @@
|
||||||
// Reduce all opacity and remove once opacity drops below 5%
|
// Reduce all opacity and remove once opacity drops below 5%
|
||||||
d3.selectAll(".historic")
|
d3.selectAll(".historic")
|
||||||
.each(function () {
|
.each(function () {
|
||||||
var shape = d3.select(this);
|
var shape = d3.select(this),
|
||||||
var opacity = shape.style("opacity") - 0.02;
|
opacity = shape.style("opacity") - 0.02;
|
||||||
if (opacity < 0.1) {
|
if (opacity < 0.1) {
|
||||||
shape.remove();
|
shape.remove();
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,74 +0,0 @@
|
||||||
<!----------------------------------------------------------------->
|
|
||||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
|
||||||
<!----------------------------------------------------------------->
|
|
||||||
<div id="chartContainer">
|
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
|
||||||
|
|
||||||
// Unlike other dimple charts this relies on some special Christmas
|
|
||||||
// data collated from Santa's Naughty:Nice data store
|
|
||||||
d3.tsv("/data/christmas_data.tsv", function (data) {
|
|
||||||
|
|
||||||
// Create the chart as usual
|
|
||||||
var chart = new dimple.chart(svg, data);
|
|
||||||
chart.setMargins(80, 50, 60, 40);
|
|
||||||
|
|
||||||
// Add a measure axis on x for Festivity
|
|
||||||
var festivity = chart.addMeasureAxis("x", "Festivity");
|
|
||||||
festivity.overrideMin = -200;
|
|
||||||
festivity.overrideMax = 200;
|
|
||||||
|
|
||||||
// Add a secondary x axis for Good Cheer
|
|
||||||
var cheer = chart.addMeasureAxis("x", "Cheer");
|
|
||||||
cheer.overrideMin = -200;
|
|
||||||
cheer.overrideMax = 200;
|
|
||||||
|
|
||||||
// We need to view these metrics against the Countdown to Christmas,
|
|
||||||
// this is visualised with the dimple time axis
|
|
||||||
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
|
|
||||||
|
|
||||||
// Add a final Y axis for sparkle
|
|
||||||
var sparkle = chart.addMeasureAxis("y", "Sparkle");
|
|
||||||
sparkle.overrideMin = -200;
|
|
||||||
sparkle.overrideMax = 200;
|
|
||||||
|
|
||||||
// Bauble size will be based on Magic (everyone knows that)
|
|
||||||
var magic = chart.addMeasureAxis("z", "Magic");
|
|
||||||
magic.overrideMax = 100;
|
|
||||||
|
|
||||||
// Add the three series for this visualisation
|
|
||||||
// First, a vertical area chart plotting festivity through December
|
|
||||||
// (I knew I'd find an application for that chart type eventually!)
|
|
||||||
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
|
|
||||||
|
|
||||||
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
|
|
||||||
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
|
|
||||||
tinsel.lineWeight = 5;
|
|
||||||
|
|
||||||
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
|
|
||||||
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
|
|
||||||
|
|
||||||
// Map colors to different series values
|
|
||||||
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
|
|
||||||
chart.assignColor("left", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("right", "Green", "DarkGreen");
|
|
||||||
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
|
|
||||||
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 2", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("tinsel 4", "Red", "Red", 1);
|
|
||||||
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 1", "Gold", "Gold", 1);
|
|
||||||
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
|
|
||||||
chart.assignColor("bauble 3", "Red", "Crimson", 1);
|
|
||||||
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
|
|
||||||
|
|
||||||
// Sprinkle the magic dust
|
|
||||||
chart.draw();
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
@ -74,7 +74,7 @@
|
||||||
// Position the chart inside the shape
|
// Position the chart inside the shape
|
||||||
subChart.setBounds(
|
subChart.setBounds(
|
||||||
parseFloat(shape.attr("x")),
|
parseFloat(shape.attr("x")),
|
||||||
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
|
parseFloat(shape.attr("y")),
|
||||||
parseFloat(shape.attr("width")),
|
parseFloat(shape.attr("width")),
|
||||||
parseFloat(shape.attr("height")));
|
parseFloat(shape.attr("height")));
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
var data = [
|
var data = [
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,11 +3,11 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer" style="height: 100%">
|
<div id="chartContainer" style="height: 100%">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// In version 1.1.0 it's possible to initialise any size parameter with a
|
// In version 1.1.0 it's possible to initialise any size parameter with a
|
||||||
// % value as well as pixels
|
// % value as well as pixels
|
||||||
var svg = dimple.newSvg("#chartContainer", "100%", "98%");
|
var svg = dimple.newSvg("#chartContainer", "100%", "100%");
|
||||||
|
|
||||||
// Decide whether to draw the button or the graph
|
// Decide whether to draw the button or the graph
|
||||||
if (window.opener !== null && window.opener !== undefined) {
|
if (window.opener !== null && window.opener !== undefined) {
|
||||||
|
@ -17,14 +17,15 @@
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
myChart = new dimple.chart(svg, data);
|
myChart = new dimple.chart(svg, data);
|
||||||
|
|
||||||
// Use the new set margins method to set partially fixed and
|
// Fix the margins
|
||||||
// partially proportional to the svg
|
myChart.setMargins("60px", "30px", "110px", "70px");
|
||||||
myChart.setMargins("10%", "30px", "40px", "15%");
|
|
||||||
|
|
||||||
// Continue to set up a standard chart
|
// Continue to set up a standard chart
|
||||||
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
|
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
|
||||||
myChart.addMeasureAxis("y", "Unit Sales");
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
myChart.addSeries("Channel", dimple.plot.bar);
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
// Set the legend using negative values to set the co-ordinate from the right
|
||||||
|
myChart.addLegend("-100px", "30px", "100px", "-70px");
|
||||||
myChart.draw();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
// Add a method to draw the chart on resize of the window
|
// Add a method to draw the chart on resize of the window
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// This code should support any data in this structure changing the data here
|
// This code should support any data in this structure changing the data here
|
||||||
|
@ -109,7 +109,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Remove the padding elements entirely
|
// Remove the padding elements entirely
|
||||||
svg.selectAll(".pad").remove();
|
svg.selectAll(".dimple-pad").remove();
|
||||||
|
|
||||||
// Change the measure name and the category names for the tooltips
|
// Change the measure name and the category names for the tooltips
|
||||||
s.y.measure = yLabel;
|
s.y.measure = yLabel;
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330)
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
x.addGroupOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(70, 30, 340, 330);
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
x.addGroupOrderRule("Date");
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 350, 330)
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
x.addGroupOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(65, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 485, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(90, 30, 470, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
y.addGroupOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(90, 30, 320, 330);
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
y.addGroupOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(90, 30, 320, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
y.addGroupOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 485, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 485, 330);
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.lineWeight = 1;
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
s.interpolation = "cardinal";
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(50, 40, 500, 310)
|
||||||
|
var x = myChart.addMeasureAxis("x", "Distribution");
|
||||||
|
var y = myChart.addMeasureAxis("y", "Price");
|
||||||
|
var s = myChart.addSeries(["SKU", "Price Tier"], dimple.plot.area);
|
||||||
|
s.aggregate = dimple.aggregateMethod.avg;
|
||||||
|
s.lineMarkers = true;
|
||||||
|
myChart.addLegend(30, 10, 500, 35, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
var x = myChart.addCategoryAxis("x", "Month");
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
x.addOrderRule("Date");
|
x.addOrderRule("Date");
|
||||||
myChart.addMeasureAxis("y", "Unit Sales");
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
myChart.addSeries("Channel", dimple.plot.area);
|
var s = myChart.addSeries("Channel", dimple.plot.area);
|
||||||
myChart.addLegend(60, 10, 500, 20, "right");
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
myChart.draw();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Month", "Dec-11");
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 510, 305)
|
||||||
|
myChart.addMeasureAxis("x", "Price Monthly Change");
|
||||||
|
myChart.addMeasureAxis("y", "Distribution Monthly Change");
|
||||||
|
var s = myChart.addSeries(["SKU", "Channel"], dimple.plot.bar);
|
||||||
|
s.stacked = false;
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 480, 315);
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
s.stacked = false;
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 510, 305)
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
s.stacked = false;
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Channel", dimple.plot.line);
|
||||||
|
s.interpolation = "cardinal";
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(50, 55, 500, 310)
|
||||||
|
var x = myChart.addMeasureAxis("x", "Distribution");
|
||||||
|
x.overrideMin = 20;
|
||||||
|
var y = myChart.addMeasureAxis("y", "Price");
|
||||||
|
y.overrideMin = 50
|
||||||
|
var s = myChart.addSeries(["Month", "Owner"], dimple.plot.line);
|
||||||
|
s.addOrderRule("Date");
|
||||||
|
s.aggregate = dimple.aggregateMethod.avg;
|
||||||
|
myChart.addLegend(130, 10, 400, 35, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.5.js"></script>
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 505, 305);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Month");
|
||||||
|
x.addOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.line);
|
||||||
|
s.interpolation = "step";
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330);
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
x.addGroupOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.line);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||||
|
<!----------------------------------------------------------------->
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 430, 330);
|
||||||
|
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
x.addGroupOrderRule("Date");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(["Brand"], dimple.plot.line);
|
||||||
|
s.interpolation = "step";
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(510, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue