mirror of https://github.com/vitalif/dimple
50 lines
2.1 KiB
HTML
50 lines
2.1 KiB
HTML
|
<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>
|