<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
width: 100%;
height: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'rankflow',
title: {
text: 'Tech Rankings According to Stack Overflow Developers Survey and Payscale.com',
fontFamily: 'Tahoma',
fontSize: '17px'
},
options: {
colorType: 'palette',
palette: ['#40beeb', '#305f74', '#4492a8', '#8e8e8e', '#dddddd', '#83deff', '#086893', '#85bdcd']
},
plotarea: {
margin: '40 20 20 20'
},
scaleX: {
values: ['Trending on Stack Overflow', 'Salary'],
item: {
color: 'black',
fontFamily: 'Tahoma'
}
},
labels: [{
text: 'OVERALL RANK',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 96.96875,
x: '15px',
y: '40px'
},
{
text: 'Top Tech on Stack Overflow',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 60.96875,
x: '350px',
y: '40px'
},
{
text: 'Salary',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 60.96875,
x: '620px',
y: '40px'
},
{
id: 'rank_1_l',
text: 1,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '75px'
},
{
id: 'rank_1_r',
text: 1,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '75px'
},
{
id: 'rank_1_g',
text: 1,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '75px'
},
{
id: 'rank_2_l',
text: 2,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '96px'
},
{
id: 'rank_2_r',
text: 2,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '96px'
},
{
id: 'rank_2_g',
text: 2,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '96px'
},
{
id: 'rank_3_l',
text: 3,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '117px'
},
{
id: 'rank_3_r',
text: 3,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '117px'
},
{
id: 'rank_3_g',
text: 3,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '117px'
},
{
id: 'rank_4_l',
text: 4,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '138px'
},
{
id: 'rank_4_r',
text: 4,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '138px'
},
{
id: 'rank_4_g',
text: 4,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '138px'
},
{
id: 'rank_5_l',
text: 5,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '159px'
},
{
id: 'rank_5_r',
text: 5,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '159px'
},
{
id: 'rank_5_g',
text: 5,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '159px'
},
{
id: 'rank_6_l',
text: 6,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '180px'
},
{
id: 'rank_6_r',
text: 6,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '180px'
},
{
id: 'rank_6_g',
text: 6,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '180px'
},
{
id: 'rank_7_l',
text: 7,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '201px'
},
{
id: 'rank_7_r',
text: 7,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '201px'
},
{
id: 'rank_7_g',
text: 7,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '201px'
},
{
id: 'rank_8_l',
text: 8,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '222px'
},
{
id: 'rank_8_r',
text: 8,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '222px'
},
{
id: 'rank_8_g',
text: 8,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '222px'
},
{
id: 'box_overall_0',
text: 'Air West',
backgroundColor: '#40beeb',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '75px'
},
{
id: 'box_0_0',
text: 'Air West',
tooltip: {
text: 'Air West ranked on 3 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '117px'
},
{
id: 'box_0_1',
text: 'Air West',
tooltip: {
text: 'Air West ranked on 4 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '138px'
},
{
id: 'box_overall_1',
text: 'Braniff',
backgroundColor: '#305f74',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '96px'
},
{
id: 'box_1_0',
text: 'Braniff',
tooltip: {
text: 'Braniff ranked on 1 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '75px'
},
{
id: 'box_1_1',
text: 'Braniff',
tooltip: {
text: 'Braniff ranked on 1 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '75px'
},
{
id: 'box_overall_2',
text: 'Capital',
backgroundColor: '#4492a8',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '117px'
},
{
id: 'box_2_0',
text: 'Capital',
tooltip: {
text: 'Capital ranked on 6 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '180px'
},
{
id: 'box_2_1',
text: 'Capital',
tooltip: {
text: 'Capital ranked on 2 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '96px'
},
{
id: 'box_overall_3',
text: 'Eastern',
backgroundColor: '#8e8e8e',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '138px'
},
{
id: 'box_3_0',
text: 'Eastern',
tooltip: {
text: 'Eastern ranked on 8 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '222px'
},
{
id: 'box_3_1',
text: 'Eastern',
tooltip: {
text: 'Eastern ranked on 7 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '201px'
},
{
id: 'box_overall_4',
text: 'Galaxy',
backgroundColor: '#dddddd',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '159px'
},
{
id: 'box_4_0',
text: 'Galaxy',
tooltip: {
text: 'Galaxy ranked on 4 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '138px'
},
{
id: 'box_4_1',
text: 'Galaxy',
tooltip: {
text: 'Galaxy ranked on 5 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '159px'
},
{
id: 'box_overall_5',
text: 'PSA',
backgroundColor: '#83deff',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '180px'
},
{
id: 'box_5_0',
text: 'PSA',
tooltip: {
text: 'PSA ranked on 5 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '159px'
},
{
id: 'box_5_1',
text: 'PSA',
tooltip: {
text: 'PSA ranked on 3 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '117px'
},
{
id: 'box_overall_6',
text: 'Pan Am',
backgroundColor: '#086893',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '201px'
},
{
id: 'box_6_0',
text: 'Pan Am',
tooltip: {
text: 'Pan Am ranked on 2 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '96px'
},
{
id: 'box_6_1',
text: 'Pan Am',
tooltip: {
text: 'Pan Am ranked on 6 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '180px'
},
{
id: 'box_overall_7',
text: 'Sunbird',
backgroundColor: '#85bdcd',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '222px'
},
{
id: 'box_7_0',
text: 'Sunbird',
tooltip: {
text: 'Sunbird ranked on 7 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '201px'
},
{
id: 'box_7_1',
text: 'Sunbird',
tooltip: {
text: 'Sunbird ranked on 8 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '222px'
}
],
shapes: [{
type: 'poly',
id: 'flow_0',
text: 'Air West',
backgroundColor: '#40beeb',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 117],
[278.484375, 117],
[352.03125, 138],
[413, 138],
[413, 156],
[413, 156],
[352.03125, 156],
[278.484375, 135],
[217.515625, 135],
[217.515625, 117]
],
rank: 1,
ranks: [3, 4],
shadow: true
},
{
type: 'poly',
id: 'flow_1',
text: 'Braniff',
backgroundColor: '#305f74',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 75],
[278.484375, 75],
[352.03125, 75],
[413, 75],
[413, 93],
[413, 93],
[352.03125, 93],
[278.484375, 93],
[217.515625, 93],
[217.515625, 75]
],
rank: 2,
ranks: [1, 1],
shadow: true
},
{
type: 'poly',
id: 'flow_2',
text: 'Capital',
backgroundColor: '#4492a8',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 180],
[278.484375, 180],
[352.03125, 96],
[413, 96],
[413, 114],
[413, 114],
[352.03125, 114],
[278.484375, 198],
[217.515625, 198],
[217.515625, 180]
],
rank: 3,
ranks: [6, 2],
shadow: true
},
{
type: 'poly',
id: 'flow_3',
text: 'Eastern',
backgroundColor: '#8e8e8e',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 222],
[278.484375, 222],
[352.03125, 201],
[413, 201],
[413, 219],
[413, 219],
[352.03125, 219],
[278.484375, 240],
[217.515625, 240],
[217.515625, 222]
],
rank: 4,
ranks: [8, 7],
shadow: true
},
{
type: 'poly',
id: 'flow_4',
text: 'Galaxy',
backgroundColor: '#dddddd',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 138],
[278.484375, 138],
[352.03125, 159],
[413, 159],
[413, 177],
[413, 177],
[352.03125, 177],
[278.484375, 156],
[217.515625, 156],
[217.515625, 138]
],
rank: 5,
ranks: [4, 5],
shadow: true
},
{
type: 'poly',
id: 'flow_5',
text: 'PSA',
backgroundColor: '#83deff',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 159],
[278.484375, 159],
[352.03125, 117],
[413, 117],
[413, 135],
[413, 135],
[352.03125, 135],
[278.484375, 177],
[217.515625, 177],
[217.515625, 159]
],
rank: 6,
ranks: [5, 3],
shadow: true
},
{
type: 'poly',
id: 'flow_6',
text: 'Pan Am',
backgroundColor: '#086893',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 96],
[278.484375, 96],
[352.03125, 180],
[413, 180],
[413, 198],
[413, 198],
[352.03125, 198],
[278.484375, 114],
[217.515625, 114],
[217.515625, 96]
],
rank: 7,
ranks: [2, 6],
shadow: true
},
{
type: 'poly',
id: 'flow_7',
text: 'Sunbird',
backgroundColor: '#85bdcd',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 201],
[278.484375, 201],
[352.03125, 222],
[413, 222],
[413, 240],
[413, 240],
[352.03125, 240],
[278.484375, 219],
[217.515625, 219],
[217.515625, 201]
],
rank: 8,
ranks: [7, 8],
shadow: true
}
],
tooltip: {
borderRadius: '5px',
fontFamily: 'Tahoma',
fontSize: '10px'
},
series: [{
text: 'Java',
backgroundColor: '#40beeb',
palette: 0,
rank: 1,
ranks: [2, 2]
},
{
text: 'Javascipt',
backgroundColor: '#305f74',
palette: 1,
rank: 2,
ranks: [1, 3]
},
{
text: 'Python',
backgroundColor: '#8e8e8e',
palette: 3,
rank: 3,
ranks: [4, 1]
},
{
text: 'Android',
backgroundColor: '#4492a8',
palette: 2,
rank: 4,
ranks: [3, 6]
},
{
text: 'C#',
backgroundColor: '#dddddd',
palette: 4,
rank: 5,
ranks: [5, 7]
},
{
text: 'C++',
backgroundColor: '#85bdcd',
palette: 7,
rank: 6,
ranks: [8, 5]
},
{
text: 'IOS',
backgroundColor: '#85bdcd',
palette: 7,
rank: 7,
ranks: [10, 4]
},
{
text: 'PHP',
backgroundColor: '#83deff',
palette: 5,
rank: 8,
ranks: [6, 8]
},
{
text: 'Jquery',
backgroundColor: '#086893',
palette: 6,
rank: 9,
ranks: [7, 9]
},
{
text: 'HTML',
backgroundColor: '#85bdcd',
palette: 7,
rank: 10,
ranks: [9, 10]
}
]
}
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'rankflow',
title: {
text: 'Tech Rankings According to Stack Overflow Developers Survey and Payscale.com',
fontFamily: 'Tahoma',
fontSize: '17px'
},
options: {
colorType: 'palette',
palette: ['#40beeb', '#305f74', '#4492a8', '#8e8e8e', '#dddddd', '#83deff', '#086893', '#85bdcd']
},
plotarea: {
margin: '40 20 20 20'
},
scaleX: {
values: ['Trending on Stack Overflow', 'Salary'],
item: {
color: 'black',
fontFamily: 'Tahoma'
}
},
labels: [
{
text: 'OVERALL RANK',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 96.96875,
x: '15px',
y: '40px'
},
{
text: 'Top Tech on Stack Overflow',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 60.96875,
x: '350px',
y: '40px'
},
{
text: 'Salary',
bold: true,
color: 'black',
flat: true,
fontFamily: 'Tahoma',
generated: true,
width: 60.96875,
x: '620px',
y: '40px'
},
{
id: 'rank_1_l',
text: 1,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '75px'
},
{
id: 'rank_1_r',
text: 1,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '75px'
},
{
id: 'rank_1_g',
text: 1,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '75px'
},
{
id: 'rank_2_l',
text: 2,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '96px'
},
{
id: 'rank_2_r',
text: 2,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '96px'
},
{
id: 'rank_2_g',
text: 2,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '96px'
},
{
id: 'rank_3_l',
text: 3,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '117px'
},
{
id: 'rank_3_r',
text: 3,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '117px'
},
{
id: 'rank_3_g',
text: 3,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '117px'
},
{
id: 'rank_4_l',
text: 4,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '138px'
},
{
id: 'rank_4_r',
text: 4,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '138px'
},
{
id: 'rank_4_g',
text: 4,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '138px'
},
{
id: 'rank_5_l',
text: 5,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '159px'
},
{
id: 'rank_5_r',
text: 5,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '159px'
},
{
id: 'rank_5_g',
text: 5,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '159px'
},
{
id: 'rank_6_l',
text: 6,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '180px'
},
{
id: 'rank_6_r',
text: 6,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '180px'
},
{
id: 'rank_6_g',
text: 6,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '180px'
},
{
id: 'rank_7_l',
text: 7,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '201px'
},
{
id: 'rank_7_r',
text: 7,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '201px'
},
{
id: 'rank_7_g',
text: 7,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '201px'
},
{
id: 'rank_8_l',
text: 8,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: 190.515625,
y: '222px'
},
{
id: 'rank_8_r',
text: 8,
backgroundColor: '#999',
bold: true,
color: '#000',
flat: true,
generated: true,
width: '18px',
height: '18px',
x: '422px',
y: '222px'
},
{
id: 'rank_8_g',
text: 8,
backgroundColor: '#333',
bold: true,
color: '#fff',
flat: true,
generated: true,
width: '36px',
height: '18px',
x: '20px',
y: '222px'
},
{
id: 'box_overall_0',
text: 'Air West',
backgroundColor: '#40beeb',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '75px'
},
{
id: 'box_0_0',
text: 'Air West',
tooltip: {
text: 'Air West ranked on 3 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '117px'
},
{
id: 'box_0_1',
text: 'Air West',
tooltip: {
text: 'Air West ranked on 4 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '138px'
},
{
id: 'box_overall_1',
text: 'Braniff',
backgroundColor: '#305f74',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '96px'
},
{
id: 'box_1_0',
text: 'Braniff',
tooltip: {
text: 'Braniff ranked on 1 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '75px'
},
{
id: 'box_1_1',
text: 'Braniff',
tooltip: {
text: 'Braniff ranked on 1 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '75px'
},
{
id: 'box_overall_2',
text: 'Capital',
backgroundColor: '#4492a8',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '117px'
},
{
id: 'box_2_0',
text: 'Capital',
tooltip: {
text: 'Capital ranked on 6 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '180px'
},
{
id: 'box_2_1',
text: 'Capital',
tooltip: {
text: 'Capital ranked on 2 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '96px'
},
{
id: 'box_overall_3',
text: 'Eastern',
backgroundColor: '#8e8e8e',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '138px'
},
{
id: 'box_3_0',
text: 'Eastern',
tooltip: {
text: 'Eastern ranked on 8 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '222px'
},
{
id: 'box_3_1',
text: 'Eastern',
tooltip: {
text: 'Eastern ranked on 7 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '201px'
},
{
id: 'box_overall_4',
text: 'Galaxy',
backgroundColor: '#dddddd',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '159px'
},
{
id: 'box_4_0',
text: 'Galaxy',
tooltip: {
text: 'Galaxy ranked on 4 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '138px'
},
{
id: 'box_4_1',
text: 'Galaxy',
tooltip: {
text: 'Galaxy ranked on 5 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '159px'
},
{
id: 'box_overall_5',
text: 'PSA',
backgroundColor: '#83deff',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '180px'
},
{
id: 'box_5_0',
text: 'PSA',
tooltip: {
text: 'PSA ranked on 5 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '159px'
},
{
id: 'box_5_1',
text: 'PSA',
tooltip: {
text: 'PSA ranked on 3 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '117px'
},
{
id: 'box_overall_6',
text: 'Pan Am',
backgroundColor: '#086893',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '201px'
},
{
id: 'box_6_0',
text: 'Pan Am',
tooltip: {
text: 'Pan Am ranked on 2 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '96px'
},
{
id: 'box_6_1',
text: 'Pan Am',
tooltip: {
text: 'Pan Am ranked on 6 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '180px'
},
{
id: 'box_overall_7',
text: 'Sunbird',
backgroundColor: '#85bdcd',
color: '#fff',
flat: false,
generated: true,
width: 60.96875,
height: '18px',
x: '56px',
y: '222px'
},
{
id: 'box_7_0',
text: 'Sunbird',
tooltip: {
text: 'Sunbird ranked on 7 at ON-TIME',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 217.515625,
y: '201px'
},
{
id: 'box_7_1',
text: 'Sunbird',
tooltip: {
text: 'Sunbird ranked on 8 at CANCELED FLIGHTS',
padding: '10px',
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: '1px',
color: '#333'
},
color: '#fff',
generated: true,
width: 60.96875,
height: '18px',
x: 352.03125,
y: '222px'
}
],
shapes: [
{
type: 'poly',
id: 'flow_0',
text: 'Air West',
backgroundColor: '#40beeb',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 117],
[278.484375, 117],
[352.03125, 138],
[413, 138],
[413, 156],
[413, 156],
[352.03125, 156],
[278.484375, 135],
[217.515625, 135],
[217.515625, 117]
],
rank: 1,
ranks: [3, 4],
shadow: true
},
{
type: 'poly',
id: 'flow_1',
text: 'Braniff',
backgroundColor: '#305f74',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 75],
[278.484375, 75],
[352.03125, 75],
[413, 75],
[413, 93],
[413, 93],
[352.03125, 93],
[278.484375, 93],
[217.515625, 93],
[217.515625, 75]
],
rank: 2,
ranks: [1, 1],
shadow: true
},
{
type: 'poly',
id: 'flow_2',
text: 'Capital',
backgroundColor: '#4492a8',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 180],
[278.484375, 180],
[352.03125, 96],
[413, 96],
[413, 114],
[413, 114],
[352.03125, 114],
[278.484375, 198],
[217.515625, 198],
[217.515625, 180]
],
rank: 3,
ranks: [6, 2],
shadow: true
},
{
type: 'poly',
id: 'flow_3',
text: 'Eastern',
backgroundColor: '#8e8e8e',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 222],
[278.484375, 222],
[352.03125, 201],
[413, 201],
[413, 219],
[413, 219],
[352.03125, 219],
[278.484375, 240],
[217.515625, 240],
[217.515625, 222]
],
rank: 4,
ranks: [8, 7],
shadow: true
},
{
type: 'poly',
id: 'flow_4',
text: 'Galaxy',
backgroundColor: '#dddddd',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 138],
[278.484375, 138],
[352.03125, 159],
[413, 159],
[413, 177],
[413, 177],
[352.03125, 177],
[278.484375, 156],
[217.515625, 156],
[217.515625, 138]
],
rank: 5,
ranks: [4, 5],
shadow: true
},
{
type: 'poly',
id: 'flow_5',
text: 'PSA',
backgroundColor: '#83deff',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 159],
[278.484375, 159],
[352.03125, 117],
[413, 117],
[413, 135],
[413, 135],
[352.03125, 135],
[278.484375, 177],
[217.515625, 177],
[217.515625, 159]
],
rank: 6,
ranks: [5, 3],
shadow: true
},
{
type: 'poly',
id: 'flow_6',
text: 'Pan Am',
backgroundColor: '#086893',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 96],
[278.484375, 96],
[352.03125, 180],
[413, 180],
[413, 198],
[413, 198],
[352.03125, 198],
[278.484375, 114],
[217.515625, 114],
[217.515625, 96]
],
rank: 7,
ranks: [2, 6],
shadow: true
},
{
type: 'poly',
id: 'flow_7',
text: 'Sunbird',
backgroundColor: '#85bdcd',
flat: true,
generated: true,
label: {
visible: false
},
points: [
[217.515625, 201],
[278.484375, 201],
[352.03125, 222],
[413, 222],
[413, 240],
[413, 240],
[352.03125, 240],
[278.484375, 219],
[217.515625, 219],
[217.515625, 201]
],
rank: 8,
ranks: [7, 8],
shadow: true
}
],
tooltip: {
borderRadius: '5px',
fontFamily: 'Tahoma',
fontSize: '10px'
},
series: [
{
text: 'Java',
backgroundColor: '#40beeb',
palette: 0,
rank: 1,
ranks: [2, 2]
},
{
text: 'Javascipt',
backgroundColor: '#305f74',
palette: 1,
rank: 2,
ranks: [1, 3]
},
{
text: 'Python',
backgroundColor: '#8e8e8e',
palette: 3,
rank: 3,
ranks: [4, 1]
},
{
text: 'Android',
backgroundColor: '#4492a8',
palette: 2,
rank: 4,
ranks: [3, 6]
},
{
text: 'C#',
backgroundColor: '#dddddd',
palette: 4,
rank: 5,
ranks: [5, 7]
},
{
text: 'C++',
backgroundColor: '#85bdcd',
palette: 7,
rank: 6,
ranks: [8, 5]
},
{
text: 'IOS',
backgroundColor: '#85bdcd',
palette: 7,
rank: 7,
ranks: [10, 4]
},
{
text: 'PHP',
backgroundColor: '#83deff',
palette: 5,
rank: 8,
ranks: [6, 8]
},
{
text: 'Jquery',
backgroundColor: '#086893',
palette: 6,
rank: 9,
ranks: [7, 9]
},
{
text: 'HTML',
backgroundColor: '#85bdcd',
palette: 7,
rank: 10,
ranks: [9, 10]
}
]
}
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
