I was looking forward to sort the bars on simple bar-chart, if it is possible something like below i mentioned.
var chart = c3.generate({ data: { columns: [['data1', 30, 200, 100, 400, 150, 250],], type: 'bar', order: 'desc' }, })
As per the documentation the data.order property is restricted to pie or donut charts. You have to sort the data before creating the chart to get ordered bars.
var data1 = [130, 100, 140, 200, 150, 50].sort(function(a,b) { return a-b; })
var chart = c3.generate({
data: {
columns: [
["data1"].concat(data1) // old-school
// ["data1", ...data1] // ES6 flavor
]
}
})
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);
}
}
In jqplot, why is the auto scaling on bar charts so very different from on line charts?
Using the exact same data, I get these two plots:
The options I use for the two plots are:
var bar_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { highlightMouseOver:false, barMargin:5, shadowOffset:1 } },
axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { tickOptions:{show:false} } },
};
and
var line_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { rendererOptions: { smooth: true } },
axes: { xaxis: { min:1, max:30, tickInterval:1, pad:0 }, yaxis: { tickOptions:{show:false} } },
};
The line plot looks really good, but the bar chart is next to useless with the scaling shown.
Why is the default scaling so different between the two plots, and how can I get the scaling on the bar plot to be the same as the line graph?
EDIT:
I have created a simpler example, with data as follows:
[38.23, 39.33, 41.67, 40.21, 45.01, 44.47, 37.04]
And the resulting graph shown is this:
Adding a y-axis scale, shows that the data is starting from 0.
I changed my plot code to this...
var home_bar_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { highlightMouseOver:false, barMargin:5, shadowOffset:1 } },
axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { min:30, max:50 } }
};
But the plot doesn't change, and completely ignores the 'min' and 'max' values that I have entered for the y-axis scale.
Why is this?
I have not found any 'proper' way to move the axis on the bar chart, but I have managed to find a workaround.
My page is in PHP, and the data is coming from a mysql database.
So, after I have the data, and before I draw the bar chart plot, I get the minimum data value, and subtract that value from all my data!
So if my data is
35, 38, 36, 42, 40
I subtract 35 from all data, giving a new data set of
0, 3, 1, 7, 5
The bar chart will then plot this in a much better looking way!
Because I don't need to see actual data numbers, just the trend, this works ok for me - but wouldn't work if you needed a y-axis with a scale.
If anyone has a 'proper' way to properly adjust the bar plot y-axis away from zero, then I would be very happy to hear it!
But, for now, my workaround will suffice!
I am making a stacked multi chart bar graph like this one
http://nvd3.org/examples/multiBar.html
Till now I am able to push my values on Y- axis and X axis too but the problem I am facing is that the all the values are not getting displayed on the x axis but only 10 values are getting displayed . I am using nvD3 library in my angular code . and displaying date on x axis.
$scope.options1 = {
chart: {
type: 'multiBarChart',
height: 600,
margin: {
top: 20,
right: 20,
bottom: 200,
left: 45
},
clipEdge: false,
duration: 500,
stacked: true,
groupSpacing: 0.1,
useInteractiveGuideline: true,
showMaxMin: false,
xAxis: {
axisLabel: 'Timeline',
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
},
xScale:d3.time.scale(),
rotateLabels: '-70'
},
yAxis: {
axisLabel: 'Pending Bills',
axisLabelDistance: -20,
groupSpacing: 0.1,
tickFormat: function(d) {
return d3.format(',f')(d);
}
}
}
};
generating ticking value array using this function
$scope.options1.chart.xAxis.tickValues = function() {
var xTick = _.map(data.data.data[0].values, function(value) {
return value.x;
});
xTick = _.sortBy(xTick, function(date){ return new Date(date); });
console.log(xTick);
return xTick;
}
the output of the console.log(xTick) is something like this which is all dates -
["2015-09-01", "2015-09-02", "2015-09-03", "2015-09-04", "2015-09-05",
"2015-09-06", "2015-09-07", "2015-09-08", "2015-09-09", "2015-09-10",
"2015-09-11", "2015-09-12", "2015-09-13", "2015-09-14", "2015-09-15",
"2015-09-16", "2015-09-17", "2015-09-18", "2015-09-19", "2015-09-20",
"2015-09-21", "2015-09-22", "2015-09-23", "2015-09-24", "2015-09-25",
"2015-09-26", "2015-09-27", "2015-09-28", "2015-09-29", "2015-09-30",
"2015-10-01", "2015-10-02", "2015-10-03", "2015-10-04", "2015-10-05",
"2015-10-06", "2015-10-07", "2015-10-08", "2015-10-09", "2015-10-10",
"2015-10-11", "2015-10-12", "2015-10-13", "2015-10-14", "2015-10-15",
"2015-10-16", "2015-10-17", "2015-10-18", "2015-10-19", "2015-10-20"]
as much I read about the it. all the dates should be get plotted on x axis but they are not
If you want to display all the ticks on X-Axis, you can add this option to your chart options :
"reduceXTicks": false,
For extended option page you can visit :
Angular NVD3 - MultiBarChart
Hope it helps.
chart: {
type: 'chartType',
xAxis: {
ticks:8
}
}
You can try "ticks" property if you want to display a specific number of ticks on the axis.
Please open this link: http://c3js.org/samples/timeseries.html
Replace the code of textarea by following code:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04',],
['bottomline', null,30, 150, 250],
['topline', 130, 340, 350,null]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You will be able to see a graph like Fig:1 below.
Now I want to fill the area between two lines shown in the graph with some color. I want to make it like Fig:2 below.
Fig:1 and then Fig:2
Please help me on this.
Thanks in advance.
This is an old question, but just in case someone also meets this problem. Here is a working fiddle for filling between two lines.
Fill between two lines
Note: the null points should be handled before feeding to charts since null will be mapped to 0 automatically from C3 point of view.
Code snippet:
function fillArea(){
var indexies = d3.range( items.length );
var yscale = chart.internal.y;
var xscale = chart.internal.x;
var area = d3.svg.area()
.interpolate("linear")
.x(function(d) { return xscale(new Date(items[d].x)); })
.y0(function(d) { return yscale(items[d].bottomline); })
.y1(function(d) { return yscale(items[d].topline); });
d3.select("#mychart svg g").append('path')
.datum(indexies)
.attr('class', 'area')
.attr('d', area);}
[[["09251A0428",90],["10251A0547",37]],[["09251A0428",4],["10251A0547",54]]]
Above data contains two series. x values of each series are same. if the x values are numeric the jqplot displays line chart with two series as normal. but we need to display strings on x axis and for each string corresponding series values.
How to set strings on xaxis for multiple series line chart of jqplot?
I have preapared an example for you based on the data you gave:
JsFiddle link
$.jqplot.config.enablePlugins = true;
var chartData = [[["09251A0428",90],["10251A0547",37]],[["09251A0428",4],["10251A0547",54]]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', chartData, {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
pointLabels: {
show: true
}
},
axes: {
xaxis: {
pad: 1,
// a factor multiplied by the data range on the axis to give the
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData);