I have been looking into c3.js for a few days now. Its been able to produce graphs for most of my needs.The only thing I cant figure out to do with it is , how to display a bar chart when you have high and low values specified.
ex: my sample array will be something like this
Categories : ['cat1', 'cat2' ,'cat3' ,'cat4']
Low : [0,0,50,40]
High : [90,80,40,60]
Basically each bar for each category will be based on these high and low values.
Thanks !
You can try this sample:
var chart = c3.generate({
data: {
columns: [
['Low', 0,0,50,40],
['High', 90,80,40,60]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4']
}
}
});
Result:
To know how to install c3.js, please read an official documentation
Related
I'm using C3 to create a bar chart. I am using JSON formatted data, with a category axis.
I have a subchart i am using to implement scrolling and i would like to set a default extent with axis.x.extent.
Regardless of what i put in the extent array, C3 ignores it and displays the entire thing.
Code looks like this:
var chart = c3.generate({
bindto: this.$element[0],
data: {
json: [{name: 'name-01', count: 3}, {name: 'name-02', count: 9}, {name: 'name-03', count: 7}],
keys: { value: ['count'], x: 'name' },
type: 'bar',
}
axis: {
x: {
type: 'category',
extent: ['name-01', 'name-02']
}
}
},
subchart: {
show: true
}
});
Because the x values are category names, it seems i cant just use indexes. According to other stackoverflow posts.
According to other stackoverflow posts it seems like i am supposed to directly put in the category names. But that isnt working either. C3 still ignores it.
I have also tried using min and max instead of extent, which works, however it also sets it for the subchart, which makes it useless.
Theres very little to no documentation.
Anyone have any ideas?
You can achieve this by using chart.zoom
chart.zoom([0,1]);
can you can reset it using "unzoom"
chart.unzoom();
While its more than likely an error of my own making could someone help me.
I have a polarchart with 6 datapoints that only displays 5 datapoints when plotted.
If its an issue I'll open 1 on GitHub but I was thinking that if its down to my poor code maybe its worth opening an issue to prevent others having the same issue
Using only the chartjs available via CDN link https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js , jquery 1.12.3 and the following script in a basic html file
can anyone reproduce the issue where the chart has 6 labels, 6 data points but **only plots 5 **
All files included in uploaded zip file
PolarChart.zip
<script>
$(document).ready(function(){
var ctx = $("#mypolar").get(0).getContext("2d");
// Polar Chart Data
//labels "Communicate ", "Create ", "Find & Use", "Identity & Wellbeing", "Teach & Learn", "Tools & Technology"
var data = {
datasets: [{
data: [1, 3, 5, 6, 2, 4],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360","#F7554A"],
label: 'My dataset' // for legend
}],
labels: ["Communicate & Collaboarate", "Create & innovate", "Find & Use", "Identity & Wellbeing", "Teach & Learn","Tools & Technology"]
};
//Plot the Radar Chart
var myRadarChart = new Chart(ctx, {
type: 'polarArea',
data: data,
//options: options
});
});
</script>
All your points are being plotted (if you count the number of sectors there are 6 sectors). The problem was that your scale was beginning from the lowest value (1 - the value of your first point) causing nothing to be seemingly plotted for the 1st point.
You can override the scale to begin from 0 if you want to show all points
...
options: {
scale: {
ticks: {
beginAtZero:true
}
}
}
Fiddle - http://jsfiddle.net/ja08nzm5/
I am trying to plot a datetime chart in highchart. I am passing series map from java HashMap and accessing it in js as:
var chartRoot = '#{value}'.evalJSON(true);
And feeding the map in series as:
series : [{color:'#057E7E',
data : chartRoot.series[0].y1axis,
name:'#{empty y1axistitle ? '' : y1axistitle}',
type: 'line',
tooltip: {
valuePrefix: ''
}
},{
color:'#FF8230',
data : chartRoot.series[0].y2axis,
name:'#{empty y2axistitle ? '' : y2axistitle}',
type: 'line',
tooltip: {
valuePrefix: '$'
},
yAxis: 1
}]
where y1axis and y2axis are hashMap with data for 2 y axis.
I am not able to plot graph like this. I even changed the type of hash map to but it did not work.
Please help me I am new to highchart.
Thanks in Advance.
It is problem with your data. Currently you have object:
{
1325376000000: 1.09,
1330560000000: 1.66,
1333238400000: 0.55,
more...
}
While there should be:
[
[1325376000000, 1.09],
[1330560000000, 1.66],
[1333238400000, 0.55],
more...
]
You can re-format this in JS:
var myData = [];
for (var time in chartRoot.series[0].y1axis) {
myData.push([time, chartRoot.series[0].y1axis[time]]);
}
And now use myData in series.data option.
I'm drawing a graph to show how many people completed our app and how many people failed going through all the steps. To do this my company has decided to use the library d3 to show the charts. However, on the pie chart they want a whole number to show instead of the default percentage and I can't seem to find any documentation on this.
My code for this looks like this
c3.generate({
bindto: '.pieChart',
data: {
columns: [
['Started', Started],
['Completed', Completed]
],
type: 'pie'
}
});
Any help would be appreciated!
The documentation is pretty clear.
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 50]
],
type: 'pie'
},
pie: {
label: {
format: function(value, ratio, id) {
return value;
}
}
}
});
Example here.
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});