How to create stackbar chart in raphael js. I know it in D3js but could not find any way to create it in raphael js. Can some one share some inputs to get it done.
Either use g.raphael library, or just implement it yourself, all you need is to draw rectangles of different height or width on different positions with labels on them.
Related
My professor has tasked us with creating a web app that generates a bar, pie, and line chart using only javascript and SVG. No third-party packages or libraries are allowed. I've been stuck on this for weeks and can't seem to figure it out.
Here is a good example of what I am trying to create http://nasir9bd.github.io/generate-chartjs/ the author uses jquery and chartjs, which I am not allowed to use.
If anyone can point me to a tutorial on how to create this using only javascript and SVG? please I am going mad! I've tried coding it myself and only got so far. I've tried tutorials, but all only use libraries or other languages.
I learned from Mozilla tutorial.
. You have to be patient reading from scratch,
First, learn the 2D position of the shape (x,y)
Second, learn the basic shapes (Rectangle, Circle, Ellipse, Line, Polyline, Polygon, Path).
Third, customize and decorate these shapes with Fill, Stroke and Gradients.
Examples:
To draw a bar chart, draw an <svg> element with <rec> elements inside it.
To draw a pie chart, draw an <svg> element with <path> elements inside.
To draw a line chart, draw an <svg> element with an <polyline> element inside.
Try to read the basic shapes section, do the examples, you'll get 50% of the idea. Good luck!
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
I currently have a fairly basic composite line chart that looks like this:
I would like to add the following "dynamic" annotations to it:
By "dynamic" I mean that these totals and computed ratio need to be updated whenever the date filter is changed by the user, or there is a brush selection.
I am stuck on two aspects:
What is the recommended way to approach this? So far I have explored two paths:
Drawing SVG elements into the chart using a renderlet: I'm not able to access the crossfilter object to retrieve the data.
Create a custom D3 rendering outside of the chart: I'm not able to get the stats to update when the date selector is changed or the chart is 'brushed'. Also, this somehow reduces the flexibility of having the annotations within the chart itself (as far as I understand).
As an aside, can the ratio be computed directly in crossfilter? If so how?
The way you have this mocked up, I would recommend just setting these up as separate charts. Probably the best option is to use dc.numberDisplay.
Regarding computing ratios - yes, you can compute them in Crossfilter, but don't do that. Maintain both components of the ratio on a single Crossfilter group (using custom reducers, Reductio, or Universe) and do the division at reporting time. In dc.js, this means calculating the ratio in the valueAccessor of the chart.
I'm looking for a charting library that can draw heatmap charts, and has the option of displaying column label text vertically (allowing me to fit lots of columns on the screen regardless of the length of the labels)
Ideally the library would be free for a charity/educational organisation.
Here's an example of a simple heatmap with vertical labels:
That chart was created using FusionCharts, which is not suitable as it is a flash-based product and is expensive to license.
You could always roll this yourself. Most of the table can be generated using ordinary HTML, with the exception of the vertical labels at the bottom. You could tackle that with Rafael, a JavaScript library that allows you to draw on an HTML canvas. Drawing rotated text is actually available out of the box so it won't be hard to implement.
I think what you are looking for is also called a TreeMap (in some circles anyway).
Check out thejit.org
Under the demos checkout the treemap and the icicle chart.
At this url you can find what you are looking for heatmapjs
I am trying to add the actual value of all the bars in my chart to the
end of each bar. I want this to either replace, or to add to the tool-
tip functionality.
I see that this is possible in the image chart, it is the
functionality described in the following link that I wish to
replicate:
http://code.google.com/apis/ajax/playground/#image_bar_chart
I am wondering if this is possible in the Javascript based version of
the bar chart?
Many thanks,
H.
It looks like there's no built in functions to draw text ad-hoc on top of google's different charts. Behind the scenes, it's generating SVG so you could try to insert some valid SVG on your own.
Another option would be to use a more flexible (but less featureful) library like raphael.js:
http://raphaeljs.com/