Dynamic Scatter Healthcare Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/SDOKPGFC

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  </script>
  <style>
    .zc-body {
      margin: 10px;
      padding: 10px;
      font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    }

    .zc-body input,
    .zc-body button,
    .zc-body select,
    .zc-body textarea,
    .zc-body label {
      font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    }

    .countries {
      height: 400px;
      width: 150px;
      overflow: auto;
      margin-left: 820px;
      margin-top: -550px;
      font-size: 12px;
      border: 1px solid #ddd;
    }

    .countries label {
      font-weight: 600;
      width: 90%;
      display: block;
      padding: 4px 6px;
    }

    .countries input[type=checkbox] {
      width: 17px;
      height: 17px;
      margin: 0 4px 0 0;
      vertical-align: bottom;
    }
  </style>
</head>

<body class="zc-body">

  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
  </script>

  <div id="zc"></div>
  <div id="chkCountries" class="countries"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Pointing to Zingchart's CDN module location. Without this, it will try to find ZC modules on Codepen's CDN
    zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    var aCountries = ['Argentina', 'Australia', 'Austria', 'Belgium', 'Bolivia', 'Brazil', 'Canada', 'Chile', 'China', 'Croatia', 'Denmark', 'Egypt', 'Finland', 'France', 'Germany', 'Greece', 'Iceland', 'India', 'Indonesia', 'Italy', 'Japan', 'Luxembourg', 'Mexico', 'Netherlands', 'Norway', 'Peru', 'Portugal', 'Romania', 'Spain', 'Switzerland', 'Thailand', 'United Kingdom', 'United States', 'Venezuela'];
    var iLineX = 70;
    var iLineY = 80;

    var chkList = $('#chkCountries');

    $.each(aCountries, function(i) {
      var id = aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase();

      var oLabel = $('<label/>')
        .attr('id', 'lbl' + id)
        .attr('for', id)
        .appendTo(chkList);

      var oInput = $('<input/>')
        .attr('type', 'checkbox')
        .attr('id', id)
        .attr('class', 'chkCountry')
        .attr('checked', false)
        .appendTo(oLabel);

      oLabel.append(aCountries[i]);

    });

    $(".chkCountry").click(function() {
      zingchart.exec('zc', 'update', {
        graphid: 0
      });
    });

    var _r_ = function(min, max) {
      return Math.round(min + (max - min) * Math.random());
    }

    var nrVal = aCountries.length;
    var aData = [];
    var aDataTxt = [];

    for (var i = 0; i < nrVal; i++) {
      var r1 = _r_(iLineX - 30, iLineX + 30);
      var r2 = _r_(iLineY - 20, iLineY + 20);
      aData.push([r1, r2]);

      aDataTxt.push(aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase());
    }

    var chartJSON = {

      graphset: [{
        type: 'scatter',
        backgroundColor: '#FFF',

        title: {
          text: 'Life Expectancy and Self-Reported Health (OECD)',
          fontSize: 22,
          align: 'left',
          paddingLeft: 10
        },
        subtitle: {
          text: 'Self-reported Health (scale from 0-100)',
          fontSize: 12,
          fontWeight: 'normal',
          fontStyle: 'italic',
          padding: '5 0 10 10',
          align: 'left'
        },

        scaleX: {
          offset: 40,
          step: 10,
          lineWidth: 0,
          label: {
            text: 'Self-reported Health (scale from 0-100)',
            fontColor: '#000',
            fontWeight: 'normal',
            fontSize: 11,
            paddingTop: 15
          },
          markers: [{
            type: 'line',
            lineStyle: 'dotted',
            lineColor: '#000',
            text: 'low<br><br>high',
            valueRange: true,
            label: {
              offsetX: -40,
              paddingBottom: 40,
              fontWeight: 'bold'
            },
            range: [iLineX]
          }],
          item: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 11
          },
          guide: {
            visible: false
          },
          tick: {
            visible: true
          }
        },
        tooltip: {
          text: '<span style="font-size:17px;font-weight:bold;">%data-countries</span><br><br>Life expectancy: <b>%node-value</b> years<br>Self-reported health: <b>%scale-key-value</b>',
          align: 'left',
          padding: 10,
          fontSize: 12
        },

        plot: {
          dataCountries: aCountries,
          dataTxt: aDataTxt,
          animation: {
            speed: 400,
            effect: 1,
            method: 0,
            sequence: 0
          }
        },
        scaleY: {
          offset: 40,
          minValue: 'auto',
          lineWidth: 0,
          label: {
            text: 'Life Expectancy',
            fontColor: '#000',
            fontWeight: 'normal',
            fontSize: 11,
            paddingRight: 15
          },
          markers: [{
            type: 'line',
            lineStyle: 'dotted',
            lineColor: '#000',
            text: 'high<br><br>low',
            label: {
              offsetY: 20,
              paddingLeft: 20,
              fontWeight: 'bold'
            },
            range: [iLineY]
          }],
          item: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 11
          },
          guide: {
            visible: false
          },
          tick: {
            visible: true
          }
        },

        series: [{
          values: aData,
          hoverMarker: {
            visible: false
          },
          valueBox: {
            text: '%data-countries',
            fontSize: 11,
            fontWeight: 'bold',
            color: '#000',
            offsetY: 45,
            jsRule: 'plot_rule(2)'
          },
          tooltip: {
            jsRule: 'plot_rule(1)'
          },
          marker: {
            borderWidth: 1,
            borderColor: '#FFF',
            shadowDistance: 3,
            fillType: 'linear',
            fillAngle: 45,
            size: 20,
            jsRule: 'plot_rule(0)'
          }
        }]
      }]

    };


    window.plot_rule = function(p, t) {
      var obj = {},
        color = '',
        fontColor = '#FFF';

      var iChecked = $(".chkCountry:checked").length;

      if (t === '0' || t === '1') {
        if (p.value <= iLineY && p.key <= iLineX) {
          color = '#D01C8B #821257';
        } else if (p.value > iLineY && p.key <= iLineX) {
          color = '#B8E186 #799358';
          fontColor = '#000';
        } else if (p.value <= iLineY && p.key > iLineX) {
          color = '#F1B6DA #A37C94';
          fontColor = '#000';
        } else if (p.value > iLineY && p.key > iLineX) {
          color = '#4DAC26 #2B5E15';
        }

        $('#lbl' + p["data-txt"]).css('background-color', color.split(' ')[0]);

        obj['background-color'] = color;
        obj['font-color'] = fontColor;

        if (t === '0') {
          obj['shadow'] = $('#' + p["data-txt"]).prop("checked");
          obj['border-color'] = $('#' + p["data-txt"]).prop("checked") ? '#666' : '#FFF';
          obj['size'] = $('#' + p["data-txt"]).prop("checked") ? 22 : 20;
          obj['alpha'] = $('#' + p["data-txt"]).prop("checked") ? 1 : (iChecked === 0 ? 0.75 : 0.05);
        }
      } else {
        obj['visible'] = $('#' + p["data-txt"]).prop("checked");
      }
      return obj;
    };

    var update = function() {

      for (var i = 0; i < nrVal; i++) {
        aData[i][0] += _r_(-2, 2);
        aData[i][1] += _r_(-2, 2);
      }

      zingchart.exec('zc', 'setseriesvalues', {
        plotindex: 0,
        values: aData
      });
    };

    zingchart.render({
      id: 'zc',
      width: 800,
      height: 600,
      output: 'svg',
      data: chartJSON,
      events: {
        load: function() {
          setInterval(function() {
            update();
          }, 2500);
        }
      }
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
  </head>
	<body class="zc-body">

    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>

		<div id="zc"></div>
    <div id="chkCountries" class="countries"></div>
  </body>
</html>

// Pointing to Zingchart's CDN module location. Without this, it will try to find ZC modules on Codepen's CDN
zingchart.MODULESDIR ='https://cdn.zingchart.com/modules/';var aCountries = ['Argentina','Australia','Austria','Belgium','Bolivia','Brazil','Canada','Chile','China','Croatia','Denmark','Egypt','Finland','France','Germany','Greece','Iceland','India','Indonesia','Italy','Japan','Luxembourg','Mexico','Netherlands','Norway','Peru','Portugal','Romania','Spain','Switzerland','Thailand','United Kingdom','United States','Venezuela'];
var iLineX = 70;
var iLineY = 80;

var chkList = $('#chkCountries');

$.each(aCountries, function(i) {
  var id = aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase();

  var oLabel = $('<label/>')
  .attr('id', 'lbl'+id)
  .attr('for', id)
  .appendTo(chkList);

  var oInput = $('<input/>')
  .attr('type', 'checkbox')
  .attr('id', id)
  .attr('class', 'chkCountry')
  .attr('checked', false)
  .appendTo(oLabel);

  oLabel.append(aCountries[i]);

});

$(".chkCountry").click(function() {
  zingchart.exec('zc', 'update', {
    graphid : 0
  });
});

var _r_ = function(min, max) {
	return Math.round(min + (max-min)*Math.random());
}

var nrVal = aCountries.length;
var aData = [];
var aDataTxt = [];

for (var i=0;i<nrVal;i++) {
	var r1 = _r_(iLineX - 30, iLineX + 30);
	var r2 = _r_(iLineY - 20, iLineY + 20);
	aData.push([r1, r2]);

	aDataTxt.push(aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase());
}

var chartJSON = {

graphset : [
	{
		type : 'scatter',
		backgroundColor : '#FFF',

		title : {
			text : 'Life Expectancy and Self-Reported Health (OECD)',
			fontSize : 22,
			align : 'left',
			paddingLeft : 10
		},
		subtitle : {
			text : 'Self-reported Health (scale from 0-100)',
			fontSize : 12,
			fontWeight : 'normal',
			fontStyle : 'italic',
			padding : '5 0 10 10',
			align : 'left'
		},

		scaleX : {
			offset : 40,
			step : 10,
			lineWidth : 0,
			label : {
				text : 'Self-reported Health (scale from 0-100)',
				fontColor : '#000',
				fontWeight : 'normal',
				fontSize : 11,
				paddingTop : 15
			},
			markers : [
				{
					type : 'line',
					lineStyle : 'dotted',
					lineColor : '#000',
					text : 'low<br><br>high',
					valueRange : true,
					label : {
						offsetX : -40,
						paddingBottom : 40,
						fontWeight : 'bold'
					},
					range : [iLineX]
				}
			],
			item : {
				color : '#000',
				fontWeight : 'normal',
				fontSize : 11
			},
			guide : {
				visible : false
			}, 
			tick : {
				visible : true
			}
		},
		tooltip : {
			text : '<span style="font-size:17px;font-weight:bold;">%data-countries</span><br><br>Life expectancy: <b>%node-value</b> years<br>Self-reported health: <b>%scale-key-value</b>',
			align : 'left',
			padding : 10,
			fontSize : 12
		},

		plot : {
			dataCountries : aCountries,
			dataTxt : aDataTxt,
			animation : {
				speed : 400,
				effect : 1,
				method : 0,
				sequence : 0
			}
		},
		scaleY : {
			offset : 40,
			minValue : 'auto',
			lineWidth : 0,
			label : {
				text : 'Life Expectancy',
				fontColor : '#000',
				fontWeight : 'normal',
				fontSize : 11,
				paddingRight : 15
			},
			markers : [
				{
					type : 'line',
					lineStyle : 'dotted',
					lineColor : '#000',
					text : 'high<br><br>low',
					label : {
						offsetY : 20,
						paddingLeft : 20,
						fontWeight : 'bold'
					},
					range : [iLineY]
				}
			],
			item : {
				color : '#000',
				fontWeight : 'normal',
				fontSize : 11
			},
			guide : {
				visible : false
			}, 
			tick : {
				visible : true
			}
		},

		series : [
			{
				values : aData,
				hoverMarker : {
					visible : false
				},
				valueBox : {
					text : '%data-countries',
					fontSize : 11,
					fontWeight : 'bold',
					color : '#000',
					offsetY : 45,
					jsRule : 'plot_rule(2)'
				},
				tooltip : {
					jsRule : 'plot_rule(1)'
				},
				marker : {
					borderWidth : 1,
					borderColor : '#FFF',
					shadowDistance : 3,
					fillType : 'linear',
					fillAngle : 45,
					size : 20,
					jsRule : 'plot_rule(0)'
				}
			}
		]
	}
]

};


window.plot_rule = function(p, t) {
	var obj = {}, color = '', fontColor = '#FFF';

	var iChecked = $(".chkCountry:checked").length;

	if (t === '0' || t === '1') {
		if (p.value <= iLineY && p.key <= iLineX) {
			color = '#D01C8B #821257';
		} else if (p.value > iLineY && p.key <= iLineX) {
			color = '#B8E186 #799358';
			fontColor = '#000';
		} else if (p.value <= iLineY && p.key > iLineX) {
			color = '#F1B6DA #A37C94';
			fontColor = '#000';
		} else if (p.value > iLineY && p.key > iLineX) {
			color = '#4DAC26 #2B5E15';
		}

		$('#lbl' + p["data-txt"]).css('background-color', color.split(' ')[0]);

		obj['background-color'] = color;
		obj['font-color'] = fontColor;

		if (t === '0') {
			obj['shadow'] = $('#' + p["data-txt"]).prop("checked");
			obj['border-color'] = $('#' + p["data-txt"]).prop("checked")?'#666':'#FFF';
			obj['size'] = $('#' + p["data-txt"]).prop("checked")?22:20;
			obj['alpha'] = $('#' + p["data-txt"]).prop("checked")?1:(iChecked===0?0.75:0.05);
		}
	} else {
		obj['visible'] = $('#' + p["data-txt"]).prop("checked");
	}
	return obj;
};

var update = function() {
	
	for (var i=0;i<nrVal;i++) {
		aData[i][0] += _r_(-2,2);
		aData[i][1] += _r_(-2,2);
	}

	zingchart.exec('zc', 'setseriesvalues', {
		plotindex : 0,
		values : aData
	});
};

zingchart.render({
  id : 'zc',
  width : 800,
  height : 600,
  output : 'svg',
  data : chartJSON,
  events : {
    load : function() {
      setInterval(function() {
        update();
      }, 2500);
    }
  }
});

.zc-body { 
  margin:10px;
  padding:10px; 
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}

.zc-body input, 
.zc-body button, 
.zc-body select, 
.zc-body textarea, 
.zc-body label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}

.countries {
	height:400px;width:150px;overflow:auto;margin-left:820px;margin-top:-550px;
	font-size:12px;border:1px solid #ddd;
}
.countries label {
	font-weight: 600;
	width : 90%;
	display: block;
	padding : 4px 6px;
}
.countries input[type=checkbox] {
	width: 17px;
	height: 17px;
	margin: 0 4px 0 0;
	vertical-align: bottom;
}

Working from Home Dashboard 4/270 Spotify Usage Report

Dynamic Scatter Healthcare Chart

Related Documentation: