ASP.net Chart dissapears for a second

Hi
I am using the code at the bottom to add a chart to a panel which is within an update panel that has a timer inside
it as shown by the following markup. My problem is that the graph disappears momentarily as can be seen at www.online-excel.com where the website is. What techniques or tricks can I use to have the newly generated chart transition smoothly from the last one. Charts are generated as images so perhaps using an image?

   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Timer ID="Timer2" runat="server" Interval="5000">
                </asp:Timer>
                <asp:Table ID="Table1" runat="server">
                <asp:TableRow>
                <asp:TableCell>
                    <asp:Panel ID="Panel1" runat="server">
                    </asp:Panel>
                </asp:TableCell>
                </asp:TableRow>
                </asp:Table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer2" />
            </Triggers>
        </asp:UpdatePanel>

    Sub oAdd_Random_Chart()

        Try

            ' Initialize the Chart object    
            Dim chart1 As New Chart()
            chart1.ID = "chart1"

            'Add to do code here

            ' Initialize objects and elements
            Dim chartArea1 As New ChartArea()
            Dim legend1 As New Legend()
            Dim series1 As New Series()
            Dim series2 As New Series()
            Dim series3 As New Series()
            Dim series4 As New Series()
            Dim series5 As New Series()

            ' Set the Chart Properties
            chart1.Width = 900
            chart1.Height = 340

            chart1.BackColor = System.Drawing.Color.Navy
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

            chart1.BorderlineColor = System.Drawing.Color.Gray
            'chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderlineWidth = 4
            chart1.BackGradientStyle = GradientStyle.LeftRight

            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.SlateGray
            chartArea1.BackGradientStyle = GradientStyle.LeftRight

            'Enable AJAX features such as zooming and scrolling for the ChartArea
            'chartArea1.CursorX.UserEnabled = True
            'chartArea1.CursorY.UserEnabled = True

            ' Add the ChartArea to the Chart
            chart1.ChartAreas.Add(chartArea1)

            ' Set the Legend properties
            legend1.Name = "Default"
            legend1.Docking = Docking.Bottom
            legend1.LegendStyle = LegendStyle.Row
            legend1.Alignment = System.Drawing.StringAlignment.Center

            legend1.BackColor = System.Drawing.Color.Transparent
            legend1.BorderColor = System.Drawing.Color.Black
            legend1.BorderWidth = 1

            ' Add the Legend to the Chart
            chart1.Legends.Add(legend1)

            ' Set the Series properties
            series1.Name = "Store 1"
            series1.ChartType = SeriesChartType.Line
            series1.BorderColor = Drawing.Color.Black
            series1.BorderWidth = 3
            'following two lines used to change series line colors....
            series1.EmptyPointStyle.Color = Drawing.Color.Transparent
            series1.Color = Drawing.Color.DodgerBlue

            series2.Name = "Store 2"
            series2.BorderColor = System.Drawing.Color.DarkSlateGray
            series2.BorderWidth = 3
            series2.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series2.EmptyPointStyle.Color = Drawing.Color.Transparent
            series2.Color = Drawing.Color.Green

            series3.Name = "Store 3"
            series3.BorderWidth = 3
            series3.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series3.EmptyPointStyle.Color = Drawing.Color.Transparent
            series3.Color = Drawing.Color.Red


            series4.Name = "Store 4"
            series4.BorderWidth = 3
            series4.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series4.EmptyPointStyle.Color = Drawing.Color.Transparent
            series4.Color = Drawing.Color.Olive


            series5.Name = "Store 5"
            series5.BorderWidth = 3
            series5.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series5.EmptyPointStyle.Color = Drawing.Color.Transparent
            series5.Color = Drawing.Color.MintCream

            ' Add the Series to the Chart
            chart1.Series.Add(series1)
            chart1.Series.Add(series2)
            chart1.Series.Add(series3)
            chart1.Series.Add(series4)
            chart1.Series.Add(series5)

            ' Add points to each series.
            Dim rnd As New Random()
            Dim S As String = "Laptops,Desktops,Cameras,Smart Phones,Phones,Batteries,Computer Bags,Camera Bags,Accessories,Airtime,Modems,Memory Sticks,3g USB Modems"
            Dim arrSplit As Object = Split(S, ",")
            Dim oNewRandomNumber As String

            For Each ser As Series In chart1.Series
                For i As Integer = 0 To 12
                    'ser.Points.AddY(rnd.[Next](5, 10))
                    oNewRandomNumber = rnd.[Next](0, 100)
                    If ser.Name = "Store 1" Then
                        oNewRandomNumber = oNewRandomNumber * 0.5
                    ElseIf ser.Name = "Store 2" Then
                        oNewRandomNumber = oNewRandomNumber * 0.7
                    ElseIf ser.Name = "Store 3" Then
                        oNewRandomNumber = oNewRandomNumber * 0.9
                    ElseIf ser.Name = "Store 4" Then
                        oNewRandomNumber = oNewRandomNumber * 0.3
                    ElseIf ser.Name = "Store 5" Then
                        oNewRandomNumber = oNewRandomNumber * 0.6
                    End If
                    ser.Points.AddXY(arrSplit(i), oNewRandomNumber)
                Next
            Next

            Dim oTitle As String = "Sales Activity Across Stores"
            chart1.Titles.Add(New Title(oTitle, Docking.Top, New Font("Century Gothic", 13, FontStyle.Regular), Drawing.Color.White))
            'Preserve the chart's state during callbacks
            'chart1.CallbackStateContent = CallbackStateContent.All

            'Dim up2 As New UpdatePanel
            'up2.ContentTemplateContainer.Controls.Add(chart1)
            'Table2.Rows(0).Cells(0).Controls.Add(up2)
            Me.Panel1.Controls.Add(chart1)
        Catch ex As Exception
            Response.Write(ex.Message & " tre34")
        End Try
    End Sub



    Protected Sub Timer2_Tick(sender As Object, e As EventArgs) Handles Timer2.Tick
        oAdd_Random_Chart()
    End Sub
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David Johnson, CD, MVPOwnerCommented:
Charts are generated as images so perhaps using an image?
I would use images and if they are clickable then the click should show the actual chart
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks. How would I know what the chart image name is
0
Robert SchuttSoftware EngineerCommented:
I'm not sure where the image click is going but I have a different solution for you. It uses a canvas to hide the 'blinking' chart. Some may say that's an awful way to solve this and rightfully so. But it does do the job, although users with older browsers that don't support canvas would still have the problem.

I made it so that you can have more than 1 on a page and made some options just to show what more you could do with it. In the head you find a script that could go in a generic (external) .js file, at the end of the body you find the call to create the 'overlay'. Those 2 bits should be all you need (and the rest including code behind I left untouched) but I post the whole aspx here to show the context:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> EE Q_28494372 </title>
    <script type="text/javascript">
        var imageCopier = function (opts) {
            var that = this;

            opts = opts || {};
            that._id = opts.id || 'chart1';
            that._intrvl = opts.interval || 500;
            that._fade = opts.fade || false;
            that._scaleX = opts.scaleX || 1;
            that._scaleY = opts.scaleY || 1;
            that._offsetX = opts.offsetX || 0;
            that._offsetY = opts.offsetY || 0;
            that._ctx = null;
            that._ofs = null;

            this.getOffset = function (elm) {
                var ret = { left: 0, top: 0 };

                do {
                    ret.left += elm.offsetLeft;
                    ret.top += elm.offsetTop;
                    elm = elm.offsetParent;
                } while (elm != null);
                return ret;
            };

            this.copyImage = function () {
                var cnv = null,
                    img = null;

                try {
                    img = document.getElementById(that._id);
                    if (img.complete) { // skip when it's loading a new image
                        if (that._ofs == null) { // first time
                            that._ofs = that.getOffset(img);
                            //that._ofs.left += 250; // uncomment this to make visible what's happening...
                            that._ofs.left += that._offsetX;
                            that._ofs.top += that._offsetY;
                            cnv = document.createElement('canvas');
                            cnv.style.position = 'absolute';
                            cnv.style.left = that._ofs.left + 'px';
                            cnv.style.top = that._ofs.top + 'px';
                            //cnv.id = 'cnv_' + that._id;
                            cnv.width = img.width * that._scaleX;
                            cnv.height = img.height * that._scaleY;
                            document.body.appendChild(cnv);
                            that._ctx = cnv.getContext("2d");
                        }
                        if (that._fade) { // new image will fade in
                            that._ctx.globalAlpha = 0.3;
                        } else { // new image will replace existing image
                            that._ctx.clearRect(0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                        }
                        that._ctx.drawImage(img, 0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                    }
                } catch (e) {
                    // ignore
                }
            };

            // start main loop to check for chart image
            setInterval(that.copyImage, that._intrvl);

        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Timer ID="Timer1" runat="server" Interval="2000">
        </asp:Timer>
        <div>
            test test test <br />
            test test test <br />
            test test test <br />
            ... <br />
            test test test <br />
            test test test <br />
            test test test <br />
            <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Table ID="Table2" runat="server">
                    <asp:TableRow>
                    <asp:TableCell></asp:TableCell>
                    </asp:TableRow>
                    </asp:Table>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                </Triggers>
            </asp:UpdatePanel>
            <script type="text/javascript">
                var imageCopier1 = new imageCopier();
                var imageCopier2 = new imageCopier({ id: 'chart1', interval: 100, fade: true, scaleX: 0.5, scaleY: 0.5, offsetX: 350, offsetY: -250 });
            </script>
        </div>
    </form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi. I get the error shown in the image. I don't understand JavaScript so have copied the markup as well as the VB.net code that I have after pasting your code in. Not sure how to put this together. Sorry to waste your time but this is immensely important and I think your solution is excellent!

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Charts.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title> EE Q_28494372 </title>
    <script type="text/javascript">
        var imageCopier = function (opts) {
            var that = this;

            opts = opts || {};
            that._id = opts.id || 'chart1';
            that._intrvl = opts.interval || 500;
            that._fade = opts.fade || false;
            that._scaleX = opts.scaleX || 1;
            that._scaleY = opts.scaleY || 1;
            that._offsetX = opts.offsetX || 0;
            that._offsetY = opts.offsetY || 0;
            that._ctx = null;
            that._ofs = null;

            this.getOffset = function (elm) {
                var ret = { left: 0, top: 0 };

                do {
                    ret.left += elm.offsetLeft;
                    ret.top += elm.offsetTop;
                    elm = elm.offsetParent;
                } while (elm != null);
                return ret;
            };

            this.copyImage = function () {
                var cnv = null,
                    img = null;

                try {
                    img = document.getElementById(that._id);
                    if (img.complete) { // skip when it's loading a new image
                        if (that._ofs == null) { // first time
                            that._ofs = that.getOffset(img);
                            //that._ofs.left += 250; // uncomment this to make visible what's happening...
                            that._ofs.left += that._offsetX;
                            that._ofs.top += that._offsetY;
                            cnv = document.createElement('canvas');
                            cnv.style.position = 'absolute';
                            cnv.style.left = that._ofs.left + 'px';
                            cnv.style.top = that._ofs.top + 'px';
                            //cnv.id = 'cnv_' + that._id;
                            cnv.width = img.width * that._scaleX;
                            cnv.height = img.height * that._scaleY;
                            document.body.appendChild(cnv);
                            that._ctx = cnv.getContext("2d");
                        }
                        if (that._fade) { // new image will fade in
                            that._ctx.globalAlpha = 0.3;
                        } else { // new image will replace existing image
                            that._ctx.clearRect(0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                        }
                        that._ctx.drawImage(img, 0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                    }
                } catch (e) {
                    // ignore
                }
            };

            // start main loop to check for chart image
            setInterval(that.copyImage, that._intrvl);

        };

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Timer ID="Timer1" runat="server" Interval="2000">
        </asp:Timer>
        <div>
            test test test <br />
            test test test <br />
            test test test <br />
            ... <br />
            test test test <br />
            test test test <br />
            test test test <br />
            <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Table ID="Table2" runat="server">
                    <asp:TableRow>
                    <asp:TableCell></asp:TableCell>
                    </asp:TableRow>
                    </asp:Table>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />
                </Triggers>
            </asp:UpdatePanel>
            <script type="text/javascript">
                var imageCopier1 = new imageCopier();
                var imageCopier2 = new imageCopier({ id: 'chart1', interval: 100, fade: true, scaleX: 0.5, scaleY: 0.5, offsetX: 350, offsetY: -250 });
            </script>
        </div>
        <asp:Panel ID="Panel1" runat="server">
        </asp:Panel>
    </form>
</body>
</html>

Open in new window


Imports System.Drawing
Imports System.Data.SqlClient

Imports System.Web.UI.DataVisualization.Charting.Series
Imports System.Web.UI.DataVisualization.Charting
Imports System.Web.UI.DataVisualization.Charting.DataPointCustomProperties

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Sub oAdd_Random_Chart()

        Try

            ' Initialize the Chart object    
            Dim chart1 As New Chart()
            chart1.ID = "chart1"

            'Add to do code here

            ' Initialize objects and elements
            Dim chartArea1 As New ChartArea()
            Dim legend1 As New Legend()
            Dim series1 As New Series()
            Dim series2 As New Series()
            Dim series3 As New Series()
            Dim series4 As New Series()
            Dim series5 As New Series()

            ' Set the Chart Properties
            chart1.Width = 900
            chart1.Height = 340

            chart1.BackColor = System.Drawing.Color.Navy
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

            chart1.BorderlineColor = System.Drawing.Color.Gray
            'chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderlineWidth = 4
            chart1.BackGradientStyle = GradientStyle.LeftRight

            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.SlateGray
            chartArea1.BackGradientStyle = GradientStyle.LeftRight

            'Enable AJAX features such as zooming and scrolling for the ChartArea
            'chartArea1.CursorX.UserEnabled = True
            'chartArea1.CursorY.UserEnabled = True

            ' Add the ChartArea to the Chart
            chart1.ChartAreas.Add(chartArea1)

            ' Set the Legend properties
            legend1.Name = "Default"
            legend1.Docking = Docking.Bottom
            legend1.LegendStyle = LegendStyle.Row
            legend1.Alignment = System.Drawing.StringAlignment.Center

            legend1.BackColor = System.Drawing.Color.Transparent
            legend1.BorderColor = System.Drawing.Color.Black
            legend1.BorderWidth = 1

            ' Add the Legend to the Chart
            chart1.Legends.Add(legend1)

            ' Set the Series properties
            series1.Name = "Store 1"
            series1.ChartType = SeriesChartType.Line
            series1.BorderColor = Drawing.Color.Black
            series1.BorderWidth = 3
            'following two lines used to change series line colors....
            series1.EmptyPointStyle.Color = Drawing.Color.Transparent
            series1.Color = Drawing.Color.DodgerBlue

            series2.Name = "Store 2"
            series2.BorderColor = System.Drawing.Color.DarkSlateGray
            series2.BorderWidth = 3
            series2.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series2.EmptyPointStyle.Color = Drawing.Color.Transparent
            series2.Color = Drawing.Color.Green

            series3.Name = "Store 3"
            series3.BorderWidth = 3
            series3.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series3.EmptyPointStyle.Color = Drawing.Color.Transparent
            series3.Color = Drawing.Color.Red


            series4.Name = "Store 4"
            series4.BorderWidth = 3
            series4.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series4.EmptyPointStyle.Color = Drawing.Color.Transparent
            series4.Color = Drawing.Color.Olive


            series5.Name = "Store 5"
            series5.BorderWidth = 3
            series5.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series5.EmptyPointStyle.Color = Drawing.Color.Transparent
            series5.Color = Drawing.Color.MintCream

            ' Add the Series to the Chart
            chart1.Series.Add(series1)
            chart1.Series.Add(series2)
            chart1.Series.Add(series3)
            chart1.Series.Add(series4)
            chart1.Series.Add(series5)

            ' Add points to each series.
            Dim rnd As New Random()
            Dim S As String = "Laptops,Desktops,Cameras,Smart Phones,Phones,Batteries,Computer Bags,Camera Bags,Accessories,Airtime,Modems,Memory Sticks,3g USB Modems"
            Dim arrSplit As Object = Split(S, ",")
            Dim oNewRandomNumber As String

            For Each ser As Series In chart1.Series
                For i As Integer = 0 To 12
                    'ser.Points.AddY(rnd.[Next](5, 10))
                    oNewRandomNumber = rnd.[Next](0, 100)
                    If ser.Name = "Store 1" Then
                        oNewRandomNumber = oNewRandomNumber * 0.5
                    ElseIf ser.Name = "Store 2" Then
                        oNewRandomNumber = oNewRandomNumber * 0.7
                    ElseIf ser.Name = "Store 3" Then
                        oNewRandomNumber = oNewRandomNumber * 0.9
                    ElseIf ser.Name = "Store 4" Then
                        oNewRandomNumber = oNewRandomNumber * 0.3
                    ElseIf ser.Name = "Store 5" Then
                        oNewRandomNumber = oNewRandomNumber * 0.6
                    End If
                    ser.Points.AddXY(arrSplit(i), oNewRandomNumber)
                Next
            Next

            Dim oTitle As String = "Sales Activity Across Stores"
            chart1.Titles.Add(New Title(oTitle, Docking.Top, New Font("Century Gothic", 13, FontStyle.Regular), Drawing.Color.White))
            'Preserve the chart's state during callbacks
            'chart1.CallbackStateContent = CallbackStateContent.All

            Dim up2 As New UpdatePanel
            up2.ContentTemplateContainer.Controls.Add(chart1)
            'Panel1.Controls.Add(up2)
            'Me.Panel1.Controls.Add(chart1)
            Panel1.Controls.Add(up2)
        Catch ex As Exception
            Response.Write(ex.Message & " tre34")
        End Try
    End Sub

    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        oAdd_Random_Chart()
    End Sub

End Class

Open in new window

0
Robert SchuttSoftware EngineerCommented:
I was working with the code that adds the chart to a table in the update panel:
Table2.Rows(0).Cells(0).Controls.Add(chart1)

Open in new window

0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
I just replaced the Table cell with Panel1. It's the same code
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Actually. Sorry I stand corrected. Will post that code soon
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi. Here is the markup and code. Its the project that I used in my original post.
I have uploaded it to www.online-excel.com and even with your java script the graph still flickers

<%@ Page Title="Self Service Business Intelligence" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="Online_Excel._Default" MaintainScrollPositionOnPostback="true" %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />
   
    <style type="text/css">
        .style1
        {
            height: 21px;
        }
        
.imageHover
        { 
            border:5px  solid #eee;
        }

 .imageHover:hover
        { 
            border:5px solid lightgrey;
        }
     #I3
     {
         height: 1233px;
     }
    </style> 

       <script type="text/javascript">
           var imageCopier = function (opts) {
               var that = this;

               opts = opts || {};
               that._id = opts.id || 'chart1';
               that._intrvl = opts.interval || 500;
               that._fade = opts.fade || false;
               that._scaleX = opts.scaleX || 1;
               that._scaleY = opts.scaleY || 1;
               that._offsetX = opts.offsetX || 0;
               that._offsetY = opts.offsetY || 0;
               that._ctx = null;
               that._ofs = null;

               this.getOffset = function (elm) {
                   var ret = { left: 0, top: 0 };

                   do {
                       ret.left += elm.offsetLeft;
                       ret.top += elm.offsetTop;
                       elm = elm.offsetParent;
                   } while (elm != null);
                   return ret;
               };

               this.copyImage = function () {
                   var cnv = null,
                    img = null;

                   try {
                       img = document.getElementById(that._id);
                       if (img.complete) { // skip when it's loading a new image
                           if (that._ofs == null) { // first time
                               that._ofs = that.getOffset(img);
                               //that._ofs.left += 250; // uncomment this to make visible what's happening...
                               that._ofs.left += that._offsetX;
                               that._ofs.top += that._offsetY;
                               cnv = document.createElement('canvas');
                               cnv.style.position = 'absolute';
                               cnv.style.left = that._ofs.left + 'px';
                               cnv.style.top = that._ofs.top + 'px';
                               //cnv.id = 'cnv_' + that._id;
                               cnv.width = img.width * that._scaleX;
                               cnv.height = img.height * that._scaleY;
                               document.body.appendChild(cnv);
                               that._ctx = cnv.getContext("2d");
                           }
                           if (that._fade) { // new image will fade in
                               that._ctx.globalAlpha = 0.3;
                           } else { // new image will replace existing image
                               that._ctx.clearRect(0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                           }
                           that._ctx.drawImage(img, 0, 0, that._ctx.canvas.width, that._ctx.canvas.height);
                       }
                   } catch (e) {
                       // ignore
                   }
               };

               // start main loop to check for chart image
               setInterval(that.copyImage, that._intrvl);

           };

    </script>


    </asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
      <asp:ScriptManager ID="ScriptManager1" 
                               runat="server" /> 
 
    <br />
      <asp:Panel ID="Panel_Top" runat="server" Height="218px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="5000">
                </asp:Timer>
                <asp:Table ID="Table2" runat="server">
                <asp:TableRow>
                <asp:TableCell>
                    <asp:Panel ID="Panel3" runat="server">
                    </asp:Panel>
                </asp:TableCell>
                </asp:TableRow>
                </asp:Table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" />
            </Triggers>
        </asp:UpdatePanel>
      </asp:Panel>
      <br />
    <br />

    <table>
            <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink1" runat="server" 
            NavigateUrl="~/Excel_and_Databases.aspx">RAPID-FIRE AUTO-INVOICING</asp:HyperLink>
                </td>
    <td></td>
    <td class="style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="~/Cloud Database Query And Editing Tool.aspx">EXCEL CLOUD DATABASE SOLUTIONS</asp:HyperLink>
                </td>
    <td></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Video1.aspx">LIVE WEB DASHBOARDS BUILT IN EXCEL</asp:HyperLink>
                </td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
              <asp:ImageButton ID="ImageButton1" class="imageHover" runat="server" ImageUrl="~/Resources/AutoInv.jpg" PostBackUrl="~/Excel_and_Databases.aspx"
                    Width="282px" Height="188px" CssClass="imageHover" />
        </td>
    <td></td>
    <td class="style2">
        <asp:ImageButton ID="ImageButton2" class="imageHover" runat="server" ImageUrl="~/Resources/Cloud_Hub.jpg" PostBackUrl="~/Cloud Database Query And Editing Tool.aspx"
                    Width="282px" Height="188px" CssClass="imageHover" />
        </td>
    <td></td>
    <td>

        <asp:ImageButton ID="ImageButton6" class="imageHover" runat="server" 
             ImageUrl="~/Resources/chart 1.jpg" PostBackUrl="~/Default.aspx#DataVisualization"
                    Width="282px" Height="188px" CssClass="imageHover" />
        </td>
    <td></td>
    <td></td>
    </tr>
        <tr>
    <td></td>
    <td></td>
    <td class="style2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
            <tr>
    <td class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Video8.aspx">SUPERCHARGED DETAILED QUOTING</asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Video10.aspx">MANAGE CLOUD (SQL) DATA IN EXCEL</asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style1">
        <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Video9.aspx">IN-SPREADSHEET EDITING OF CLOUD/ SQL DATA </asp:HyperLink>
                </td>
    <td class="style1"></td>
    <td class="style1"></td>
    </tr>
            <tr>
    <td>
                     <asp:ImageButton ID="ImageButton4" class="imageHover" runat="server" ImageUrl="~/Resources/QPane2.jpg" PostBackUrl="~/Video8.aspx"
                    Width="282px" Height="188px" CssClass="imageHover" />
                </td>
    <td></td>
    <td class="style2">
               <asp:ImageButton ID="ImageButton5" class="imageHover" runat="server" ImageUrl="~/Resources/DB_Mirror2.jpg" PostBackUrl="~/Video10.aspx"
                    Width="282px" Height="188px" CssClass="imageHover" />
                </td>
          
    <td></td>
    <td>
                          <asp:ImageButton ID="ImageButton6a" class="imageHover" runat="server" ImageUrl="~/Resources/In-Spreadsheet Editing.jpg" PostBackUrl="~/Video9.aspx"
                    Width="282px" Height="188px" CssClass="imageHover" />     
                </td>
          
    <td></td>
    <td></td>
    </tr>

    </table>
      <h4 id="DataVisualization">
          ..</h4>

      <asp:Label ID="Label2" runat="server" Font-Names="Century Gothic" 
          ForeColor="#999999" 
          
          Text="The following chart shows a simulation of real-time Data Visualization from a cloud hub:" 
          Font-Size="Small"></asp:Label>
 
      <br />

      <table>
      <tr>
      <td>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Timer ID="Timer2" runat="server" Interval="5000">
                </asp:Timer>
                <asp:Table ID="Table1" runat="server">
                <asp:TableRow>
                <asp:TableCell>
                    <asp:Panel ID="Panel1" runat="server">
                    </asp:Panel>
                </asp:TableCell>
                </asp:TableRow>
                </asp:Table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer2" />
            </Triggers>
        </asp:UpdatePanel>
      </td>
      <td>
          <asp:Panel ID="Panel2" runat="server" Height="375px" 
              Width="15px">
          </asp:Panel>
      </td>
      </tr>
      </table>
      <br />
    <asp:Label ID="Label1" runat="server" 
          Text="© Copyright 2014 Online-Excel Solutions (Pty) Ltd. "></asp:Label>
 
</asp:Content>

Open in new window


    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        oAdd_Random_Chart2()
    End Sub



    Sub oAdd_Random_Chart2()

        Try

            ' Initialize the Chart object    
            Dim chart1 As New Chart()
            chart1.ID = "chart1"

            'Add to do code here

            ' Initialize objects and elements
            Dim chartArea1 As New ChartArea()
            Dim legend1 As New Legend()
            Dim series1 As New Series()
            Dim series2 As New Series()
            Dim series3 As New Series()
            Dim series4 As New Series()
            Dim series5 As New Series()
            Dim series6 As New Series()

            ' Set the Chart Properties
            chart1.Width = 900
            chart1.Height = 250

            chart1.BackColor = System.Drawing.Color.Silver
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

            chart1.BorderlineColor = System.Drawing.Color.Silver
            'chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderlineWidth = 4
            chart1.BackGradientStyle = GradientStyle.LeftRight

            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.LightSlateGray
            chartArea1.BackGradientStyle = GradientStyle.LeftRight

            'Enable AJAX features such as zooming and scrolling for the ChartArea
            'chartArea1.CursorX.UserEnabled = True
            'chartArea1.CursorY.UserEnabled = True

            ' Add the ChartArea to the Chart
            chart1.ChartAreas.Add(chartArea1)

            ' Set the Legend properties
            legend1.Name = "Default"
            legend1.Docking = Docking.Bottom
            legend1.LegendStyle = LegendStyle.Row
            legend1.Alignment = System.Drawing.StringAlignment.Center

            legend1.BackColor = System.Drawing.Color.Transparent
            legend1.BorderColor = System.Drawing.Color.Black
            legend1.BorderWidth = 1

            ' Add the Legend to the Chart
            chart1.Legends.Add(legend1)

            ' Set the Series properties
            series1.Name = "Product Range 1"
            series1.ChartType = SeriesChartType.Line
            series1.BorderWidth = 3
            'following two lines used to change series line colors....
            series1.EmptyPointStyle.Color = Drawing.Color.Transparent
            series1.Color = Drawing.Color.Green
            'series1.BorderColor = Drawing.Color.Beige
            series1.BackGradientStyle = GradientStyle.LeftRight

            series2.Name = "Product Range 2"
            series2.BorderWidth = 3
            series2.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series2.EmptyPointStyle.Color = Drawing.Color.Transparent
            series2.Color = Drawing.Color.Blue
            'series2.BorderColor = Drawing.Color.DarkTurquoise
            series2.BackGradientStyle = GradientStyle.LeftRight

            series3.Name = "Product Range 3"
            series3.BorderWidth = 3
            'series3.ChartType = SeriesChartType.Line
            series3.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series3.EmptyPointStyle.Color = Drawing.Color.Transparent
            series3.Color = Drawing.Color.Navy
            'series3.BorderColor = Drawing.Color.Orange
            series3.BackGradientStyle = GradientStyle.LeftRight


            series4.Name = "Division A"
            series4.BorderWidth = 3
            series4.ChartType = SeriesChartType.Column
            'following two lines used to change series line colors....
            series4.EmptyPointStyle.Color = Drawing.Color.Transparent
            series4.Color = Drawing.Color.SlateGray
            'series4.BorderColor = Drawing.Color.SlateGray
            series4.BackGradientStyle = GradientStyle.LeftRight

            series5.Name = "Division B"
            series5.BorderWidth = 3
            series5.ChartType = SeriesChartType.Column
            'following two lines used to change series line colors....
            series5.EmptyPointStyle.Color = Drawing.Color.Transparent
            series5.Color = Drawing.Color.Navy
            'series5.BorderColor = Drawing.Color.Red
            series5.BackGradientStyle = GradientStyle.LeftRight

            series6.Name = "Division C"
            series6.BorderWidth = 3
            series6.ChartType = SeriesChartType.Column
            'following two lines used to change series line colors....
            series6.EmptyPointStyle.Color = Drawing.Color.Transparent
            series6.Color = Drawing.Color.DarkGreen
            'series5.BorderColor = Drawing.Color.Red
            series6.BackGradientStyle = GradientStyle.LeftRight

            ' Add the Series to the Chart
            chart1.Series.Add(series1)
            chart1.Series.Add(series2)
            chart1.Series.Add(series3)
            chart1.Series.Add(series4)
            chart1.Series.Add(series5)
            chart1.Series.Add(series6)

            ' Add points to each series.
            Dim rnd As New Random()
            Dim S As String = "Region 1,Region 2,Region 3,Region 4,Region 5,Region 6,Region 7,Region 8"
            Dim arrSplit As Object = Split(S, ",")
            Dim oNewRandomNumber As String

            For Each ser As Series In chart1.Series
                For i As Integer = 0 To 7
                    'ser.Points.AddY(rnd.[Next](5, 10))
                    oNewRandomNumber = rnd.[Next](0, 100)
                    If ser.Name = "Product Range 1" Then
                        oNewRandomNumber = oNewRandomNumber * 0.5
                    ElseIf ser.Name = "Product Range 2" Then
                        oNewRandomNumber = oNewRandomNumber * 0.7
                    ElseIf ser.Name = "Product Range 3" Then
                        oNewRandomNumber = oNewRandomNumber * 0.9
                    ElseIf ser.Name = "Division A" Then
                        oNewRandomNumber = oNewRandomNumber * 0.3
                    ElseIf ser.Name = "Division B" Then
                        oNewRandomNumber = oNewRandomNumber * 0.6
                    ElseIf ser.Name = "Division C" Then
                        oNewRandomNumber = oNewRandomNumber * 0.8
                    End If
                    ser.Points.AddXY(arrSplit(i), oNewRandomNumber)
                Next
            Next

            Dim oTitle As String = "Your cloud data visualized on your website & mobile devices - controlled in Microsoft Excel"
            chart1.Titles.Add(New Title(oTitle, Docking.Top, New Font("Century Gothic", 10, FontStyle.Regular), Drawing.Color.ForestGreen))

            chartArea1.AxisY.LabelStyle.Font = New System.Drawing.Font("Century Gothic", 8, FontStyle.Regular)
            chartArea1.AxisX.LabelStyle.Font = New System.Drawing.Font("Century Gothic", 8, FontStyle.Regular)

            Me.Panel3.Controls.Add(chart1)


        Catch ex As Exception
            Response.Write(ex.Message & " tre34")
        End Try
    End Sub

Open in new window

0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much. I may well post a further related question
0
Robert SchuttSoftware EngineerCommented:
You seem to be missing the "new imageCopier()" bit?
0
Robert SchuttSoftware EngineerCommented:
I've seen your new question but I'm not sure this problem warrants a new question so I'll post here, your chart is now being named under 'Master Page rules', maybe you can change that but you can also just use the actual chart id being generated, right before the last line (</asp:Content>) in Default.aspx:
<script type="text/javascript">
    var imageCopier1 = new imageCopier({ id: 'MainContent_chart1', interval: 100, fade: true });
</script>

Open in new window

0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks. Didn't realised I had missed that
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Hi. I have now put that in and will adjust my other question. The site still blinks momentarily. Thanks
0
Robert SchuttSoftware EngineerCommented:
When I look at your live website now you have 2 real-time charts with the same id and only after the first one you have this code:
<script type="text/javascript">
var imageCopier1 = new imageCopier();
var imageCopier2 = new imageCopier({ id: 'chart1', interval: 100, fade: true, scaleX: 0.5, scaleY: 0.5, offsetX: 350, offsetY: -250 });
</script>

Open in new window

which is testing code only, you should move that to the end of your content placeholder code, rename one of the charts (in your code behind, the statement chart1.ID = "chart1") to "chart2" (the name of the variable is irrelevant but the ID is important) and then probably use this code instead of the testing code to accomodate for both charts:
<script type="text/javascript">
    var imageCopier1 = new imageCopier({ id: 'MainContent_chart1', interval: 100, fade: true });
    var imageCopier2 = new imageCopier({ id: 'MainContent_chart2', interval: 100, fade: true });
</script>

Open in new window

0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much Robert! It is working well. Really appreciate you taking the time out to deliver such great feedback.
Murray
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.