Page 1 of 1
Insert a background image to the Chart
Posted: Mon Feb 24, 2014 8:27 am
by Felix
Hello Parsi,
I have a PixelMap, with the data type IntensityGridSeries and an image of the object from which the PixelMap was created.
PixelMap:
![PixelMap](./download/file.php?id=175&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- PixelMap
- Pixel Chart.PNG (29.06 KiB) Viewed 44376 times
Object Image:
![Background Objekt](./download/file.php?id=176&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- Background Objekt
- Background.png (153.11 KiB) Viewed 44376 times
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:
![Result Chart](./download/file.php?id=177&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- Result Chart
- Result Chart.png (76.37 KiB) Viewed 44376 times
Is that possible?
![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
Re: Insert a background image to the Chart
Posted: Mon Feb 24, 2014 10:27 am
by ArctionPasi
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.
Re: Insert a background image to the Chart
Posted: Mon Feb 24, 2014 10:58 am
by Felix
would you have a sample code for me, I would like use this with the maps.
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;
For the map I only have a jpg available.
Thank you.
Re: Insert a background image to the Chart
Posted: Mon Feb 24, 2014 2:16 pm
by ArctionPasi
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();
Re: Insert a background image to the Chart
Posted: Tue Feb 25, 2014 9:56 am
by Felix
I have to assign a problem with the Map Type.
The sequence, in Visual Studio stops at the place and not running further.
Code: Select all
lcuChart.ViewXY.Maps.Type = Map.MapType.EuropeLow;
![Question :?:](./images/smilies/icon_question.gif)
Re: Insert a background image to the Chart
Posted: Tue Feb 25, 2014 10:41 am
by ArctionPasi
The map path is probably wrong. Always let the maps know where to find the .md files.
Re: Insert a background image to the Chart
Posted: Wed Feb 26, 2014 6:23 am
by Felix
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.
Re: Insert a background image to the Chart
Posted: Wed Feb 26, 2014 6:48 am
by ArctionPasi
I re-tested and my code worked.
Please use a Polygon with a bitmap fill instead of the map background.
Re: Insert a background image to the Chart
Posted: Wed Feb 26, 2014 11:17 am
by Felix
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?
![Initial](./download/file.php?id=190&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- Initial
- Initial.PNG (177.57 KiB) Viewed 44334 times
![Move to top](./download/file.php?id=187&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- Move to top
- MovedTop.PNG (175.18 KiB) Viewed 44334 times
![ZoomOut](./download/file.php?id=191&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- ZoomOut
- ZoomOut.PNG (66.32 KiB) Viewed 44334 times
Re: Insert a background image to the Chart
Posted: Wed Feb 26, 2014 12:17 pm
by ArctionPasi
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.
Re: Insert a background image to the Chart
Posted: Wed Feb 26, 2014 3:21 pm
by ArctionPasi
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=3d69eb2e6bebaa99db7a5942b7e779ba)
- Background intensity grid visible
- backgroundOnly.jpg (174.53 KiB) Viewed 44331 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=3d69eb2e6bebaa99db7a5942b7e779ba)
- Background on back and heatmap on the front
- backgroundAndHeatmap.jpg (154.01 KiB) Viewed 44331 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:
Re: Insert a background image to the Chart
Posted: Thu Feb 27, 2014 6:43 am
by Felix
Hello Pasi,
it works great, just as I wanted it.
Thanks!
![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
Re: Insert a background image to the Chart
Posted: Thu Feb 27, 2014 8:41 am
by Felix
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?
![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
Re: Insert a background image to the Chart
Posted: Thu Feb 27, 2014 3:02 pm
by ArctionPasi
For 3D, you can use another SurfaceGridSeries3D, with Fill = Bitmap.
Or use Rectangle3D with a bitmap fill.
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 7:50 am
by Felix
I tried to include the background image on a new SurfaceGridSeries3D.
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;
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:
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;
This has, unfortunately, does not work.
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;
This also does not work.
What I have overlooked
![Question :?:](./images/smilies/icon_question.gif)
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 8:38 am
by ArctionPasi
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
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 8:43 am
by Felix
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.
![Smile :)](./images/smilies/icon_e_smile.gif)
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 8:50 am
by ArctionPasi
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.
![Demo app's Simple surface grid 3D example with bitmap fill](./download/file.php?id=195&sid=3d69eb2e6bebaa99db7a5942b7e779ba)
- Demo app's Simple surface grid 3D example with bitmap fill
- DemoAppBitmapFillOnSurface.jpg (447.38 KiB) Viewed 44311 times
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 10:32 am
by Felix
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?
Re: Insert a background image to the Chart
Posted: Fri Feb 28, 2014 10:47 am
by ArctionPasi
set surface.ColorSaturation = 90 ... 100.