Insert a background image to the Chart
Moderator: Queue Moderators
Insert a background image to the Chart
Hello Parsi,
I have a PixelMap, with the data type IntensityGridSeries and an image of the object from which the PixelMap was created.
PixelMap: Object Image: I now want to the object image behind the PixelMap to better recognize area from which PixelMap was created.
If I change the zoom in or into Chartcoordinaten is to customize the background image.
The result should look like this: Is that possible?
I have a PixelMap, with the data type IntensityGridSeries and an image of the object from which the PixelMap was created.
PixelMap: Object Image: I now want to the object image behind the PixelMap to better recognize area from which PixelMap was created.
If I change the zoom in or into Chartcoordinaten is to customize the background image.
The result should look like this: Is that possible?
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
I'd recommend using Maps.Backgrounds. Map background can be stretched between specific X and Y range, and it renders under IntensitySeries.
Other way is to use a PolygonSeries, with a bitmap fill defined. Define 4 points as polygon points, all the corners. Remember to set polygon.Behind = true.
Other way is to use a PolygonSeries, with a bitmap fill defined. Define 4 points as polygon points, all the corners. Remember to set polygon.Behind = true.
LightningChart Support Team, PT
Re: Insert a background image to the Chart
would you have a sample code for me, I would like use this with the maps.
With my code I get nothing displayed.
For the map I only have a jpg available.
Thank you.
With my code I get nothing displayed.
Code: Select all
//Set background photo
var mb = new MapBackground(lcuChart.ViewXY.Maps);
mb.Image = Image.FromFile(@"C:\Data\Images\TestBackground.jpg");
mb.Visible = true;
lcuChart.ViewXY.Maps.Backgrounds.Add(mb);
//Disable fill, so that background photo can be seen
lcuChart.ViewXY.Maps.LandOptions.FillVisible = false;
Thank you.
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
The map background needs a map to show. Assign a map and hide all the layers for the map... Works, but not very convenient.
Code: Select all
m_chart.BeginUpdate();
// Hide the legend box.
m_chart.ViewXY.LegendBox.Visible = false;
//Setup x-axis
AxisX axisX = m_chart.ViewXY.XAxes[0];
axisX.ValueType = AxisValueType.Number;
axisX.SetRange(-20, 20);
AxisY axisY = m_chart.ViewXY.YAxes[0];
axisY.ValueType = AxisValueType.Number;
axisY.SetRange(30, 50);
LightningChartUltimate.Maps.MapBackground bg = new LightningChartUltimate.Maps.MapBackground(m_chart.ViewXY.Maps);
bg.LongitudeMin = -20;//XMin
bg.LongitudeMax = 20;//XMax
bg.LatitudeMin = 30; //YMin
bg.LatitudeMax = 50; //YMax
bg.Visible = true;
bg.Image = Image.FromFile(@"C:\Data\Images\TestBackground.jpg");
//Background won't show if no map is assigned.
m_chart.ViewXY.Maps.Backgrounds.Add(bg);
m_chart.ViewXY.Maps.Path = @"c:\Data\Maps";
m_chart.ViewXY.Maps.Type = LightningChartUltimate.Maps.Map.MapType.EuropeLow;
foreach (MapLayer layer in m_chart.ViewXY.Maps.Layers)
{
layer.Visible = false;
}
//Allow chart rendering
m_chart.EndUpdate();
LightningChart Support Team, PT
Re: Insert a background image to the Chart
I have to assign a problem with the Map Type.
The sequence, in Visual Studio stops at the place and not running further.
The sequence, in Visual Studio stops at the place and not running further.
Code: Select all
lcuChart.ViewXY.Maps.Type = Map.MapType.EuropeLow;
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
The map path is probably wrong. Always let the maps know where to find the .md files.
LightningChart Support Team, PT
Re: Insert a background image to the Chart
How can I transpose if I can not change the Map Path?
I Set the Map Type in the designer with the Properties, Does the representation of the background image.
However, it is no longer the PixelMap Shown as PixelMap!
I Set the Map Type in the code, the program flow is stopped!
However, it should be possible to be the background image displayed when needed.
I also have the problem when I zoom out everything and then want to zoom in again does not work.
I Set the Map Type in the designer with the Properties, Does the representation of the background image.
However, it is no longer the PixelMap Shown as PixelMap!
I Set the Map Type in the code, the program flow is stopped!
However, it should be possible to be the background image displayed when needed.
I also have the problem when I zoom out everything and then want to zoom in again does not work.
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
I re-tested and my code worked.
Please use a Polygon with a bitmap fill instead of the map background.
Please use a Polygon with a bitmap fill instead of the map background.
LightningChart Support Team, PT
Re: Insert a background image to the Chart
Hello Pasi,
Thanks for the reply, I can now see the background image on the polygon.
But I have another problem, namely the shift of PixelMap the background is different. It does not remain at the initial position and moves with the PixelMap. Also, the zoom, the Background Image behaves differently.
Why?
Thanks for the reply, I can now see the background image on the polygon.
But I have another problem, namely the shift of PixelMap the background is different. It does not remain at the initial position and moves with the PixelMap. Also, the zoom, the Background Image behaves differently.
Why?
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
Polygon fill is limited to visible area, and eventually this may not be a working solution for you if you must allow it falling outside axes.
I'll make you a sample project tonight, with bitmap background bound to axis values, and a heatmap over it.
I'll make you a sample project tonight, with bitmap background bound to axis values, and a heatmap over it.
LightningChart Support Team, PT
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
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.
When enabling the other intensity grid series on the front, it looks like this: Full code here:
Code needs background.png file, which is here:
Here, a background image is positioned from x range 10...60, y range 20...80.
When enabling the other intensity grid series on the front, it looks like this: 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:
- Attachments
-
- background.png (305.46 KiB) Viewed 43400 times
LightningChart Support Team, PT
Re: Insert a background image to the Chart
Hello Pasi,
it works great, just as I wanted it.
Thanks!
it works great, just as I wanted it.
Thanks!
Re: Insert a background image to the Chart
Hello Pasi,
now I have the same requirement for the 3D representation of the object SurfaceGridSeries3D.
It is at the bottom (primary X, Z) of an image to be displayed.
How can I best transpose?
now I have the same requirement for the 3D representation of the object SurfaceGridSeries3D.
It is at the bottom (primary X, Z) of an image to be displayed.
How can I best transpose?
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
For 3D, you can use another SurfaceGridSeries3D, with Fill = Bitmap.
Or use Rectangle3D with a bitmap fill.
Or use Rectangle3D with a bitmap fill.
LightningChart Support Team, PT
Re: Insert a background image to the Chart
I tried to include the background image on a new SurfaceGridSeries3D.
code:
it was shown me nothing.
Then I tried the background image to include as for the IntensityGridSeries, as I have in the upper code no possibility to limit image size.
code:
This has, unfortunately, does not work.
Then I tried to include the background image on a Rectangle3D.
code:
This also does not work.
What I have overlooked
code:
Code: Select all
SurfaceGridSeries3D surfaceGridSeriesBackground = new SurfaceGridSeries3D(lcuChart.View3D, Axis3DBinding.Primary, Axis3DBinding.Primary, Axis3DBinding.Primary);
surfaceGridSeriesBackground.Fill = SurfaceFillStyle.Bitmap;
surfaceGridSeriesBackground.BitmapFill.Image = backgroundImage;
surfaceGridSeriesBackground.MouseInteraction = true;
surfaceGridSeriesBackground.MouseHighlight = MouseOverHighlight.None;
surfaceGridSeriesBackground.Title.ShowInLegendBox = false;
return surfaceGridSeriesBackground;
Then I tried the background image to include as for the IntensityGridSeries, as I have in the upper code no possibility to limit image size.
code:
Code: Select all
SurfaceGridSeries3D surfaceGridSeriesBackground = new SurfaceGridSeries3D(lcuChart.View3D, Axis3DBinding.Primary, Axis3DBinding.Primary, Axis3DBinding.Primary);
surfaceGridSeriesBackground.SetHeightDataFromBitmap(imagePosition.X, imagePosition.X + imagePosition.Width, imagePosition.Y, imagePosition.Y + imagePosition.Height, 0, 100, backgroundImage, null, false);
surfaceGridSeriesBackground.Fill = SurfaceFillStyle.FromSurfacePoints;
surfaceGridSeriesBackground.MouseInteraction = true;
surfaceGridSeriesBackground.MouseHighlight = MouseOverHighlight.None;
surfaceGridSeriesBackground.Title.ShowInLegendBox = false;
return surfaceGridSeriesBackground;
Then I tried to include the background image on a Rectangle3D.
code:
Code: Select all
Rectangle3D rectangle3DBackground = new Rectangle3D(lcuChart.View3D, Axis3DBinding.Primary, Axis3DBinding.Primary, Axis3DBinding.Primary);
rectangle3DBackground.Center.SetValues(lcuChart.View3D.Dimensions.X / 2, lcuChart.View3D.Dimensions.Y / 2, lcuChart.View3D.Dimensions.Z / 2);
rectangle3DBackground.Size.Width = lcuChart.View3D.Dimensions.X;
rectangle3DBackground.Size.Height = lcuChart.View3D.Dimensions.Z;
rectangle3DBackground.Fill.Image = backgroundImage;
rectangle3DBackground.Fill.UseImage = true;
rectangle3DBackground.Rotation.SetValues(0, 0, 0);
rectangle3DBackground.MouseHighlight = MouseOverHighlight.None;
return rectangle3DBackground;
What I have overlooked
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
It seems you forgot to add the surface to series collection, or at least they don't show here.
chart.View3D.SurfaceGridSeries3D.Add(surfaceGridSeriesBackground);
chart.View3D.Rectangles.Add(rectangle3DBackground);
Set surfaceGridSeriesBackground.Fill.Style = Bitmap.
and set the image in surfaceGridSeriesBackground.BitmapFill.Image
chart.View3D.SurfaceGridSeries3D.Add(surfaceGridSeriesBackground);
chart.View3D.Rectangles.Add(rectangle3DBackground);
Set surfaceGridSeriesBackground.Fill.Style = Bitmap.
and set the image in surfaceGridSeriesBackground.BitmapFill.Image
LightningChart Support Team, PT
Re: Insert a background image to the Chart
The add function I call, that was just the excerpt from the method.
Set surfaceGridSeriesBackground.Fill.Style = Bitmap.
and set the image in surfaceGridSeriesBackground.BitmapFill.Image
I have already tried the first code sample.
Set surfaceGridSeriesBackground.Fill.Style = Bitmap.
and set the image in surfaceGridSeriesBackground.BitmapFill.Image
I have already tried the first code sample.
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
You can easily experiment with the DemoApp. Select and example containing a surface grid series. Go to properties tab, and find the surface there. Assign a BitmapFill.Image from any photo, and set Fill=Bitmap.
LightningChart Support Team, PT
Re: Insert a background image to the Chart
I have got it right, it works now.
The error was because no SetRangesXZ and no SetSize was handed over and the scale did not start from 0.
But I have another problem and although Shown the background image is very bright and very white. Is there a setting option to the original image to be depicted?
The error was because no SetRangesXZ and no SetSize was handed over and the scale did not start from 0.
But I have another problem and although Shown the background image is very bright and very white. Is there a setting option to the original image to be depicted?
- ArctionPasi
- Posts: 1367
- Joined: Tue Mar 26, 2013 10:57 pm
- Location: Finland
- Contact:
Re: Insert a background image to the Chart
set surface.ColorSaturation = 90 ... 100.
LightningChart Support Team, PT