ASP.NET - jquery graphs - Asked By svm satya on 05-Jan-12 11:16 PM

hi ,

  i want code for converting tables into graphs.can any body please help me or giving some guide lines.
Riley K replied to svm satya on 05-Jan-12 11:41 PM


What table is that ??

is it a  dataset containing results from database
You can use Microsoft Chart control to display charts


Process need to be followed for generating a Simple chart
1. Query the database and fetch data from the table
2. Create a bitmap image using Bitmap class
3. Draw the chart using FillRectangle() and DrawRectangle() methods of Graphics class according to your data.
4. Either save the image to the server and show it.
5. Stream the image to the client on the fly.

examples
http://www.dotnetforce.com/Content.aspx?t=a&n=197
http://www.4guysfromrolla.com/articles/021010-1.aspx


Regards
Jitendra Faye replied to svm satya on 05-Jan-12 11:47 PM

http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas is a jQuery plugin which converts tables to charts & graphs using the HTML 5 canvas tag.


The usage of tables is very important the data is already formatted in a way that is accessible to users browsing the web with a screen reader or other assistive technology.


for example follow this link-

http://www.webresourcesdepot.com/convert-tables-to-accessible-chartsgraphs-with-canvas-and-jquery/

Jitendra Faye replied to svm satya on 05-Jan-12 11:47 PM

http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas is a jQuery plugin which converts tables to charts & graphs using the HTML 5 canvas tag.


The usage of tables is very important the data is already formatted in a way that is accessible to users browsing the web with a screen reader or other assistive technology.


for example follow this link-

http://www.webresourcesdepot.com/convert-tables-to-accessible-chartsgraphs-with-canvas-and-jquery/

[)ia6l0 iii replied to svm satya on 06-Jan-12 12:00 AM
I have used http://omnipotent.net/jquery.sparkline/ charts from Omnipotent. They can bind with data easily and are easy to plugin. 

And all you need is couple of lines to integrate them in client markup.

The following function would draw a line chart with the specified color and with the comma separted values passed in the myvalues array.

$(function() {
var myvalues = [comma separated data points];
$('.sparklineChart').sparkline(myvalues, { type: 'line', lineColor: '#288CD4', fillColor: '#E6F2FA', spotRadius: '0', lineWidth: '0' });
});


If you have a span with comma separted values in a span, check this sample code:

<p>
Inline Sparkline: <span class="inlinesparkline">1,2,6,0,29,8,2</span>.
</p>

<script type="text/javascript">
$(function () {
            /* Inline sparklines take their values from the contents of the tag */
            $('.inlinesparkline').sparkline();
        });
</script>

Note that you need to add reference to the jquery.sparkline.js file from "http://omnipotent.net/jquery.sparkline/jquery.sparkline.js" or make a local copy.
svm satya replied to Jitendra Faye on 06-Jan-12 12:03 AM
Thank u  very much .

             if my requirement is place a drop down menu if select one value it will display a graph and select 2 nd value it will display another graph.how can create multiple graphs.  
Jitendra Faye replied to svm satya on 06-Jan-12 12:16 AM

For that you have to read value of DropDownList, based on that you have to call client side function, based on selected value you can call client function to generate graph.
Sri K replied to svm satya on 06-Jan-12 01:03 AM
Using jquery you can plot the graphs also
check this links 
http://www.spiced2.com/10-jquery-graphs-charts-plugins/

http://www.jqplot.com/