Providing gradient colours for google chart api to draw pie chart - javascript

I am using google chart APIs to draw a pie chart on the page. This uses some default colors to draw the sectors of the pie. We have an option to provide our own colors to draw the pie chart like colors:['red','#004411'] as suggested in https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart. Now I want to know how can I achieve some glassy effect by providing gradient colors to the APIs? Is there any way with which I cant achieve this?

Already answered here. This is what it says:
It is not possible through standard configuration options for the new
SVG pie charts.
However, CSS can be used to color the elements of the pie chart if you
are in to that sort of thing. CSS can create gradients in various ways
depending on browser, etc. For more information on that, see this
site.
If you want to color a specific element of the pie chart, you can use
something like the developer tools in Google Chrome to help track down
a specific element, and recolor that element using CSS as above.
This will likely not work properly in IE (little does).
In general, however, the use of Gradients tends to just be eye candy,
and actually makes the chart more difficult to read (it doesn't much
matter for pie charts, which are generally not the best choice of
charts to begin with).

Related

is it possible to do range bar chart with curve line ( S Curve)

I attached the graph I want to achieve.. can you recommend any library/ how to do this kind of graph?
I looked at libraries such as charts.js, anycharts,canvasJs, High Charts (has payment client wouldn't like that) One interesting I found is Google Charts' Combo chart but have no idea how to do it.
https://i.stack.imgur.com/hm5uf.png
I used d3 Line chart and append it on top of the progress bar chart. since it's an svg the background is transparent. hope that helps someone

How to implement "zebra striping" in highcharts axes

I want to implement "zebra stripes" styling on the highcharts background as it will in improving readability of the graph data.
Notice the gray color between horizontal axes
http://i.imgur.com/QkOCZ2j.png
I was unable to find any such option in the highcharts website. It would be really helpful if someone had implemented it using custom javascript functions.
Check out alternateGridColor. This will specify a color for the alternating category grids.

drawing custom line chart and column chart

I need to make line charts and column charts for cricket run rate, wickets etc. and due to some extra requirement I am unable to use the libraries available on internet like google charts, highchart etc.
Some of the requirements are:
show more than 1 circle on line/column chart if more than 1 wickets falls in an over, something like the image below
different color of each bar
I have searched on google but couldnt find any ready to use libraries like this
and before I decide to draw custom charts I wanted to confirm if there is any library available where I can do these custom changes and if not then I need suggestion if I can draw them in HTML5 or what do you think would be the best approach.
It sound like you want to take a look at Chart.js. I've used it on several occasions, and it's a good tool for making charts with HTML5 and JavaScript. It gives you a wide variety of different charts to choose from without having to custom code a whole bunch of stuff. And they look nice as well.
The examples in the documentation are very descriptive, and the default example includes a bar-chart that has alternating colors, matching that of your example pictures.

Which javascript or JQuery charting tool can I use to create heatmap charts with vertical column labels?

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

Google Chart Visualization API, Bar chart values / tooltips

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/

Categories