mirror of https://github.com/vitalif/dimple
Version 2.0
johnkiernander
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>
|
||||
<h3>Libraries</h3>
|
||||
<p>
|
||||
<a href="/dist/dimple.v1.1.5.js">
|
||||
<a href="/dist/dimple.v2.0.0.js">
|
||||
Full Javascript Library With Comments
|
||||
</a><br/>
|
||||
<a href="/dist/dimple.v1.1.5.min.js">
|
||||
<a href="/dist/dimple.v2.0.0.min.js">
|
||||
Minified Javascript Library
|
||||
</a><br/>
|
||||
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
||||
|
|
|
|||
|
|
@ -83,12 +83,6 @@
|
|||
"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."
|
||||
},
|
||||
{
|
||||
"id":"advanced_christmas_tree",
|
||||
"title":"Seasons Greetings",
|
||||
"shortTitle":"Seasons Greetings",
|
||||
"desc":"While analysing festive cheer we found these surprising results..."
|
||||
},
|
||||
{
|
||||
"id":"advanced_change_bubbles",
|
||||
"title":"Ghost Bubbles",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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.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/pygment_trac.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
</p>
|
||||
<h3>Libraries</h3>
|
||||
<p>
|
||||
<a href="/dist/dimple.v1.1.5.js">
|
||||
<a href="/dist/dimple.v2.0.0.js">
|
||||
Full Javascript Library With Comments
|
||||
</a><br/>
|
||||
<a href="/dist/dimple.v1.1.5.min.js">
|
||||
<a href="/dist/dimple.v2.0.0.min.js">
|
||||
Minified Javascript Library
|
||||
</a><br/>
|
||||
<a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
|
||||
|
|
@ -115,12 +115,12 @@
|
|||
$.get("examples/" + spec.id + ".html", function (page) {
|
||||
$("#codeContainer").text(
|
||||
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\"")
|
||||
);
|
||||
$("#chartBox").html(
|
||||
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\"", "")
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
@ -1726,4 +1726,4 @@ Date Month Channel Owner Brand Pack Size Pack Type SKU Price Tier Unit Sales Sal
|
|||
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87
|
||||
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1
|
||||
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66
|
||||
01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2
|
||||
01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2
|
||||
|
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">
|
||||
<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">
|
||||
// This is the simple vertical grouped stacked 100% bar example
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
|
@ -13,24 +13,26 @@
|
|||
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.draw();
|
||||
// After drawing we can access the shapes and their associated data
|
||||
// to add labels.
|
||||
s.shapes.each(function(d) {
|
||||
// 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 shape = d3.select(this),
|
||||
// Get the height and width from the scales
|
||||
height = myChart.y + myChart.height - y._scale(d.height);
|
||||
width = x._scale(d.width);
|
||||
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 (height >= 8) {
|
||||
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", parseFloat(shape.attr("x")) + width / 2)
|
||||
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
|
||||
.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")
|
||||
|
|
@ -38,9 +40,11 @@
|
|||
// Make it a little transparent to tone down the black
|
||||
.style("opacity", 0.6)
|
||||
// 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>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// Create the svg and set the dimensions
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
// Add a bullet chart to the svg
|
||||
function addBullet(x, y, height, width, measure, lowMark,
|
||||
highMark, axisMax, compareField, keyVal,
|
||||
highMark, compareField, keyVal,
|
||||
compareVal, color) {
|
||||
|
||||
// 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");
|
||||
|
||||
// Add a separate x axis for each measure, this is required
|
||||
// where we want to do a series for each measure
|
||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
||||
|
||||
// Fix all max values so that a single x axis will read correctly
|
||||
// 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;
|
||||
// where we want to do a series for each measure. By passing
|
||||
// another axis in place of the position we combine them to create
|
||||
// a 4 measure composite.
|
||||
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||
|
||||
// Add a series for the marks first (the order defines)
|
||||
// document z position - first at back, last on top
|
||||
|
|
@ -88,8 +78,12 @@
|
|||
// Add the main series - keyVal is for color and tooltip
|
||||
var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
|
||||
// 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
|
||||
// width for the markers
|
||||
hm.barGap = 0;
|
||||
|
|
@ -119,17 +113,17 @@
|
|||
// means to determine axis bounds would be better but I don't want to
|
||||
// bloat this example.
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,26 +3,26 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
||||
// Reduce the number of owners as this chart can get a bit busy
|
||||
data = dimple.filterData(data, "Owner", [
|
||||
"Stark Ind",
|
||||
"MomCorp",
|
||||
"Rekall",
|
||||
"Wayne Ent"]);
|
||||
// Reduce the number of owners as this chart can get a bit busy
|
||||
data = dimple.filterData(data, "Owner", [
|
||||
"Stark Ind",
|
||||
"MomCorp",
|
||||
"Rekall",
|
||||
"Wayne Ent"]);
|
||||
|
||||
var series,
|
||||
// Set a background and foreground chart
|
||||
charts = [
|
||||
new dimple.chart(svg, null),
|
||||
new dimple.chart(svg, data)
|
||||
],
|
||||
lastDate = null,
|
||||
owners = dimple.getUniqueValues(data, "Owner");
|
||||
var series,
|
||||
// Set a background and foreground chart
|
||||
charts = [
|
||||
new dimple.chart(svg, null),
|
||||
new dimple.chart(svg, data)
|
||||
],
|
||||
lastDate = null,
|
||||
owners = dimple.getUniqueValues(data, "Owner");
|
||||
|
||||
// Define 2 nearly identical charts. It's essential
|
||||
// for this that the max and minimum values are fixed
|
||||
|
|
@ -49,52 +49,52 @@
|
|||
charts[0].defaultColors[k].fill,
|
||||
"white",
|
||||
(i === 0 ? 0.3 : 1));
|
||||
}, this);
|
||||
}, this);
|
||||
}, this);
|
||||
|
||||
// Define a storyboard on the main chart, this will iterate
|
||||
// all dates and redraw for each, the callback will build the
|
||||
// the background chart
|
||||
charts[1].setStoryboard("Date", function (d) {
|
||||
// Use the last date variable to manage the previous tick's data
|
||||
if (lastDate !== null) {
|
||||
// Pull the previous data
|
||||
var lastData = dimple.filterData(data, "Date", lastDate);
|
||||
// Add a series to the background chart to display old position
|
||||
var lastSeries = charts[0].addSeries("Owner", dimple.plot.bubble);
|
||||
// Average suits these measures better
|
||||
lastSeries.aggregate = dimple.aggregateMethod.avg;
|
||||
// Give each series its own data at different periods
|
||||
lastSeries.data = lastData;
|
||||
// Draw the background chart
|
||||
charts[0].draw();
|
||||
// Class all shapes as .historic
|
||||
lastSeries.shapes.attr("class", "historic");
|
||||
// Reduce all opacity and remove once opacity drops below 5%
|
||||
d3.selectAll(".historic")
|
||||
.each(function () {
|
||||
var shape = d3.select(this);
|
||||
var opacity = shape.style("opacity") - 0.02;
|
||||
if (opacity < 0.1) {
|
||||
shape.remove();
|
||||
} else {
|
||||
shape.style("opacity", opacity);
|
||||
// Define a storyboard on the main chart, this will iterate
|
||||
// all dates and redraw for each, the callback will build the
|
||||
// the background chart
|
||||
charts[1].setStoryboard("Date", function (d) {
|
||||
// Use the last date variable to manage the previous tick's data
|
||||
if (lastDate !== null) {
|
||||
// Pull the previous data
|
||||
var lastData = dimple.filterData(data, "Date", lastDate);
|
||||
// Add a series to the background chart to display old position
|
||||
var lastSeries = charts[0].addSeries("Owner", dimple.plot.bubble);
|
||||
// Average suits these measures better
|
||||
lastSeries.aggregate = dimple.aggregateMethod.avg;
|
||||
// Give each series its own data at different periods
|
||||
lastSeries.data = lastData;
|
||||
// Draw the background chart
|
||||
charts[0].draw();
|
||||
// Class all shapes as .historic
|
||||
lastSeries.shapes.attr("class", "historic");
|
||||
// Reduce all opacity and remove once opacity drops below 5%
|
||||
d3.selectAll(".historic")
|
||||
.each(function () {
|
||||
var shape = d3.select(this),
|
||||
opacity = shape.style("opacity") - 0.02;
|
||||
if (opacity < 0.1) {
|
||||
shape.remove();
|
||||
} else {
|
||||
shape.style("opacity", opacity);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
lastDate = d;
|
||||
lastDate = d;
|
||||
});
|
||||
|
||||
// Add the primary series to the main chart
|
||||
series = charts[1].addSeries("Owner", dimple.plot.bubble)
|
||||
series.aggregate = dimple.aggregateMethod.avg;
|
||||
// Draw the main chart
|
||||
charts[1].draw();
|
||||
|
||||
// Add some border weight to the main series so it separates a bit from
|
||||
// the former period shadows
|
||||
d3.selectAll("circle").style("stroke-width", 2);
|
||||
|
||||
});
|
||||
|
||||
// Add the primary series to the main chart
|
||||
series = charts[1].addSeries("Owner", dimple.plot.bubble)
|
||||
series.aggregate = dimple.aggregateMethod.avg;
|
||||
// Draw the main chart
|
||||
charts[1].draw();
|
||||
|
||||
// Add some border weight to the main series so it separates a bit from
|
||||
// the former period shadows
|
||||
d3.selectAll("circle").style("stroke-width", 2);
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// Create the svg and set the dimensions
|
||||
|
|
@ -67,14 +67,14 @@
|
|||
|
||||
// Draw a new chart which will go in the current shape
|
||||
var subChart = new dimple.chart(svg, filteredData);
|
||||
|
||||
|
||||
// Get the shape from the main chart on which this chart is based
|
||||
var shape = d3.select(this);
|
||||
|
||||
// Position the chart inside the shape
|
||||
subChart.setBounds(
|
||||
parseFloat(shape.attr("x")),
|
||||
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
|
||||
parseFloat(shape.attr("y")),
|
||||
parseFloat(shape.attr("width")),
|
||||
parseFloat(shape.attr("height")));
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
var data = [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer" style="height: 100%">
|
||||
<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">
|
||||
// In version 1.1.0 it's possible to initialise any size parameter with a
|
||||
// % 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
|
||||
if (window.opener !== null && window.opener !== undefined) {
|
||||
|
|
@ -17,14 +17,15 @@
|
|||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
myChart = new dimple.chart(svg, data);
|
||||
|
||||
// Use the new set margins method to set partially fixed and
|
||||
// partially proportional to the svg
|
||||
myChart.setMargins("10%", "30px", "40px", "15%");
|
||||
// Fix the margins
|
||||
myChart.setMargins("60px", "30px", "110px", "70px");
|
||||
|
||||
// Continue to set up a standard chart
|
||||
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
|
||||
myChart.addMeasureAxis("y", "Unit Sales");
|
||||
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();
|
||||
});
|
||||
// Add a method to draw the chart on resize of the window
|
||||
|
|
@ -44,39 +45,39 @@
|
|||
var height = 60, width = 180, color = new dimple.color("#B3DE69");
|
||||
|
||||
svg.append("rect")
|
||||
.attr("x", dimple._parentWidth(svg.node()) / 2 - width / 2)
|
||||
.attr("y", dimple._parentHeight(svg.node()) / 2 - height / 2)
|
||||
.attr("rx", 15).attr("ry", 15)
|
||||
.attr("width", width).attr("height", height)
|
||||
.style("fill", color.fill).style("stroke", color.stroke);
|
||||
.attr("x", dimple._parentWidth(svg.node()) / 2 - width / 2)
|
||||
.attr("y", dimple._parentHeight(svg.node()) / 2 - height / 2)
|
||||
.attr("rx", 15).attr("ry", 15)
|
||||
.attr("width", width).attr("height", height)
|
||||
.style("fill", color.fill).style("stroke", color.stroke);
|
||||
|
||||
svg.selectAll("title_text")
|
||||
.data(["Click Here To", "To Open Resizable Popup"])
|
||||
.enter().append("text")
|
||||
.attr("x", dimple._parentWidth(svg.node()) / 2)
|
||||
.attr("y", function (d, i) {
|
||||
return dimple._parentHeight(svg.node()) / 2 - 5 + i * 18;
|
||||
})
|
||||
.style("text-anchor", "middle")
|
||||
.style("font-family", "sans-serif")
|
||||
.style("font-size", "12px").style("opacity", 0.7)
|
||||
.text(function (d) { return d; });
|
||||
.data(["Click Here To", "To Open Resizable Popup"])
|
||||
.enter().append("text")
|
||||
.attr("x", dimple._parentWidth(svg.node()) / 2)
|
||||
.attr("y", function (d, i) {
|
||||
return dimple._parentHeight(svg.node()) / 2 - 5 + i * 18;
|
||||
})
|
||||
.style("text-anchor", "middle")
|
||||
.style("font-family", "sans-serif")
|
||||
.style("font-size", "12px").style("opacity", 0.7)
|
||||
.text(function (d) { return d; });
|
||||
|
||||
svg.selectAll("text,rect")
|
||||
.on("mouseenter", function () {
|
||||
svg.selectAll("rect").style("fill", color.stroke)
|
||||
})
|
||||
.on("mouseleave", function () {
|
||||
svg.selectAll("rect").style("fill", color.fill)
|
||||
})
|
||||
.style("cursor", "pointer")
|
||||
.on("click", function () {
|
||||
var w = window.open(
|
||||
'/examples/advanced_responsive_sizing.html',
|
||||
'Resize Window To See Chart Resizing',
|
||||
'width=640px,height=480px,resizable=1,' +
|
||||
'toolbar=0,menubar=0,scrollbars=0');
|
||||
});
|
||||
.on("mouseenter", function () {
|
||||
svg.selectAll("rect").style("fill", color.stroke)
|
||||
})
|
||||
.on("mouseleave", function () {
|
||||
svg.selectAll("rect").style("fill", color.fill)
|
||||
})
|
||||
.style("cursor", "pointer")
|
||||
.on("click", function () {
|
||||
var w = window.open(
|
||||
'/examples/advanced_responsive_sizing.html',
|
||||
'Resize Window To See Chart Resizing',
|
||||
'width=640px,height=480px,resizable=1,' +
|
||||
'toolbar=0,menubar=0,scrollbars=0');
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// This code should support any data in this structure changing the data here
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
});
|
||||
|
||||
// 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
|
||||
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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
var x = myChart.addCategoryAxis("x", "Month");
|
||||
x.addOrderRule("Date");
|
||||
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.draw();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
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">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue