1

I am quite new to client-side web development, so just feel free to edit my questions and if anything just does not make much sense.

Regarding HTML5/JavaScript and jQuery based charting libraries, let me just take RGraph (named as a HTML5 / JavaScript charts)and HighCharts (named as JavaScript charts under jQuery framework) for example.

The RGraph uses <canvas> tag for displaying the charts generated as exemplified in their documentation. However HighCharts uses <div> tag as placeholder for their charts.

I am trying to put HighCharts into <canvas> tag as the way RGraph does (which might sound weird to you...I don't know), the charts won't be able to displayed. The other way around, same issue happens if I put RGraph charts into <div> placeholder as HighCharts.

All I see is that either and are just placeholders, all the fancy interactive actions are down by the JavaScript. So Why came up with the above issues? I believe there might be reasons that some config differences between RGraph and HighCharts, but have NO idea what are those...

What is the difference for rendering charts in <canvas> and <div> tags?

~~~~~~~~~~~~~~~~~

Below is my scripts for demonstration:

Put RGraph in <canvas>, works perfectly fine: 

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Example</h1>
            <h2>Line Chart</h2>
            <canvas id="line" width="400" height="300"></canvas>
            <h2>Pie Chart</h2>
            <canvas id="pie" width="400" height="300"></canvas>
            <h2>Bar Chart</h2>
            <canvas id="bar" width="400" height="300"></canvas>

        </div>

    </body>
</html>

Does not work if I put charts into <div> tag: 

<!DOCTYPE html>
<html>
    <head>

        <script>
                Scripts go here 
        </script>

    </head>
    <body>

        <div>
            <h1>Basic RGraph Examples</h1>
            <h2>Pie Chart</h2>
            <div id="line" width="400" height="300"></div>
            <h2>Line Chart</h2>
            <div id="pie" width="400" height="300"></div>
            <h2>Bar Chart</h2>
            <div id="bar" width="400" height="300"></div>

        </div>

    </body>
</html>

Any comments are appreciated. Thanks!

sozhen
  • 7,627
  • 14
  • 36
  • 53

2 Answers2

3

The <div> tag and the <canvas> tag is not really the dividing line on javascript charting. It is really canvas vs SVG. RCharts uses canvas to draw their charts. Highcharts uses SVG. Highcharts simply uses a div as a container for the chart. This allows the user to specify where the chart will be drawn in the DOM. Similarly, flot and jqplot (which both use the canvas to render their plots) use a div tag in the same manner.

So now your question becomes canvas vs SVG for drawing? Read about that here and here.

Community
  • 1
  • 1
Mark
  • 106,305
  • 20
  • 172
  • 230
  • Thanks for your explanation and that helps great. Just one thing to mention, I also tried flot and jqPlot these days. I actually can render them in `
    ` tag. So in your answer saying that they use `` for rendering chart instead of SVG? Kinda confused here or its your typo? Thanks
     – sozhen Jun 27 '12 at 18:23
  • The
    is just being used as a container. Both flot and jqPlot insert a tag into the
    when they render that chart. Highcharts, on the other hand, inserts elements into the
    when it renders.
     – Mark Jun 27 '12 at 18:33
  • Thanks again Mark. But, flot and jqPlot can render charts correctly if I use `
    ` tag, like the way I did in the second code section in my question, however not work if I change to `` tag as I did in the first code section in my question. If I want to use flot and jqPlot in ``, should I modify the script part? Thank you
     – sozhen Jun 27 '12 at 18:42
  • You can not render a flot or jqPlot chart to a canvas tag. Both of their APIs expect a
    . I'm not sure why you want to force it to render , they will add that themselves. Examine the html after the chart renders you will see
    ...
     – Mark Jun 27 '12 at 19:07
  • I am actually just want to render a chart don't care which tag I use, however thinking of using a
    or may clarify my doubts. So whether we use
    or depends on their APIs, correct? So back to my question, the RGraph APIs only expects but APIs for flot, highcharts and jqPlot expect
    ? I examined my html using Firebug, but it's just my original markup, no tag showing up.. Thank you very much for you patience.
     – sozhen Jun 27 '12 at 19:47
  • As far as I know, the `` based charting should have better animation performance and better look and feel of the charts since it handles chart drawing in pixel level and usually large amount of code when interactivity goes more complicated. But as from the gallery shown in their websites, _HighCharts_ (Object-based drawing) having sexier looking than _Flot_ and _jqPlot_ (pixel-based drawing), I am not sure why that happens? Thanks. – sozhen Jun 27 '12 at 21:38
  • Yes, you are correct about the APIs. For large amounts of data, canvas will have better performance and use less memory. For smallerm datasets, though, the differences are probably negligible. The canvas drawing, though, is usually less interactive. Everything is drawn and since the components are not objects that are part of the DOM, you can not manipulate them afterward (you need to wipe the canvas and redraw). As to which is sexier, I don't think the underlying technology matters, I just think the author of highcharts has a good eye for aesthetics. – Mark Jun 28 '12 at 13:20
  • I've used all 3 libraries (but not Rgraph) and I find jqplot the best compromise between features and performance. – Mark Jun 28 '12 at 13:25
  • Thanks for your help! Correct me if I am wrong, usually report charting does not include a large set of data (for example, in bar chart, we only need x and y axis value), however, we do need more interactivity with users, so go for a object-based technology would be a better idea (svg require less coding to realize animation and interactivity)? For drawing flow chart or network chart etc., since large data amount could be incorporated, so go for would be a better choice (performance wise)? Thank you. – sozhen Jun 28 '12 at 14:14
  • Mark, any ideas regarding my question? Thanks! – sozhen Jun 29 '12 at 22:14
  • 1
    You have it correct. For example, I had problems with highcharts memory usage when plotting 5 plots each with 24 series with each series having 60 points. I would try it out with your data, though, and see what fits the best. – Mark Jun 30 '12 at 20:28
1

Firstly: <canvas> is a relatively new addition to the HTML standard, and is not universally supported over all browsers or versions. However, it may be the best option for displaying this type of information efficiently and reliably.

As for the reasons for your content not showing when using the other tags:

The <canvas> tag allows you to specify fallback content. For example, the following snippet:

<canvas>Your browser does not support the canvas tag!</canvas>

Will display as Your browser does not support the canvas tag! on browsers that do not support the <canvas> tag, but on browsers that do, a 300x150 canvas will be inserted, and appear as a transparent box.

In the inverse case, trying to use a conventional tag like <div> and using canvas-specific operations like getContext() will not do anything, or even raise errors if unhandled.

Neither libraries are likely to handle these useage scenarios, and will either fail silently, or pump a whole lot of debug information into your console.

The main difference between the two methods is that <canvas> rendering directly draws pixels/lines/text to a "rendering context" and is a better alternative to <div> rendering of this type of data for many reasons. However due to a lack of cross-browser support people usually avoid this technique.

<div> rendering on the other hand, creates DOM elements of all of the shapes and elements necessary to emulate the visual representation of the data, which depending on the resolution of your data and size of your chart, can mean either a negligable or significant performance impact at the cost of browser compatibility.

One middle ground would be to use a polyfill like excanvas to provide canvas support in most browsers, even recent IE versions.

Refer to your library's documentation, however. If you're using a library for rendering, they may already implement a polyfill, or even fallback content within the <canvas> element for unsupported browsers.

Nimphious
  • 4,889
  • 1
  • 17
  • 17
  • The last part of your answer doesn't make sense. While I've seen some bar charts hacks created with collections of divs and lots of CSS, divs alone are not capable of drawing. In the browser, you get canvas, SVG or VML (this is what excanvas uses to fake the canvas tag, and it should be noted that VML is deprecated). – Mark Jun 27 '12 at 18:11
  • `div` elements, combined with creative background images and/or CSS properties can be used to render line or pie graphs and similar, basic box elements can be used to make Kagi or Candlestick charts or others that use axis-aligned rectangles. You may not be able to draw directly to `div` elements (that's what the `canvas` element was designed for after all) but you can certainly create charts with them. – Nimphious Jun 27 '12 at 18:19
  • Nimphious, appreciated for your comments however that just not quite unveil the schemes those two libraries uses which results in my question. – sozhen Jun 27 '12 at 18:34
  • My apologies, I assumed your question was why the different libraries would not work in the different container tags, and what the difference between the two tags are and how they might be used to render charts. – Nimphious Jun 28 '12 at 08:25
  • That' ok. Thanks for your answer dude. As Mark said, it depends on the APIs for different charting libraries. Some are using `
    ` while some using ``. That's why if you mixed them up, charts won't be rendered correctly.
     – sozhen Jun 28 '12 at 14:23