Pie Charts in Rails Admin

 With Rails Admin

If you are using RailsAdmin for managing you web-application from backend, you get reports for your data out of the box. In addition you can edit/update in no time with ease. You will not have charts and graph at that instant though.

How can I get Charts?

Continue reading

Reporting in Rails : Report generation : Downloadable in any Format | PDF | CSV | XLS

Working on report generation is a time consuming task yet very necessary for any software projects. End of the day every business owner needs to see where their business stands or see ongoing activity in the system. Reports need list of records and Graphs/Charts to show the big-picture at a glance.

 With Rails Admin

If you are using RailsAdmin for managing you web-application from backend, you get reports for your data out of the box. In addition you can edit/update in no time with ease. You will not have charts and graph at that instant though.

How can I get Charts?

Continue reading

Issues with Charts and Graphs using HTML5 Canvas : jQPlot, ChartsJs.org, flotcharts.org

With normal browser conditions i.e. Zoom : 100%, the graphs and charts render just perfect but when you
zoom-out the document to 60%, re-render the chart and just Zoom-In to 100% you loose the clarity of your chart

Problem: The aspect ratio calculated before rendering chart and onwards just don’t match at all.

Solution: As soon as the window is resized just re-render the chart by any means

Thanks

Chart_isse_zoom_out Chart_issue Chart_issue_zoom_in

jquery chart plugin : jqPlot : Customize the view

var plot1 = jQuery.jqplot (targetElementId, [data],
    {
        seriesDefaults: {
            // Make this a pie chart.
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                showDataLabels: true
            }
        },
        grid: {
            drawGridLines: true,        // wether to draw lines across the grid or not.
            gridLineColor: '#cccccc',   // *Color of the grid lines.
            backgroundColor: 'transparent',      // CSS color spec for background color of grid.
            borderWidth: '0px',
            borderColor: 'none',
            shadow: false,
            borderColor: 'transparent', 
            shadow: false, drawBorder: false, shadowColor: 'transparent'
        },
        legend: {
            show:true,
            location: 's',
            'margin-left': '12px'
        }
    }
);