Using RadHtmlChart on Android 2.x

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 21 Aug 2012 Link to this post

    Requirements

    RadControls version Q2 2012 SP2 or the latest internal build
    .NET version 3.5/4.0
    Visual Studio version  2008/2010
    programming language C# or VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    The RadHtmlChart control uses a combination of SVG and VML to display its content. SVG is a vector-based standard, broadly supported on all modern browsers, especially suited for interactive 2D rendering, and VML is a similar Microsoft technology that we use to support older versions of IE.

    The default browser of Android 2.x is outdated and does not support SVG. Nevertheless, you can still visualize the chart control in this case by converting the SVG to a canvas element, which is supported by Android 2. This will result in loss of some of the additional features that the SVG provides, like animations and interaction, however the main functionality of the control - visualizing the provided data - will be available. The suggested approach can be implemented on the client-side via the following steps:
    1. A check if the current browser supports SVG is performed. If it does not then you should proceed with the next step.
    2. The client-side API of RadHtmlChart is used for retrieving its SVG markup.
    3. A new canvas is created.
    4. The chart SVG is converted to a canvas through a custom JavaScript library, designed for managing SVG elements.
    5. The original chart SVG is removed and the canvas rendering is inserted in its place.

    The sample page, attached to this thread, demonstrates the described approach. Note that the client-side method, used for getting the SVG markup of the chart control (getSVGString()), is available in the internal builds since 2012.2.801 and it will be included in the official Q2 2012 SP1 release as well. Also, the JavaScript libraries Modernizr and canvg are utilized respectively for detecting if SVG is supported and converting the SVG to canvas.



Back to Top