Ok, found an easy solution... using another IntensityGridSeries as a background. It really didn't cross my mind earlier.
Here, a background image is positioned from x range 10...60, y range 20...80.
![Background intensity grid visible](./download/file.php?id=192&sid=71b7838f4eb40f3336db8a0974e863de)
- Background intensity grid visible
- backgroundOnly.jpg (174.53 KiB) Viewed 44323 times
When enabling the other intensity grid series on the front, it looks like this:
![Background on back and heatmap on the front](./download/file.php?id=193&sid=71b7838f4eb40f3336db8a0974e863de)
- Background on back and heatmap on the front
- backgroundAndHeatmap.jpg (154.01 KiB) Viewed 44323 times
Full code here:
Code: Select all
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Arction.LightningChartUltimate;
using Arction.LightningChartUltimate.Views.ViewXY;
using Arction.LightningChartUltimate.SeriesXY;
namespace BackgroundBitmapAndHeatmap
{
public partial class Form1 : Form
{
LightningChartUltimate m_chart;
public Form1()
{
InitializeComponent();
CreateChart();
}
void CreateChart()
{
m_chart = new LightningChartUltimate();
m_chart.Parent = this;
m_chart.Dock = DockStyle.Fill;
m_chart.BeginUpdate();
m_chart.ViewXY.XAxes[0].ValueType = AxisValueType.Number;
//Use these limits for both background and heatmap
double xMin = 10;
double xMax = 60;
double yMin = 20;
double yMax = 80;
//Background bitmap. Use IntensityGrid for that too.
IntensityGridSeries bg = new IntensityGridSeries(m_chart.ViewXY, m_chart.ViewXY.XAxes[0], m_chart.ViewXY.YAxes[0]);
Bitmap bm = (Bitmap) Bitmap.FromFile(Application.StartupPath+"\\background.png");
bg.SetHeightDataFromBitmap(xMin, xMax, yMin, yMax, 0, 100, bm, null); //load bitmap. Sets pixel colors to each data node.
bg.Fill = IntensityFillStyle.FromSurfacePoints; //Use actual colors from bitmap
bg.PixelRendering = true;
bg.MouseInteraction = false;
bg.Title.ShowInLegendBox = false;
m_chart.ViewXY.IntensityGridSeries.Add(bg);
//The heatmap
IntensityGridSeries heatmap = new IntensityGridSeries(m_chart.ViewXY, m_chart.ViewXY.XAxes[0], m_chart.ViewXY.YAxes[0]);
heatmap.Fill = IntensityFillStyle.Paletted;
heatmap.ValueRangePalette.Type = PaletteType.Gradient;
heatmap.PixelRendering = false;
heatmap.Title.ShowInLegendBox = true;
heatmap.ValueRangePalette = CreatePalette(heatmap, 100);
int columnCount = 100;
int rowCount = 100;
IntensityPoint[,] data = new IntensityPoint[columnCount, rowCount];
for (int i = 0; i < columnCount; i++)
{
for (int j = 0; j < rowCount; j++)
{
data[i, j].Value = 50.0 + Math.Sin((double)i * (double)j / 200.0) * 50.0;
}
}
heatmap.Data = data;
heatmap.SetRangesXY(xMin, xMax, yMin, yMax);
m_chart.ViewXY.IntensityGridSeries.Add(heatmap);
m_chart.ViewXY.XAxes[0].SetRange(0, 100);
m_chart.ViewXY.YAxes[0].SetRange(0, 100);
m_chart.ViewXY.LegendBox.Layout = LegendBoxLayout.Vertical;
m_chart.EndUpdate();
}
ValueRangePalette CreatePalette(IntensityGridSeries ownerSeries, double yRange)
{
ValueRangePalette palette = new ValueRangePalette(ownerSeries);
palette.Steps.Clear();
palette.Steps.Add(new PaletteStep(palette, Color.FromArgb(0,0,0,0), 0));
palette.Steps.Add(new PaletteStep(palette, Color.Lime, 30 * yRange / 100.0));
palette.Steps.Add(new PaletteStep(palette, Color.Yellow, 60.0 * yRange / 100.0));
palette.Steps.Add(new PaletteStep(palette, Color.Red, 100.0 * yRange / 100.0));
palette.Type = PaletteType.Gradient;
return palette;
}
}
}
Code needs background.png file, which is here: