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

Message ListMessage List     Post MessagePost Message

  Generic Handler as Source for WebChartViewer/JsChartViewer?
Posted by Chris Bergin on Oct-06-2015 23:41
| Reply | Monitor
We're implementing a dashboard with a number of different charts on the same page.  Normally, I will implement each chart as a generic handler (ASHX) and use the handler as the src for an image tag (or, more recently, the container for the SVG element).

ASHX Sample:
    public class PercentageBarIndicator : IHttpHandler
    {
        private const int WIDTH = 100;
        private const int HEIGHT = 15;
        private const int MARGIN = 0;

        public void ProcessRequest(HttpContext context)
        {
            double percentage;
            string usPercentage = context.Request.QueryString["Percentage"];
            string safePercentage;

            if (!Double.TryParse(usPercentage, out percentage))
            {
                percentage = 0;
                safePercentage = "n/a";
            }
            else
            {
                safePercentage = percentage.ToString("0.00'%'");
            }

            ChartHelper chartHelper = new ChartHelper();
            LinearMeter meter = chartHelper.GetLinearMeter(WIDTH, HEIGHT);
            meter.setMeter(
                leftX: MARGIN,
                topY: MARGIN,
                width: WIDTH - (2 * MARGIN),
                height: HEIGHT - (2 * MARGIN),
                axisPos: Chart.Bottom
            );

            //Set scale from 0 - 100 because we're charting a percentage and not the raw value.
            meter.setScale(0, 100);
            //Since we're not using a pointer, use an axis zone to show a fill bar instead.
            if (percentage > 0)
                meter.addZone(0, percentage, ChartHelper.ORANGE);

            //Add the meter value label.  This will center the label on the chart as a whole, not on the fill bar.
            //If requirements change and they want it centered on the fill bar, just add the label to the addZone method call above.
            TextBox label = meter.addText(0, 0, safePercentage);
            label.setSize(WIDTH, HEIGHT);
            label.setMargin(0);
            label.setBackground(Chart.Transparent, Chart.Transparent, 0);
            label.setFontColor(ChartHelper.TITLE_COLOR);
            label.setFontSize(ChartHelper.LARGE_LABEL_FONT_SIZE);
            label.setAlignment(Chart.Center);

            //Render SVG
            context.Response.Write(Encoding.UTF8.GetString(meter.makeChart(Chart.SVG)));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

For this new dashboard, we'd like to add the programmable track cursor that WebChartViewer/JsChartViewer makes possible.  Is there any way we could point WebChartViewer at a generic handler rather than have our ASPX page contain all of the chart definitions in the code-behind?

  Re: Generic Handler as Source for WebChartViewer/JsChartViewer?
Posted by Peter Kwan on Oct-07-2015 06:07
| Reply | Monitor
Hi Chris,

The <IMG> tag is for displaying images. For example, a digital photograph is an image. A
chart can also be an image.

For a chart with "behaviour" (like track cursors), beside the chart image, it needs to contain
HTML/Javascript, which are not images. So you need to use a container that can support
HTML/Javascript. For example, you can use the <IFRAME> tag instead of the <IMG> tag. An
example is like:

<iframe src="zoomscrolltrack.aspx" width="800px" height="600px">

So in brief, you can use a generic handler. The handler needs to be able to support
WebForm Controls (WebChartViewer). On your web page, you need to use a container that
can support HTML/Javscript, such as an <IFRAME>.

Hope this can help.

Regards
Peter Kwan