English 中文(简体)
Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?
原标题:

Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?

The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.

So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i d appreciate some help!

Thanks

最佳回答

Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I ve used Flot (haven t tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you ll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.

You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that s not as easy or consistent across browsers as drawing charts with the canvas.

If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.

My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.

EDIT:

Another library I forgot to mention is PlotKit which extends MochiKit. I haven t used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I m not sure how crossbrowser an SVG based solution would be (particularly in IE).

EDIT:

Here is a jQuery plugin which charts using div elements. I personally don t like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.

问题回答

According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.

For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签