ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Responsive / HTML5
Posted by Raymond on Aug-31-2016 19:42
| Reply | Monitor
Support,

I have been using your wonderful product for some years now.

Background: On my core site I updated it with Bootstrap for a responsive design. In some cases I am using HTML5 based Charting. But for Financial Charts and some Existing Bar Charts I use Chart Director.

I default images on my site to img {max-width:100%} so that it will flex with the containing DIV. This has worked on all sites I built with responsive design in mind.

When I apply this to page with with Chart Director, the Image Width will shrink dynamically but the height stays fixed because of the height= tag.

I know I can use jQuery on Page Resize events to handle it but I am trying to find out if there is a why to make the charts more responsive, and that maybe I need to purchase an upgrade? I am on 5.1.1.0

  Re: Responsive / HTML5
Posted by Peter Kwan on Sep-01-2016 00:07
| Reply | Monitor
Hi Raymond,

Yes, ChartDirector allows for responsive design. The exact details depending on your programming framework. Are you using the ASP.NET framework?

Before there is responsive design, most companies (inclduing Google, Microsoft, etc) suggested the best practice was to include the width and height attributes in the <IMG> tag. This allowed the browser to know how to layout the web page before loading the images. Many frameworks automatically added the width and height attributes, and ChartDirector may automatically add the width and height attributes too.

Due to backwards compatibility reasons, we cannot change this behaviour to avoid breaking our client's web pages. Luckily, we have built-in a method to turn these attributes off. For ASP.NET, there is a WebChartViewer.ChartSizeMode property that you can set to WebChartSizeMode.AutoSizeNoHint to disable the width and height attributes.

http://www.advsofteng.com/doc/cdnet.htm#WebChartViewer.ChartSizeMode.htm

Another method is to use CSS to change the attributes, as modern browsers should support the !important flag. For example:

img {width:100% !important; height:auto !important;}

The !important flag should allow the CSS to override the attributes in the <IMG> tag.

Hope this can help.

Regards
Peter Kwan

  Re: Responsive / HTML5
Posted by Raymond on Sep-01-2016 06:58
| Reply | Monitor
Peter, I appreciate your response. You are correct I am using ASP.NET.

I would like to ask you a follow up... I have converted much of the site to AJAX / JSON. Is there a way to render the chart on the client side via JSON? I have some HTML5 charting tools (DevExtreme) but nothing matches ChartDir for financial charts!

  Re: Responsive / HTML5
Posted by Peter Kwan on Sep-01-2016 23:57
| Reply | Monitor
Hi Raymond,

You can "render" the chart on the client side by asking ChartDirector to output in SVG. However, the chart is still computed and layout on the server side.

Regards
Peter Kwan

  Re: Responsive / HTML5
Posted by Raymond on Sep-03-2016 05:26
| Reply | Monitor
Thank you Peter.

  Re: Responsive / HTML5
Posted by Raymond on Sep-03-2016 05:44
| Reply | Monitor
Peter,

I just attempted to use WebChartViewer.ChartSizeMode.

I failed to mentioned that for my case I am  Response.BinaryWrite() from an ASPX page so I can use it in an ImageTag.

I attempt to set the width and height large (1500x1500) but it does not reneder.

I ended up converting to a byte array to resize.

Just checking if there is a built-in way to handle it when the BinaryWrite() is used.

var byteArr = ResizeImage(c.makeImage());
Response.BinaryWrite(byteArr);

private byte[] ResizeImage(System.Drawing.Image imageToResize)
{
      Decimal percentageOfMaxWidth = (decimal)1000 / imageToResize.Width;
       Decimal percentageOfMaxHeight = (decimal)800 / imageToResize.Height;

      Decimal whatPercentageToUse = percentageOfMaxWidth > percentageOfMaxHeight ? percentageOfMaxHeight : percentageOfMaxWidth;

      System.Drawing.Bitmap newImage = new System.Drawing.Bitmap(imageToResize,
                new System.Drawing.Size(Convert.ToInt32(imageToResize.Width * whatPercentageToUse),
                    Convert.ToInt32(imageToResize.Height * whatPercentageToUse)));

     MemoryStream stream = new MemoryStream();
     newImage.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);

     byte[] resizedImageArray = new Byte[stream.Length];
     stream.Position = 0;
     stream.Read(resizedImageArray, 0, (int)stream.Length);
     stream.Close();

    return resizedImageArray;
}

  Re: Responsive / HTML5
Posted by Raymond on Sep-03-2016 06:43
| Reply | Monitor
Peter,

Disregard.

Once I size the image the way I want and I put the ASPX in an Image Tag it is perfectly responsive.

Thank you for your support.