Instantly share code, notes, and snippets.

@PatMartin /.block
Last active Aug 13, 2017

Embed
What would you like to do?
Bar Chart 3D
license: mit

ECharts Bar Chart/Line Chart/Scatter Plot 3D

This is a dex.js visual based upon the impressive ECharts-GL project which provides a configurable and filterable 3D bar chart, scatter plot and line chart.

The chart expects data of the form:

x:any, y:any, z:numeric [,z2:numeric, ...]

and will visualize the data across the x,y,z axis in the form of a bar chart, line chart or scatter plot depending on configuration options.

The configuration menu offers the following main sections:

  • Configuration
    • Data Filters - Allows the user to control the data which will be visualized as well as their order.
    • GUI Configuration - Controls the appearance of the visualization.
      • General Options - Controls general appearance such as colormap, chart type, shading, etc...
        • Add a title
        • Grid - adds a grid
        • Tooltip - Controls tooltips
      • Item Style - Controls the appearance of items such as bars or scatter points.
      • Label Style - Controls label appearance
      • Axis - Controls axis appearance.

References

<!DOCTYPE html>
<html>
<head>
<style>
html, body, #Chart {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
#Chart {
display: inline-block;
}
</style>
<title>dex.js : ECharts Line Chart</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.js"></script>
<script src="https://dexjs.net/js/echarts-gl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
</head>
<body>
<div class="ui-layout-center">
<div id="Chart"></div>
</div>
<div class="ui-layout-west">
<div id="ConfigurationPane"></div>
</div>
<script>
var csv = new dex.csv(['Name', 'Month', 'Sales', 'Revenue'],[]);
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
for (var nameIndex = 0; nameIndex < 5; nameIndex++) {
var name = faker.name.firstName();
months.forEach(function (month) {
csv.data.push([name, month, faker.random.number(), faker.random.number() ]);
});
}
$(document).ready(function () {
$('body').layout({
applyDemoStyles: false,
west: {
size: 360
},
onresize: function () {
chart.resize();
}
});
var chart = dex.charts.echarts.BarChart3D({
'parent': '#Chart',
'csv': csv
}
);
chart.render();
var configPane = dex.ui.ConfigurationPane({
"parent": "#ConfigurationPane",
"csv": csv,
"components": [chart]
}).render();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment