skyme5/chartjs.html

## chartjs.html

<!DOCTYPE html>
<html>
  <head>
    <title>Scatter Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }

      #chartjs-tooltip {
        opacity: 0;
        left: 642.737px;
        top: 80.6907px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-style: normal;
        padding: 6px;
      }

      #chartjs-tooltip button.close {
        float: right;
      }
    </style>
  </head>

  <body>
    <div style="width: 75%;">
      <canvas id="canvas"></canvas>
      <button onclick="resetAxisTo(0)">Origin to 0</button>
      <button onclick="resetAxisTo()">Auto Adjust</button>
      <div id="chartjs-tooltip" class="center"></div>
    </div>

    <ol>
      <li>
        <s>I'd like the tooltips in this chart to display data from the current
        data point.</s>
      </li>
      <li>
        <s>I'd also like tooltips to stay open once you click on a data point.
        Otherwise, links inside the tooltip become unclickable. (Also, mobile
        users cannot hover, so for them, clicking on a data point would be the
        only way to open the tooltip.)</s>
      </li>
      <li>
        <s>I'd also like a checkbox to set origin of the chart either always to be
        0 on both axes, or to auto-adjust (the way it is now).</s>
      </li>
      <li>
        <s>Right now, hovering the first time over a data point somehow moves the
        content below the chart. I assume that is because of the div with the
        ide "chartjs-tooltip". Please fix this behavior.</s>
      </li>
    </ol>

    <script>
      var color = Chart.helpers.color;
      function generateData() {
        var data = [];
        for (var i = 0; i < 7; i++) {
          data.push({
            x: randomScalingFactor(),
            y: randomScalingFactor(),
          });
        }
        return data;
      }

      let backgroundColor = color(window.chartColors.red)
        .alpha(0.2)
        .rgbString();
      let borderColor = window.chartColors.blue;
      let chart = Chart.Scatter(
        document.getElementById("canvas").getContext("2d"),
        {
          data: {
            keepShowing: [],
            datasets: [
              {
                label: "Dataset 1",
                borderColor: borderColor,
                backgroundColor: backgroundColor,
                data: [
                  {
                    x: 40,
                    y: 29,
                    url: "http://url0.com",
                    headline: "Headline 1",
                    keepTooltipOpen: true,
                  },
                  {
                    x: 50,
                    y: 26,
                    url: "http://url1.com",
                    headline: "Headline 2",
                  },
                  {
                    x: 30,
                    y: 22,
                    url: "http://url2.com",
                    headline: "Headine 3",
                  },
                ],
              },
              {
                label: "Dataset 2",
                borderColor: borderColor,
                backgroundColor: backgroundColor,
                data: [
                  {
                    x: 33,
                    y: 10,
                    url: "http://url0.com",
                    headline: "Headline 1",
                  },
                  {
                    x: 40,
                    y: 18,
                    url: "http://url1.com",
                    headline: "Headline 2",
                  },
                  {
                    x: 60,
                    y: 15,
                    url: "http://url2.com",
                    headline: "Headine 3",
                  },
                ],
              },
            ],
          },
          options: {
            events: ["click"],
            responsive: true,
            tooltips: {
              mode: "point",
              enabled: false,
              custom: function (tooltipModel) {
                console.log(tooltipModel);
                // Tooltip Element
                let tooltipEl = document.getElementById("chartjs-tooltip");

                // Create element on first render
                if (!tooltipEl) {
                  tooltipEl = document.createElement("div");
                  tooltipEl.id = "chartjs-tooltip";
                  tooltipEl.innerHTML = "<table></table>";
                  document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                  tooltipEl.style.opacity = 0;
                  return;
                }

                // Set caret Position
                tooltipEl.classList.remove("above", "below", "no-transform");
                if (tooltipModel.yAlign) {
                  tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                  tooltipEl.classList.add("no-transform");
                }

                function getBody(bodyItem, data) {
                  return bodyItem.lines;
                }

                // Set Text
                if (tooltipModel.body) {
                  var titleLines = tooltipModel.title || [];
                  var bodyLines = tooltipModel.body.map(getBody);
                  var innerHtml = `<div style="width:200px;border:1px solid #000000;background-color:white;padding:10px;">
                                    <button class="close" onclick="hideThisTooltip(this)">x</button>
                                    <h1>Hello</h1>
                                    <img style="width:150px;" src="https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/4d/10/8e/4d108e99-e637-8c60-3921-2b11b1511282/source/256x256bb.jpg">
                                    <br>This should also display:
                                    <ul>
                                        <li>This items headline</li>
                                        <li><a target="_blank" href="https://en.wikipedia.org/wiki/House_sparrow">A link to this items URL</a></li>
                                    </ul>
                                    <b>And...</b> when I click the data point, the tooltip should stay open. So that I can actually click on the link that\'s inside.
                                  </div>`;

                  tooltipEl.innerHTML = innerHtml;
                  tooltipEl.querySelector("button").onclick = function () {
                    tooltipEl.style.opacity = 0;
                    chart.update();
                  };
                }

                // `this` will be the overall tooltip
                var position = this._chart.canvas.getBoundingClientRect();
                tooltipEl.style.cssText = `
                    opacity: 1;
                    position: absolute;
                    left: ${position.left + window.pageXOffset + tooltipModel.caretX}px;
                    top: ${position.top + window.pageYOffset + tooltipModel.caretY}px;
                    font-family: ${tooltipModel._bodyFontFamily};
                    font-size: ${tooltipModel.bodyFontSize};
                    font-style: ${tooltipModel._bodyFontStyle};
                    padding: ${tooltipModel.yPadding + tooltipModel.xPadding}px;
                `;
                // Display, position, and set styles for font
                // tooltipEl.style.opacity = 1;
                // tooltipEl.style.position = "absolute";
                // tooltipEl.style.left = `${

                // }px`;
                // tooltipEl.style.top = `${

                // }px`;
                // tooltipEl.style.fontFamily = ;
                // tooltipEl.style.fontSize =  + "px";
                // tooltipEl.style.fontStyle = ;
                // tooltipEl.style.padding =
                //   ;
              },
            },
          },
        }
      );

      function resetAxisTo(value=undefined) {
        [chart.options.scales.xAxes, chart.options.scales.yAxes].forEach(
          (list) => {
            list.forEach((axis) => {
              console.log(axis);
              axis.ticks.min = value;
            });
          }
        );
        document.querySelector("#chartjs-tooltip").style.opacity = 0;
        chart.update();
      }

    </script>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Scatter Chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
	<style>
	canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	}

	#chartjs-tooltip {
	opacity: 0;
	left: 642.737px;
	top: 80.6907px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	padding: 6px;
	}

	#chartjs-tooltip button.close {
	float: right;
	}
	</style>
	</head>

	<body>
	<div style="width: 75%;">
	<canvas id="canvas"></canvas>
	<button onclick="resetAxisTo(0)">Origin to 0</button>
	<button onclick="resetAxisTo()">Auto Adjust</button>
	<div id="chartjs-tooltip" class="center"></div>
	</div>

	<ol>
	<li>
	<s>I'd like the tooltips in this chart to display data from the current
	data point.</s>
	</li>
	<li>
	<s>I'd also like tooltips to stay open once you click on a data point.
	Otherwise, links inside the tooltip become unclickable. (Also, mobile
	users cannot hover, so for them, clicking on a data point would be the
	only way to open the tooltip.)</s>
	</li>
	<li>
	<s>I'd also like a checkbox to set origin of the chart either always to be
	0 on both axes, or to auto-adjust (the way it is now).</s>
	</li>
	<li>
	<s>Right now, hovering the first time over a data point somehow moves the
	content below the chart. I assume that is because of the div with the
	ide "chartjs-tooltip". Please fix this behavior.</s>
	</li>
	</ol>

	<script>
	var color = Chart.helpers.color;
	function generateData() {
	var data = [];
	for (var i = 0; i < 7; i++) {
	data.push({
	x: randomScalingFactor(),
	y: randomScalingFactor(),
	});
	}
	return data;
	}

	let backgroundColor = color(window.chartColors.red)
	.alpha(0.2)
	.rgbString();
	let borderColor = window.chartColors.blue;
	let chart = Chart.Scatter(
	document.getElementById("canvas").getContext("2d"),
	{
	data: {
	keepShowing: [],
	datasets: [
	{
	label: "Dataset 1",
	borderColor: borderColor,
	backgroundColor: backgroundColor,
	data: [
	{
	x: 40,
	y: 29,
	url: "http://url0.com",
	headline: "Headline 1",
	keepTooltipOpen: true,
	},
	{
	x: 50,
	y: 26,
	url: "http://url1.com",
	headline: "Headline 2",
	},
	{
	x: 30,
	y: 22,
	url: "http://url2.com",
	headline: "Headine 3",
	},
	],
	},
	{
	label: "Dataset 2",
	borderColor: borderColor,
	backgroundColor: backgroundColor,
	data: [
	{
	x: 33,
	y: 10,
	url: "http://url0.com",
	headline: "Headline 1",
	},
	{
	x: 40,
	y: 18,
	url: "http://url1.com",
	headline: "Headline 2",
	},
	{
	x: 60,
	y: 15,
	url: "http://url2.com",
	headline: "Headine 3",
	},
	],
	},
	],
	},
	options: {
	events: ["click"],
	responsive: true,
	tooltips: {
	mode: "point",
	enabled: false,
	custom: function (tooltipModel) {
	console.log(tooltipModel);
	// Tooltip Element
	let tooltipEl = document.getElementById("chartjs-tooltip");

	// Create element on first render
	if (!tooltipEl) {
	tooltipEl = document.createElement("div");
	tooltipEl.id = "chartjs-tooltip";
	tooltipEl.innerHTML = "<table></table>";
	document.body.appendChild(tooltipEl);
	}

	// Hide if no tooltip
	if (tooltipModel.opacity === 0) {
	tooltipEl.style.opacity = 0;
	return;
	}

	// Set caret Position
	tooltipEl.classList.remove("above", "below", "no-transform");
	if (tooltipModel.yAlign) {
	tooltipEl.classList.add(tooltipModel.yAlign);
	} else {
	tooltipEl.classList.add("no-transform");
	}

	function getBody(bodyItem, data) {
	return bodyItem.lines;
	}

	// Set Text
	if (tooltipModel.body) {
	var titleLines = tooltipModel.title \|\| [];
	var bodyLines = tooltipModel.body.map(getBody);
	var innerHtml = `<div style="width:200px;border:1px solid #000000;background-color:white;padding:10px;">
	<button class="close" onclick="hideThisTooltip(this)">x</button>
	<h1>Hello</h1>
	<img style="width:150px;" src="https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/4d/10/8e/4d108e99-e637-8c60-3921-2b11b1511282/source/256x256bb.jpg">
	<br>This should also display:
	<ul>
	<li>This items headline</li>
	<li><a target="_blank" href="https://en.wikipedia.org/wiki/House_sparrow">A link to this items URL</a></li>
	</ul>
	<b>And...</b> when I click the data point, the tooltip should stay open. So that I can actually click on the link that\'s inside.
	</div>`;

	tooltipEl.innerHTML = innerHtml;
	tooltipEl.querySelector("button").onclick = function () {
	tooltipEl.style.opacity = 0;
	chart.update();
	};
	}

	// `this` will be the overall tooltip
	var position = this._chart.canvas.getBoundingClientRect();
	tooltipEl.style.cssText = `
	opacity: 1;
	position: absolute;
	left: ${position.left + window.pageXOffset + tooltipModel.caretX}px;
	top: ${position.top + window.pageYOffset + tooltipModel.caretY}px;
	font-family: ${tooltipModel._bodyFontFamily};
	font-size: ${tooltipModel.bodyFontSize};
	font-style: ${tooltipModel._bodyFontStyle};
	padding: ${tooltipModel.yPadding + tooltipModel.xPadding}px;
	`;
	// Display, position, and set styles for font
	// tooltipEl.style.opacity = 1;
	// tooltipEl.style.position = "absolute";
	// tooltipEl.style.left = `${

	// }px`;
	// tooltipEl.style.top = `${

	// }px`;
	// tooltipEl.style.fontFamily = ;
	// tooltipEl.style.fontSize = + "px";
	// tooltipEl.style.fontStyle = ;
	// tooltipEl.style.padding =
	// ;
	},
	},
	},
	}
	);

	function resetAxisTo(value=undefined) {
	[chart.options.scales.xAxes, chart.options.scales.yAxes].forEach(
	(list) => {
	list.forEach((axis) => {
	console.log(axis);
	axis.ticks.min = value;
	});
	}
	);
	document.querySelector("#chartjs-tooltip").style.opacity = 0;
	chart.update();
	}

	</script>
	</body>
	</html>