drawing custom line chart and column chart - javascript

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.

Related

Javascript /jQuery Stock Chart API with multiple separate axis but combined interaction (pic included)?

I have looked through a number of open source and proprietary charting tools such as:
Stock Chart v3
HIGHSTOCK
dygraphs
Virtualization
These are all good charting options, some have an added dataset in a separate panel used with interaction(Only Volume). I would like to have this with multiple charts, like this:
In the above image, there are separate charts for different indicators but when interacting with the chart you can see the values on the right side of all 5 indicators.
Would it be possible to append another chart and have combined interaction in the same way with any existing charting options?
When using amCharts you are not limited to 2 panels. You can have any number of them. It's just this example that has two. I guess most of other tools does the same.

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

Editable javascript chart - interactively resize bars or pie sections

I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.

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