Databases
StackOverflow2013
Postsdbo
PORaphael chart, update and replace
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORaphael chart, update and replace
    primarykey
    data
    text
    <p>I have a pie chart created with raphael. I have a form checkbox that when clicked I want to attach 'effects' to the pie. This example is trying to attach an inner glow with inGlowFun() by creating a circle after it with a gradient. </p> <pre><code>function allPie(){ var pie; Raphael.fn.renderPie = function(cx,cy,r,values,total) { var canvas = this, radian = Math.PI / 180, chart = this.set(); function createSlice(cx, cy, r, startAngle, endAngle, params) { var x1 = cx + r * Math.cos(-startAngle * radian), x2 = cx + r * Math.cos(-endAngle * radian), y1 = cy + r * Math.sin(-startAngle * radian), y2 = cy + r * Math.sin(-endAngle * radian); return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle &gt; 180), 0, x2, y2, "z"]).attr(params); } var angle = 90, process = function (j) { var value = parseInt(values[j].spend, 10), angleplus = 360 * value / total, p = createSlice(cx, cy, r, angle - angleplus, angle, {fill: values[j].pieColour, stroke: "#FFF", "stroke-width": 1}); values[j].slice = p; angle -= angleplus; chart.push(p); }; function glowFun(){ canvas.circle(cx, cy, 140).attr({fill:"r#fff-#fff:96-#CCC", "stroke-width": 0}); } // creating each pie slice for (var i = 0, ii = values.length; i &lt; ii; i++) { process(i); } //create inner gradient function hollowFun(){ canvas.circle(cx, cy, 120).attr({fill:"85-#fff-#CCC", "stroke-width": 20, "stroke": "#FFF", 'opacity': 0.000001} ); } // inner glow (I admit this is a bit of a hack but it keeps it simple) function inGlowFun(){ canvas.circle(cx, cy, 55).attr({fill:"r#fff-#fff:85-#CCC", "stroke-width": 2, "stroke": "#FFF"}); } if(box.checked){ inGlowFun(); } // returning the whole set of nodes for interactions later return chart; }; // creating a namespace for this code so that anything we create won't effect other JavaScript on the page var dotNet = window.dotNet || {}; /* a function that parses the data contained in the data table, creates the Raphaël object we're drawing too and calls our Raphaël plug-in $source - reference to the data source (an HTML table in this example) $container - reference to the HTML element we're creating the chart inside */ dotNet.makePie = function($source, $container, pie) { var pie; /* few constannt variables for this function pieData - an empty array that will hold an object for each section totalSpend - the grand total of all the rows (calculated via code for greater accuracy) */ var pieData = [], totalSpend = 0; /* function to parse each table row, create HTML and attach events i - index of the iteraction */ function prepare(i) { /* variables used for each call row - jQuery object of the current table row values - an empty object that will be filled with data and references associated with each row head - jQuery object used to reference the th of the current row */ var row = $(this), values = {}, head = row.find('.tabh'); // grabbing the numeric total for the row and assigning to values values.spend = row.find('.tdh').text(); // each pie slice will now be styled in a CSS file -keeping style where it should be other than in JavaScript values.pieColour = row.find('th span').css('borderLeftColor'); // increase total value totalSpend += parseInt(values.spend, 10); // push values into the array for access later pieData.push(values); } // iterate through each table row (only in the body) $source.find('.tbh tr').each(prepare); // call the plugin to create the chart var sizeman = 300 var sizepiespace = sizeman /2 var sizepie = sizeman / (30/13) if(pie){ pie.clear(); } pie = Raphael($container[0], sizeman, sizeman).renderPie(sizepiespace, sizepiespace, sizepie, pieData, totalSpend); // attaching an event to the Raphaël set that fades all the slice back to full opacity pie.mouseout(function() { pie.attr('opacity', 1); }); }; // calling our makePie function on DOM ready function piefunc(){ $(function() { dotNet.makePie($('table'),$('#pie'), pie); }); } piefunc(); } This is the checkbox that it applies to and where the pie is actually run. &lt;form&gt; &lt;input type="checkbox" id="checker" onclick="checkFun();" /&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; var box = document.getElementById('checker'); function checkFun(){ allPie(); } allPie(); pieShower(); &lt;/script&gt; </code></pre> <p>When the checkbox is clicked it does generate a new pie with the desired effect, unfortunately it also pushes the previous version down and keeps it on the same page, and so as you keep checking and unchecking the box more and more are made on the page. Is there anyway to 'delete' or remove the chart that is already on the page while creating a new one with the desired effect? </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKza
    1. USKza
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload