How to fill area between two line charts in TeeChart HTML5? - javascript

I would like to fill the area between two line charts when the area is enclosed between the lines. See below. (TeeChart was not used to draw these charts)
How can I accomplish this in TeeChart HTML5 component?
Chart now:
What I want:

The SeriesRegion tool is a tool designed for this purpose, and it's implemented in the majority of TeeChart versions, but I'm afraid it isn't in TeeChart HTML5/JavaScript yet. I've added it to the wish list to be implemented in future releases (TF77016627).

Related

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.

Providing gradient colours for google chart api to draw pie chart

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

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/

Draw line charts. Moving from JpGraph to Raphael JS

I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico

Categories