Insert a background image to the Chart

A forum dedicated to WinForms version of LightningChart Ultimate.

Moderator: Queue Moderators

Post Reply
Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Insert a background image to the Chart

Post by Felix » Mon Feb 24, 2014 8:27 am

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
PixelMap
Pixel Chart.PNG (29.06 KiB) Viewed 43314 times
Object Image:
Background Objekt
Background Objekt
Background.png (153.11 KiB) Viewed 43314 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
Result Chart
Result Chart.png (76.37 KiB) Viewed 43314 times
Is that possible?
:D

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Mon Feb 24, 2014 10:27 am

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.
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Mon Feb 24, 2014 10:58 am

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.

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Mon Feb 24, 2014 2:16 pm

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

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Tue Feb 25, 2014 9:56 am

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;
:?:

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Tue Feb 25, 2014 10:41 am

The map path is probably wrong. Always let the maps know where to find the .md files.
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Wed Feb 26, 2014 6:23 am

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.

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Wed Feb 26, 2014 6:48 am

I re-tested and my code worked.

Please use a Polygon with a bitmap fill instead of the map background.
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Wed Feb 26, 2014 11:17 am

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
Initial
Initial.PNG (177.57 KiB) Viewed 43272 times
Move to top
Move to top
MovedTop.PNG (175.18 KiB) Viewed 43272 times
ZoomOut
ZoomOut
ZoomOut.PNG (66.32 KiB) Viewed 43272 times

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Wed Feb 26, 2014 12:17 pm

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.
LightningChart Support Team, PT

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Wed Feb 26, 2014 3:21 pm

Ok, found an easy solution... using another IntensityGridSeries as a background. It really didn't cross my mind earlier. :shock:
Here, a background image is positioned from x range 10...60, y range 20...80.
Background intensity grid visible
Background intensity grid visible
backgroundOnly.jpg (174.53 KiB) Viewed 43269 times
When enabling the other intensity grid series on the front, it looks like this:
Background on back and heatmap on the front
Background on back and heatmap on the front
backgroundAndHeatmap.jpg (154.01 KiB) Viewed 43269 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:
Attachments
background.png
background.png (305.46 KiB) Viewed 43269 times
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Thu Feb 27, 2014 6:43 am

Hello Pasi,

it works great, just as I wanted it.

Thanks!

:D

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Thu Feb 27, 2014 8:41 am

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?
:D

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Thu Feb 27, 2014 3:02 pm

For 3D, you can use another SurfaceGridSeries3D, with Fill = Bitmap.

Or use Rectangle3D with a bitmap fill.
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Fri Feb 28, 2014 7:50 am

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 :?:

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Fri Feb 28, 2014 8:38 am

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
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Fri Feb 28, 2014 8:43 am

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.

:)

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Fri Feb 28, 2014 8:50 am

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
Demo app's Simple surface grid 3D example with bitmap fill
DemoAppBitmapFillOnSurface.jpg (447.38 KiB) Viewed 43249 times
LightningChart Support Team, PT

Felix
Posts: 72
Joined: Tue Oct 29, 2013 8:10 am

Re: Insert a background image to the Chart

Post by Felix » Fri Feb 28, 2014 10:32 am

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.
:ugeek: :lol:

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?

User avatar
ArctionPasi
Posts: 1367
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland
Contact:

Re: Insert a background image to the Chart

Post by ArctionPasi » Fri Feb 28, 2014 10:47 am

set surface.ColorSaturation = 90 ... 100.
LightningChart Support Team, PT

Post Reply