vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

New Examples

master
John Kiernander 2013-05-30 01:52:46 +01:00
parent 30b7fbd806
commit fdebe7652a
3 changed files with 106 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/advanced_lollipop_with_hover.html
View File

@ -14,15 +14,15 @@
var popup = null;
// Position the main chart
myChart.setBounds(60, 30, 490, 290);
myChart.setBounds(60, 30, 500, 300);
// Add the main chart axes
myChart.addCategoryAxis("x", "Brand");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addMeasureAxis("z", "Sales Value");
// Draw bubbles by SKU
var s = myChart.addSeries("SKU", dimple.plot.bubble);
// Draw bubbles by SKU colored by brand
var s = myChart.addSeries(["SKU", "Brand"], dimple.plot.bubble);
// Handle the hover event - overriding the default behaviour
s.addEventHandler("mouseover", onHover);
@ -45,8 +45,12 @@
// Set the size and position of the popup
var width = 150,
height = 100,
x = (cx + r + width + 10 < svg.attr("width") ? cx + r + 10 : cx - r - width - 20);
y = (cy - height / 2 < 0 ? 15 : cy - height / 2);
x = (cx + r + width + 10 < svg.attr("width") ?
cx + r + 10 :
cx - r - width - 20);
y = (cy - height / 2 < 0 ?
15 :
cy - height / 2);
// Fade the popup fill mixing the shape fill with 80% white
var popupFillColor = d3.rgb(
@ -76,7 +80,7 @@
.append("text")
.attr("x", x + 10)
.attr("y", y + 10)
.text(e.seriesValue)
.text(e.seriesValue[0])
.style("font-family", "sans-serif")
.style("font-size", 10)
.style("fill", stroke);

71
examples/advanced_pong.html Normal file
View File

@ -0,0 +1,71 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
{ "F":0, "Seg":"G", "BarX":"L", "BarY":60, "BubX":16, "BubY":70 },
{ "F":0, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":0, "Seg":"G", "BarX":"R", "BarY":30, "BubX":0, "BubY":0 },
{ "F":0, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
{ "F":1, "Seg":"G", "BarX":"L", "BarY":40, "BubX":44, "BubY":70 },
{ "F":1, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":1, "Seg":"G", "BarX":"R", "BarY":60, "BubX":0, "BubY":0 },
{ "F":1, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
{ "F":2, "Seg":"G", "BarX":"L", "BarY":60, "BubX":16, "BubY":70 },
{ "F":2, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":2, "Seg":"G", "BarX":"R", "BarY":10, "BubX":0, "BubY":0 },
{ "F":2, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
{ "F":3, "Seg":"G", "BarX":"L", "BarY":30, "BubX":44, "BubY":10 },
{ "F":3, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":3, "Seg":"G", "BarX":"R", "BarY":0, "BubX":0, "BubY":0 },
{ "F":3, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
{ "F":4, "Seg":"G", "BarX":"L", "BarY":0, "BubX":16, "BubY":10 },
{ "F":4, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":4, "Seg":"G", "BarX":"R", "BarY":30, "BubX":0, "BubY":0 },
{ "F":4, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
{ "F":5, "Seg":"G", "BarX":"L", "BarY":30, "BubX":44, "BubY":50 },
{ "F":5, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
{ "F":5, "Seg":"G", "BarX":"R", "BarY":40, "BubX":0, "BubY":0 },
{ "F":5, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 }
];
// Create the chart
var myChart = new dimple.chart(svg, data);
myChart.setBounds(20, 20, 550, 300)
myChart.assignColor("G", "#FFF", "#FFF", 0);
myChart.assignColor("P", "#888", "#888", 1);
myChart.assignColor("Ball", "#888", "#888", 1);
var barX = myChart.addCategoryAxis("x", "BarX");
barX.hidden = true;
var barY = myChart.addMeasureAxis("y", "BarY");
barY.overrideMax = 100;
barY.hidden = true;
var bubX = myChart.addMeasureAxis("x", "BubX");
bubX.overrideMax = 60;
bubX.hidden = true;
var bubY = myChart.addMeasureAxis("y", "BubY");
bubY.overrideMax = 100;
bubY.hidden = true;
var paddles = myChart.addSeries("Seg", dimple.plot.bar, [barX, barY]);
paddles.barGap = 0.99;
var ball = myChart.addSeries("Ball", dimple.plot.bubble, [bubX, bubY]);
// Animate the chart for every date value, any dimension can be passed
// here and dimple will animate over its values.
var sb = myChart.setStoryboard("F");
sb.frameDuration = 600;
myChart.draw();
sb.storyLabel.remove();
</script>
</div>

30
examples/advanced_price_range_lollipop.html
View File

@ -4,18 +4,38 @@
<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-12");
// Filter the data for a single channel
data = dimple.filterData(data, "Channel", "Hypermarkets");
// Create the chart
var myChart = new dimple.chart(svg, data);
myChart.setBounds(40, 30, 420, 320)
myChart.setBounds(60, 30, 500, 300)
// Add an x and 2 y-axes. When using multiple axes it's
// important to assign them to variables to pass to the series
var x = myChart.addCategoryAxis("x", "Brand");
var y1 = myChart.addMeasureAxis("y", "Price");
var y2 = myChart.addMeasureAxis("y", "Sales Value");
// Color the sales bars to be highly transparent
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
// Add the bars mapped to the second y axis
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
myChart.addSeries("Min", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.min;
myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.avg;
myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
// Add series for minimum, average and maximum price
var min = myChart.addSeries("Min", dimple.plot.bubble, [x, y1]);
min.aggregate = dimple.aggregateMethod.min;
var avg = myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]);
avg.aggregate = dimple.aggregateMethod.avg;
var max = myChart.addSeries("Max", dimple.plot.bubble, [x, y1]);
max.aggregate = dimple.aggregateMethod.max;
// Animate the chart for every date value, any dimension can be passed
// here and dimple will animate over its values.
myChart.setStoryboard("Date");
myChart.draw();
});
</script>