JSFiddle - React, Tailwind, and code Playground

by dgrebb

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
	var peopleArray=[
	{
		"name":             	"Dan Grebb",
		"lastName": 		"Grebb",
		"title": 			"UI Developer",
		"location": 		"Philadelphia, PA",
		"age": 			"30",
		"tenure": 			"3 months",
		"data": 			"[1, 7]",
		"trainingTime": 		"3",
		"performance": 		"1"
	},
	{
		"name": 		    "Johasdfn Smith",
		"lastName": 		"Smith",
		"title": 			"Engineer",
		"location": 		"Harrisburgh, PA",
		"age": 			    "22",
		"tenure": 			"3 years",
		"data": [8,20],
		"trainingTime": 	"1",
		"performance": 		"5"
	},
	{
		"name": 		    "John Smitasdfasfh",
		"lastName": 		"Smith",
		"title": 			"Engineer",
		"location": 		"Harrisburgh, PA",
		"age": 			    "22",
		"tenure": 			"3 years",
		"data": [15,3],
		"trainingTime": 	"1",
		"performance": 		"5"
	},
	{
		"name": 		    "John Smith",
		"lastName": 		"Smith",
		"title": 			"Engineer",
		"location": 		"Harrisburgh, PA",
		"age": 			    "22",
		"tenure": 			"3 years",
		"data": [25,6],
		"trainingTime": 	"1",
		"performance": 		"5"
	},
	{
		"name": 		    "Tony Smith",
		"lastName": 		"Smith",
		"title": 			"Engineer",
		"location": 		"Harrisburgh, PA",
		"age": 			    "22",
		"tenure": 			"3 years",
		"data": [5,20],
		"trainingTime": 	"1",
		"performance": 		"5"
	}
	]

	function generateData(obj){
		var series=[];
		for (var index in obj) {
			if (!obj.hasOwnProperty(index)) {
				continue;
			}
			series.push({
				name: obj[index].name,
				data: obj[index].data
			});
		}
		return series;
	}

	series = [];
	series = generateData(peopleArray);

	console.log(series);

	if($('#sales-effectiveness-main').length){
		$('#sales-effectiveness-main').highcharts({

			chart: {
				type: 'scatter',
				height: 350
			},

			xAxis: {
				min: 0,
				max: 300,
				title: {
					text: 'Sales Per Labor Hour'
				},                
				labels: {
					format: '${value}'
				}
			},

			yAxis: {
				labels: {
					format: '${value}'
				},
				title: {
					text: 'Cost Per Labor Hour'
				},
				tickInterval: 5,
				min:...