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?
Related
I use chart.js 2.8.0 to create mainly pie and bar charts. The clickable legend on pie charts is really useful, filtering out unwanted data from the result.
When creating a chart there are two kinds of labels:
* An array of labels on chart level, label 1 corresponding to item 1 in each dataset.
* Dataset labels, one for each dataset.
A pie chart as standard get the chart label array turned into a legend with clickable labels, click on a label and that item is filtered out from the chart.
A bar chart, on the other hand, gets the labels shown below the bar but not clickable. Instead the legend here is made out of the dataset label. If you have more than one dataset, a whole dataset is filtered out if you click on that label.
Since I sometimes have several datasets I can not use the "trick" that consists of putting data item into a separate dataset (that was otherwise the closest to what I wanted that I found in my search, the "extra" clickable legend that would create would work as well). The situation is also that the end user should get a drop-down (or similar) so he, from the same data, can select chart type. So the soultion need to work both for pie and bar charts. the same data and (standard) code creates the two shown charts (except for the colors).
The question is now, as stated in the title: Is it possible to get clickable labels for a bar chart with the same filtering functionality as when the chart is of pie type?
I understand that it isn't doable by just setting some options, it would probably have to be done by creating a plugin, but is it at all doable? if so, any pointers for help?
If not clickable labels, maybe make the bars themselves clickable (with the same result)...?
With a slight change to the fiddle given by https://stackoverflow.com/users/3963330/tob%c3%adas in his answer here: Click events on Pie Charts in Chart.js I get a fiddle that also can handle multiple datasets, and on my second try I managed to hide a segment when I clicked on it. And then I relized that if it wasn't a pie chart there would be no clickable legend to use for unhiding that element - so that's not a solution for my bar charts.
Tried combining a couple of SO questions/answers (generating labels by #GRUNT : Bar labels in Legend) but can't get legend labels for bar charts to filter out segments instead of datasets.
Fiddle: https://jsfiddle.net/tommypeters/24ra6egy/9/
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
]
},
{
data: [400, 60, 101],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
]
}
],
labels: [
"Red",
"Green",
"Yellow"
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
labels: {
generateLabels: function(chart) {
var labels = chart.data.labels;
var dataset = chart.data.datasets[0];
var legend = labels.map(function(label, index) {
return {
datasetIndex: 0,
fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
strokeStyle: dataset.borderColor && dataset.borderColor[index],
lineWidth: dataset.borderWidth,
text: label
}
});
return legend;
}
}
}
}
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var dIndex = myNewChart.getDatasetAtEvent(evt)[0]._datasetIndex;
var label = chartData.labels[idx];
var value = chartData.datasets[dIndex].data[idx];
// Doesn't hide a slice but a whole dataset...
// var meta = myNewChart.getDatasetMeta(dIndex);
// meta.hidden = meta.hidden === null ? !myNewChart.data.datasets[dIndex].hidden : null;
// myNewChart.update();
var i, ilen, meta;
for (i = 0, ilen = (myNewChart.data.datasets || []).length; i < ilen; ++i) {
meta = myNewChart.getDatasetMeta(i);
if (meta.data[idx]) {
meta.data[idx].hidden = !meta.data[idx].hidden;
}
}
myNewChart.update();
var url = "http://example.com/?label=" + label + "&value=" + value;
console.log(url);
alert(url);
}
}
I have changed my chart colors but the title boxes are not changed. How can I change them
POLAR SCATTER CHARTS
Legend markers ignore bulletColor by default. You have two options to change the marker color:
1) Set lineColor to change your legend marker and bullet colors instead of using bulletColor.
var chart = AmCharts.makeChart("chartdiv", {
// ..
"graphs": [{
"lineColor": "#000088",
// ... omitted ..
},
// ... etc
],
// ...
});
Demo
2) If you rather use bulletColor, you can set useGraphSettings to true in your legend, which makes your legend use your bulletColor but changes your markers to bullets instead of boxes.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": {
"useGraphSettings": true,
// ...
},
// rest stays the same
});
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 have this Jqplot pie chart with some cut-out slices:
var data = [['SliceOfSlices', 60],['a', 10],['b', 5],['c', 25],['d', 10],];
plot = $.jqplot('pie-graph', [data], {
title: 'Slices',
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
sliceMargin: 8,
}
}
});
JSFiddle here.
What I'd like to do is to let one of the slices contain slices of its own, without cutting them up. Like so:
I've looked around and I suspect this might be stretching the capabilities of the jqplot library a bit far... Just thought I'd ask.
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.