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

Added New Responsive Size Demo

master
John Kiernander 2013-09-13 01:53:58 +01:00
parent d812bdff30
commit aaa6ff19ab
2 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
examples/advanced_responsive_sizing.html Normal file
View File

@ -0,0 +1,53 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<!-- This button is just used for this example to open a resizable window to see chart code in action -->
<button id="showPopup"
onclick="window.open('/examples/advanced_responsive_sizing.html')"
style="position:relative; margin: -20px -50px; width:100px; top:50%; left:50%;">
Click Here To Open Sizable Chart
</button>
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.0.js"></script>
<script type="text/javascript">
// This code is specific to this examples page, I'm just hiding the button and drawing the chart if this
// same code is opened in a popup.
if (document.URL.toString().indexOf("/examples/advanced_responsive_sizing.html") !== -1) {
d3.select("#showPopup").remove();
// Actual example code starts here
var myChart;
// 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", "95%", "95%");
// Get data as usual
d3.tsv("/data/example_data.tsv", function (data) {
// Create a standard bar chart to show off the code
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", "10px", "15%");
// Continue to set up a standard chart
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.bar);
myChart.draw();
});
// Add a method to draw the chart on resize of the window
window.onresize = function () {
// As of 1.1.0 the second parameter here allows you to draw without reprocessing
// data. This saves a lot on performance when you know the data is static.
myChart.draw(0, true);
};
}
</script>
</div>

50
examples/templates/advanced_responsive_sizing.html Normal file
View File

@ -0,0 +1,50 @@
<div id="chartContainer">
<!-- This button is just used for this example to open a resizable window to see chart code in action -->
<button id="showPopup"
onclick="window.open('/examples/advanced_responsive_sizing.html')"
style="position:relative; margin: -20px -50px; width:100px; top:50%; left:50%;">
Click Here To Open Sizable Chart
</button>
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
// This code is specific to this examples page, I'm just hiding the button and drawing the chart if this
// same code is opened in a popup.
if (document.URL.toString().indexOf("/examples/advanced_responsive_sizing.html") !== -1) {
d3.select("#showPopup").remove();
// Actual example code starts here
var myChart;
// 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", "95%", "95%");
// Get data as usual
d3.tsv("/data/example_data.tsv", function (data) {
// Create a standard bar chart to show off the code
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", "10px", "15%");
// Continue to set up a standard chart
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.bar);
myChart.draw();
});
// Add a method to draw the chart on resize of the window
window.onresize = function () {
// As of 1.1.0 the second parameter here allows you to draw without reprocessing
// data. This saves a lot on performance when you know the data is static.
myChart.draw(0, true);
};
}
</script>
</div>