I know a pie chart plugin exists for Raphael JS, but I need to add extra programming that doesn't exist in it. How do you create a pie chart in Raphael JS from scratch?
I'd have a look at the code thats used on this page. That's how I created my piecharts
Related
I want generate pdf of a template containing chart generated through chart.js and also table ,I have used reportlab but I neither get chart generated through chart.js nor css is applied over the table in django ?
You can use wkhtmltopdf for these things and for converting dynamics chart into pdf you should always consider some stable library which supports different type of chart and wkhtmltopdf is good in that. It is easy to work with wkhtmltopdf in your Django app.
As i am totally newbie to oracle apex technologies i am developing a simple chart application in which I have build a simple Bar Chart in apex 18.2, i want to do some conditional changes on chart on the basis of data retrieving from database , i didn't found any HTML expression box to enter custom HTML Expression , I need some Suggestion or Some good examples for to Customize the Chart behavior via css or java script , i have done googling but didn't found any useful material for apex 18.2 as all of examples are for some older versions.
Charts in APEX 18.2 are based on Oracle JET engine. If you're going spend more time on charts development, I advice you to check out this toolkit, and how it works. (https://www.oracle.com/webfolder/technetwork/jet/globalGetStarted.html)
If you just need a quick suggestions how to customize chart behavior then:
-set a static ID for your chart in application builder. It should be static ID of whole chart region, not just particular series.
-in the application use developer tools to figure out how chart widget works. In console you can easly catch the widget by jQuery selector $("#yourStaticID_jet"). "_jet" is crucial here. On this jQuery object you can use method ojChart() to interact with chart widget.
All available options for ojChart method are documented here: https://docs.oracle.com/cd/E87657_01/jet/reference-jet/oj.ojChart.html
At the beginning you can try:
$("#yourStaticID_jet").ojChart("option");
what should return object with all current options of the widget. Many of them let you impact the way your chart works. Some of them are not possible to set from application builder.
When you decide to change something dynamicly you can create Dynamic Action (for e.g. on some button) and choose type of action "Execute JavaScript Code". A nice example would be turning on stack property of your chart:
$("#yourStaticID_jet").ojChart({stack: 'on'});
There is also way to initialize your chart with some options. For this purpose go to Attribute section of your chart, and scroll down to "Advanced" JavaScript Initialization Code. Help text for this section will provide you example code.
I m working on charts using the chart.js library. I want to show image gallery like a carousel on click of any segment of pie/doughnut chart. I'm not able to find the proper solution. Please suggest some solution
If I understand correctly what you are trying is to trigger an event after user clicks on chart segment. chart.js has this prototype method getElementAtEvent(); See the documentation.
It seems as a good place to start - you could create some function to open image gallery and call it there.
And the gallery/slider implementation is a separate issue, but if you are using some of the popular ui libraries some of them have a solution for that already. Bootstrap, for example has carousel, and JQuery has many plugins for that purpose. Here are some examples. Hope this helps...
i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!
I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?
In the Configuration Options of the chart, specify
backgroundColor: { fill:'transparent' }
This worked for me in Chrome and Firefox.
It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.
Setting a transparent background for Google Charts:
// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};
JSFIDDLE DEMO
backgroundColor: "00000000" worked for me.
If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.
fill-opacity="0.0"
Example:
$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');
Use the eq:() selector to select the rectangle you want to be transparent.
On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".
When you paste the chart, you can still choose to link it, and it will paste with the background transparent.