PatMartin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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


dex.js - Website


## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>