I'm running jqPlot and for some reason the color-coded squares that should show up inside the pie renderer's legend are not appearing. I'm wondering if it has anything to do with the fact that I'm using twitter bootstrap? I'm not using any other css libraries.
var plot1 = jQuery.jqplot('chartdiv', [graphData],
{
grid: {
shadow: false,
background: '#FFFFFF',
},
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,
padding: 20,
startAngle: 270
}
},
legend: {
show: true,
location: 'e',
fontSize: 11,
marginTop: 10,
}
});
Are you sure you are loading the CSS of the jqPlot correctly (i.e. the url/href is pointing into the right location)?
This is your code with jquery.jqplot.css loaded.
This is your code without the css.
This one is with both the jquery.jqplot.css and the bootstrap (downloaded without jQuery plugins and not linking the img folder that comes with the download). Here all appear correctly, thus you must double check the href of the jquery.jqplot.css.
Related
I'm using FabricJS in my web application. As I draw shapes, I notice that the control widget for all the objects are rectangular. Can the shape of a control widget be modified to fit the actual shape of the object? Say, a circle with a circular control widget.
I went through the Controls Customization demo. But there is no option to modify the shape of a control widget.
I need to modify the shape of the control widgets for the following purpose:
In my application whenever an object is clicked, its fill colour is toggled between black and white. In this case(refer the image below), because the circle has a rectangular control widget, clicking the pointed pixel selects the circle instead of the rectangle. I also hide the control widget from appearing by using hasControls property. So, the user will not know anything about the control widget. So, is the shape of the control widget editable?
I don't think there is an easy way to do that with fabric.js without writing a whole bunch of extra code. Fabric.js always draws a rectangle bounding box and uses it for selection controls. However, since you're planning on hiding the controls anyway, it sounds like you might be better off using perPixelTargetFind.
When true, object detection happens on per-pixel basis rather than on
per-bounding-box
Here's a quick demo:
const canvas = new fabric.Canvas('c', {
preserveObjectStacking: true,
perPixelTargetFind: true
})
const circle = new fabric.Circle({
radius: 50,
left: 50,
top: 50,
stroke:'green',
fill: 'white',
hasControls: false,
hasBorders: false
})
const rect = new fabric.Rect({
width: 200,
height: 150,
left: 50,
top: 25,
stroke: 'green',
fill: 'black',
hasControls: false,
hasBorders: false
})
canvas.on('mouse:down', (e) => {
const obj = e.target
if (obj) {
obj.set({
fill: obj.fill === 'white' ? 'black' : 'white'
})
canvas.requestRenderAll()
}
})
canvas.add(circle, rect)
circle.bringToFront()
canvas.requestRenderAll()
body {
background: ivory;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>
How can I set to always show the labels in my sunburst chart? I have this plunker like in the demo: http://plnkr.co/edit/emCcNv?p=preview
$scope.options = {
chart: {
type: "sunburstChart",
height: 450,
duration: 250,
width: 600,
mode: "size",
groupColorByParent: true,
labelThreshold: 0.04,
showLabels: true,
key: function (d,i){return d.name;},
labelFormat: function (d){if(mode === 'count'){return d.name + '#' + d.value}else{return d+ ' '}},
}
doesn't do the job for me, but here http://krispo.github.io/angular-nvd3/#/sunburstChart it somehow works if you check the "showLables" checkbox
Same problem here, solved by updating your nvd3 lib to 1.8.5.
I want to show the current value of chart into the pointer tool-tip, If there any way to add tool-tip please suggest, please check gauge screenshot
There is no built in method for this afaik. So you can use the kndoUI tooltip object like this:
In the gauge config, I assign a unique CSS color to the pointer so I can easily query for the SVG element
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val(),
color: "rgba(255,102,0,.999)"
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
Then setup the tooltip widget so that onShow, the content is set to the current value of the gauge. The filter attribute points at any dom object with our unique fill color.
var tooltip = $('#gauge').kendoTooltip({
filter: '[fill="rgba(255,102,0,.999)"]',
position: "center",
content: $("#gauge").data("kendoRadialGauge").value(),
show: function(e) {
e.sender.options.content = $("#gauge").data("kendoRadialGauge").value();
e.sender.refresh();
}
}).data("kendoTooltip");
Here is a dojo DEMO
Consider this code snippet:
function drawChart() {
var slice_1 = ['A', 15];
var slice_2 = ['B', 40];
var slice_3 = ['C', 50];
var slice_4 = ['D', 40];
var series = [slice_1, slice_2, slice_3,slice_4];
var data = [series];
var options = {
seriesColors: ["#00aeef", "#FFBF00", "#0CDA08", "#FF1926"],
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer
},
legend: { show:true, location: 'e' }
};
$.jqplot('chartDivId', data, options);
}
In the above, how do i get percentage inside the pie chart? I tried many things but can;t make it work.
I added this:
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString:'%.4f'
}
But percentage didn't appear inside the pie chart.
I used the above snippet (the one you posted) and I was able to display labels in 'percentages'
You just need to use showDataLabels: true inside rendererOptions
By default, showDataLabels displays the labels in percentages.
No need for the code below. Remove these two lines
dataLabels: 'value',
dataLabelFormatString:'%.4f'
Here's a working JSFiddle for your code : Pie Chart - Show labels in percentages
Also make sure that you add rendererOptions inside seriesDefaults
You can also check the example over here: jqPlot - Pie Chart
Hope it helps.
I am creating a jQuery mobile app using the mvc3. In this I have created the jqPlot pie chart.
It does not show colors for all slices of the pie chart,
i.e it sometimes show color for one slice even when there are four slices in the chart, and for the other three slices it shows white background instead of its defined slice background color.
I want it to show every time a full chart with solid color fill.
The image of jqPlot pie-chart:
http://i.stack.imgur.com/qH4o9.png
I am using this code:
jQuery(document).ready(function ($) {
var data = [
['Correct Answers', #Correct_Answer], ['Incorrect Answers', #Incorrect_Answer], ['Skipped Answers', #Skipped_Answer],
['Unseen Answers', #Unseen_Answer]
];
var plot1 = $.jqplot('score_chart', [data],
{
seriesColors: ["#83abc0", "#64d6f4", "#3399ff", "#03597a"],
highlightColors: ["#ADC7D5", "#99E3F6", "#78BAFE", "#568FA6"],
seriesDefaults: {
// Make this a pie chart.
fill: true,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
padding: 5,
fill: true,
fillAndStroke: true,
showDataLabels: true
}
},
legend: { show: true, location: legendlocation },
});
});
Can anyone help me with this issue?
Your problem is not in this code. I did a sample from the code you have provided and it works fine. See here.
Are you sure you have all JavaScript and CSS files correctly imported?