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!
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.