Steema Central

Posted: **Sun Dec 01, 2024 10:38 pm**

I would like to inquire about how to give a different color in the case of a null value in ColorGrid.

thank you.

---------------------------------------- html source ------------------------------------------

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<title>TeeChart JavaScript Color Grid Series Example</title>
<meta charset="UTF-8"/>

<!--[if lt IE 9]>
    <script src="../../../src/excanvas/excanvas_text.js"></script>
    <script src="../../../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../../../src/teechart.js" type="text/javascript"></script>
<script src="../../../src/teechart-extras.js" type="text/javascript"></script>
<script src="../../../src/teechart-3d.js" type="text/javascript"></script>
<script src="../../3rd_party/jquery/js/jquery-1.7.1.min.js"></script>
<script src="../../demo.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link href="../../3rd_party/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../../3rd_party/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<!-- Custom Theme Style -->
<link href="../../3rd_party/build/css/custom.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../../demo.css">

<script type="text/javascript">

var Chart1, grid;

function draw() {
  Chart1=new Tee.Chart("canvas");

  grid = Chart1.addSeries(new Tee.ColorGrid());

  grid.horizAxis="both";
  grid.vertAxis="both";
  
  grid.marks.visible = true;

  addSampleData(0);

  Chart1.title.text="TeeChart Color Grid (Heatmap)";

  Chart1.panel.transparent=true;
  Chart1.axes.left.grid.centered=true;
  Chart1.axes.bottom.grid.centered=true;
  
  Chart1.axes.left.labels.fixedDecimals=true;
  Chart1.axes.left.labels.decimals = 2;
  Chart1.axes.right.labels.fixedDecimals=true;
  Chart1.axes.right.labels.decimals = 2;

  Chart1.tools.add(new Tee.ToolTip(Chart1));

  changeTheme(Chart1, "minimal");
  Chart1.draw();
}

function addSampleData(index) {
  if (index == "0") {
    grid.data.values=[ [null,15,12, 8,39,50,34],
                       [19, null,31,23,12,40,27],
                       [ null,26,18,null,20, 6,11]
                     ];
                     
    grid.dataChanged=true;
	grid.decimals = 2;
  }
  else
  if (index==="1")
     grid.addRandom(200);  // 200x200
  else
  if (index==="2")
     grid.addRandom(400);  // 400x400
  else
     grid.addRandom(100,50);  // 100x50

  grid.chart.zoom.reset();
}
</script>
</head>
<body onload="draw();">
<div class="right_col" role="main">
		<div class="page-title">
			<div class="title_left">
				<h3>TeeChart for JavaScript <span class="smallLetters">Color Grid</span></h3>
			</div>
		</div>
		<div class="clearfix"></div>
	
		<div class="row">
			<div class="x_panel">
			<div class="x_title">
				<h2>Options <span class="smallLetters">Change the aspect of the Chart</span></h2>
				<ul class="nav navbar-right panel_toolbox">
					<li><a class="collapse-link" onclick="showHide(this)"><i class="fa fa-chevron-up"></i></a>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="x_content">
				<input type="checkbox" name="smooth" onclick="grid.smooth= this.checked; Chart1.draw();" checked>Smooth
				<input type="checkbox" name="smooth" onclick="grid.format.stroke.fill= this.checked ? 'black':''; Chart1.draw();">Grid
				<input type="checkbox" name="legend" onclick="Chart1.legend.visible= !Chart1.legend.visible; Chart1.draw();" checked>Legend
				<input type="checkbox" name="grayscale" onclick="grid.palette.grayScale=this.checked; grid.dataChanged=true; Chart1.draw();">Gray Scale
				<input type="checkbox" name="invcolors" onclick="grid.palette.inverted=this.checked; grid.dataChanged=true; Chart1.draw();">Inverted Palette
				<input type="checkbox" name="invlegend" onclick="Chart1.legend.inverted=this.checked; Chart1.draw();">Inverted Legend
				
				<br/>
				<b>Axes:</b><br/>
				<input type="checkbox" name="invV" onclick="Chart1.axes.left.inverted=Chart1.axes.right.inverted=this.checked; Chart1.draw();">Inverted Vert.
				<input type="checkbox" name="invH" onclick="Chart1.axes.bottom.inverted=Chart1.axes.top.inverted=this.checked; Chart1.draw();">Inverted Horiz.
				<br/>
				<b>Sample data:</b><br/>
				<form action="">
				  <input type="radio" name="data" id="data0" value="0" onchange="addSampleData(this.value); Chart1.draw();" checked/><label for="data0">7x3</label>
				  <input type="radio" name="data" id="data1" value="1" onchange="addSampleData(this.value); Chart1.draw();"/><label for="data1">200x200</label>
				  <input type="radio" name="data" id="data2" value="2" onchange="addSampleData(this.value); Chart1.draw();"/><label for="data2">400x400</label>
				  <input type="radio" name="data" id="data3" value="3" onchange="addSampleData(this.value); Chart1.draw();"/><label for="data3">100x50</label>
				</form>
				<br/>
			</div>					
			</div>
		</div>
			
		<div class="row">
			<div class="x_panel">
				<div class="x_title">
					<h2><span class="smallLetters">Color Grid</span></h2>
					<ul class="nav navbar-right panel_toolbox">
						<li><a class="collapse-link" onclick="showHide(this)"><i class="fa fa-chevron-up"></i></a>
						</li>
					</ul>
				<div class="clearfix"></div>
				</div>
				<div class="x_content">
					<canvas id="canvas" height="500">
					</canvas>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Posted: **Wed Dec 04, 2024 2:00 pm**

Hello,

You can overwrite the getColor function assigning a known color when the value is null.
Here I'm using white color:

Code: Select all

	grid.oldGetColor = grid.getColor
	grid.getColor = function (value) {
		const color = "#FFFFFF"
		if (value === null) return {
			r: Number.parseInt(color.substr(1, 2), 16),
			g: Number.parseInt(color.substr(3, 2), 16),
			b: Number.parseInt(color.substr(5, 2), 16),
			a: 0,
		}

		return this.oldGetColor(value)
	}

Posted: **Mon Dec 16, 2024 5:54 am**

Thank you for suggesting a solution.

Steema Central

I would like to inquire about how to give a different color in the case of a null value in ColorGrid.

I would like to inquire about how to give a different color in the case of a null value in ColorGrid.

Re: I would like to inquire about how to give a different color in the case of a null value in ColorGrid.

Re: I would like to inquire about how to give a different color in the case of a null value in ColorGrid.