Yahoo Answers is shutting down on 4 May 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Web page dynamic graphics?

If you were designing a website which had a particular page showing a custom graph, what techniques would you use and why? For this particular example there is no need for screen reader support, nor for the page to be bookmarked. It's a particular drawing that'll change dynamically based on data from the server.

Possibilities for drawing include <canvas> and SVG. To use an <iframe> or not? Cross-platform and cross-browser support is a must, possibly excepting tiny footprint browsers such as certain mobile phone browsers.

Languages could be anything, Javascript, VBScript, C#, PHP, etc. The data will be generated by the server (AJAX techniques?) and the rendering probably ought to be done by the client to allow for faster panning/zooming etc.

I'm not interested in 3rd party plugins or components, with the exception of, for example, freely available SVG viewers for Internet Explorer.

3 Answers

Relevance
  • 1 decade ago
    Favourite answer

    I think Canvas might be the answer in a couple of years, but maybe for now I'd stick with more basic stuff (why has vector graphics taken so long to arrive in web graphics?)

    If you've got an AJAX data source, say XML or JOSN with the data points in it, a bar chart type graph is easy to construct in JavaScript using DIVs and absolute positioning within a DIV for the whole graph. No need for an IFRAME. If it is a set of connected points, if the density on the x axis is high enough you could use a 1 pixel wide DIV in each successive column positioned according to the y value, or if you want to draw a line there are numerous JavaScript libraries out there which will support this, or it is really very simply to write your own Bresenham algorithm in JavaScript using 1 x N pixel DIVs for the sections of line. Bresenham is a DDA ("digital differential analyzer"), a complicated way of saying how to work out how many steps to the right you take before moving up one pixel (or how many up before moving to the right for steeper lines). For example: http://bytes.com/topic/javascript/answers/88771-dr... (can't vouch for its correctness, it's the first one of many I hit on with a web search, but it's only, what, 40 lines of code?).

    If the graph isn't enormous, you could even pre-prepare your HTML with a DIV in each column, and just set its y value from the JavaScript according to the Bresenham value for that x, then you don't even have to generate the elements in Javascript, merely for all x values do position existing blocks for each interval x1->x2 in the pictorial graph representing that x in the data.

    Using JavaScript makes it essentially accessible to all browsers everywhere.

  • 4 years ago

    1

  • Mary
    Lv 4
    5 years ago

    creating your own linux server would probably be one of your best options...there are alot of tutorials to help you...

Still have questions? Get answers by asking now.