I tried to use this example in order to create a C3 chart. But its using all the data in the api. I am using angularjs.
my data looks like this
[
No:1
Name:'abc'
Id:3
Value:34
]
here is my code
d3.json("http://api.mydata", function(data) {
var convertedData = [];
data.forEach(function(item){
convertedData.push([item.Id, item.Value]);
});
var chart = c3.generate({
bindto : '#chartContainer',
data : {
columns : [convertedData]
},
keys: {
x: convertedData.ID,
value: convertedData.Value
}
});
});
thanks
The data field has to be populated with information about the axis as well. Here you have a functional example (sorry for the Spanish variables):
var chart = c3.generate({
bindto: "#chart-" + value.siglas,
data: {
x: 'x',
x_format: '%Y',
columns: [
['x', new Date('2011'), new Date('2012'), new Date('2013'), new Date('2014')],
['Primera matrícula', value.tasas_2011.tasas1, value.tasas_2012.tasas1, value.tasas_2013.tasas1, value.tasas_2014.tasas1],
['Segunda matrícula', value.tasas_2011.tasas2, value.tasas_2012.tasas2, value.tasas_2013.tasas2, value.tasas_2014.tasas2],
['Tercera matrícula', value.tasas_2011.tasas3, value.tasas_2012.tasas3, value.tasas_2013.tasas3, value.tasas_2014.tasas3],
['Cuarta matrícula', value.tasas_2011.tasas4, value.tasas_2012.tasas4, value.tasas_2013.tasas4, value.tasas_2014.tasas4],
['Media nacional' + averageErrorFlag, average['tasas_2011'].toFixed(2), average['tasas_2012'].toFixed(2), average['tasas_2013'].toFixed(2), average['tasas_2014'].toFixed(2)]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
In data, the format of the x axis and the values (in this graphic you have four variables and the x value) are included. You can also format the x axis with the axis key.
Related
I've been trying for 3 days to get this chart to display the way I want it to. Everything was working 100% until I realized the grouped bar chart numbers were off.
Example: When the bottom bar value equals 10 and the top bar value equals 20, the top of the grouped bar read 30. This is the default behavior, but not how I want to represent my data. I want the top of the grouped bar to read whatever the highest number is, which lead me to this fiddle representing the data exactly how I wanted to.
After refactoring my logic, this is what I have so far. As you can see the timeseries line is broken up and the tooltip is not rendering the group of data being hovered over.
My questions:
1) How to get the tooltip to render all three data points (qty, price, searches)
2) How to solidify the timeseries line so it's not disconnected
Any help would be greatly appreciated so I can move on from this 3 day headache!
Below is most of my code - excluding the JSON array for brevity, which is obtainable at my jsfiddle link above. Thank you in advance for your time.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x-axis',
type: 'bar',
json: json,
xFormat: '%Y-%m-%d',
keys: {
x: 'x-axis',
y: 'searches',
value: ['qty', 'searches', 'price']
},
types: {
searches: 'line'
},
groups: [
['qty', 'price']
],
axes: {
qty: 'y',
searches: 'y2'
},
names: {
qty: 'Quantity',
searches: 'Searches',
price: 'Price ($)'
},
colors: {
price: 'rgb(153, 153, 153)',
qty: 'rgb(217, 217, 217)',
searches: 'rgb(255, 127, 14)'
}
},
bar: {
width: {
ratio: 0.60
}
},
axis: {
x: {
type: 'timeseries',
label: { text: 'Timeline', position: 'outer-right' },
tick: {
format: '%Y-%m-%d'
}
},
y: {
type: 'bar',
label: {
text: 'Quantity / Price',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Searches',
position: 'outer-middle'
}
}
},
tooltip: {
grouped: true,
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
var data = this.api.data.shown().map(function(series) {
var matchArr = series.values.filter(function(datum) {
return datum.value != undefined && datum.x === d[0].x;
});
if (matchArr.length > 0) {
matchArr[0].name = series.id;
return matchArr[0];
}
});
return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color);
}
}
});
1) If I got it right, you want tooltip to show all values, even if some of them are null.
Null values are hidden by default. You can replace them with zero (if it is suitable for your task) and thus make them visible.
Also, it seems to me that there is a shorter way to get grouped values:
var data = chart.internal.api.data().map(function(item) {
var row = item.values[d[0].index]; // get data for selected index
if (row.value === null) row.value = 0; // make null visible
return row;
});
2) I think you are talking about line.connectNull option:
line: {
connectNull: true
}
UPDATE
Looks like having duplicate keys breaks work of api.data() method.
You need to change json structure to make keys unique:
Before:
var json = [
{"x-axis":"2017-07-17","qty":100},
{"x-axis":"2017-07-17","price":111},
{"x-axis":"2017-07-17","searches":1},
{"x-axis":"2017-07-18","qty":200},
{"x-axis":"2017-07-18","price":222},
{"x-axis":"2017-07-18","searches":2}
];
After:
var json = [
{"x-axis":"2017-07-17","qty":100,"price":111,"searches":1},
{"x-axis":"2017-07-18","qty":200,"price":222,"searches":2}
];
See fiddle.
I have created Pie chart and it is working ok. In Pie Chart, Labels are showing % values and it is also fine. But now I just want to show % value in Legend item text also.
var ChartDesignCreated = c3.generate({
bindto: "#Chart1",
data: {
columns: [
['Football', 10)],
['Cricket', 10)],
],
type: 'pie'
}
});
Legend item text should be display like :
Football = 50%
Cricket = 50%
Is it possible?
Thanks.
There are no built-in way to do that.
However, you can just put percentage into data label texts before chart rendering:
var columns = [
['data1', 30],
['data2', 120]
];
var total = columns.reduce(function(sum, item) {
return sum + item[1]
}, 0);
columns = columns.map(function(item) {
return [
item[0] + ' = ' + d3.format('.1%')(item[1] / total),
item[1]
]
});
var chart = c3.generate({
data: {
columns: columns,
type : 'pie'
}
});
https://jsfiddle.net/Dimmy/y2LLftx0/2/
Trying to display line chart using plotly.js, my data are collected per second. I fed my graph but the result looks strange even if I zoom in, to very low detail where it should be displayed per seconds.
Are there any methods I could use to preprocess the data so it would display well in different scales (as I zoom in and out)?
var gd = document.getElementById('tester');
var layout = {
xaxis: {
showgrid: true,
tickformat: "%H:%M:%S",
},
margin: {
l: 40,
b: 40,
r: 30,
t: 20
},
hovermode: 'x',
};
var draw = function(data, layout) {
Plotly.newPlot(gd, data, layout, {
showLink: false,
displaylogo: false
});
};
var dataurl = 'https://gist.githubusercontent.com/fhurta/6c53839fbc91a363d62966a972a5e4a2/raw/2cd735f0b024e496164dacec92fa4a7abcd5da2e/series.csv';
Plotly.d3.csv(dataurl, function(rows) {
var data = [{
type: 'scatter',
x: rows.map(function(row) {
return new Date(row['Time']);
}),
y: rows.map(function(row) {
return row['Value1'];
}),
line: {
width: 1
}
}];
draw(data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
js is a very good library, but I have a problem:
in my graph each bar represents a value produced between two hours, but the tick text is below the bar and I want to get it between the bar !
my type of x-axis is "type: 'category'"
data = ['x', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']
Can someone help me?
Thank you in advance.
I have :
http://hpics.li/9fc4863
I want :
http://hpics.li/1fb1090
You could convert your x axis to a timeseries and have the values tagged to the actual midpoint of your hour ranges (12.30, 1.30...)
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x',
new Date('2013-01-01T00:30'),
new Date('2013-01-01T01:30'),
new Date('2013-01-01T02:30'),
new Date('2013-01-01T03:30')],
['data1', 30, 200, 100, 400]
],
type: 'bar'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M',
values: [
new Date('2013-01-01T00:00'),
new Date('2013-01-01T01:00'),
new Date('2013-01-01T02:00'),
new Date('2013-01-01T03:00'),
new Date('2013-01-01T04:00')
],
rotate: -90
},
height: 50
}
}
});
Fiddle - http://jsfiddle.net/v4z45zzj/
I tried to find several places how this work but could not.
The requirement is to drill down by clicking on the slice of the pie to next level. I can get the onclick even but not sure how to get the value from the chart. Everywhere it is pointing to http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/ but nowhere any live demo is given. Till now i have managed to get the onclick.
chart.addSeries("Monthly Sales - 2010", chartData);
var h = chart.connectToPlot("default", function(o){
if(o.type == "onclick"){
alert("clicked!");
}
});
var store = new dojo.store.Memory({data: [
{ id: '2', value: 10, usedForDrillDown:'x' },
{ id: '3', value: 5, usedForDrillDown: 'y' },
{ id: '4', value: 8, usedForDrillDown:'z' }
]});
// adapter needed, because the chart uses the dojo.data API
var storeAdapter = new dojo.data.ObjectStore({
objectStore: store
});
var ds = new dojox.charting.DataSeries(
storeAdapter/*, { query: { needed if the store contains more than data points } }*/);
var chart = new dojox.charting.Chart("chart");
chart.addPlot("default", { type: "Pie" });
chart.addSeries("default", ds);
chart.connectToPlot("default", function(evt) {
if(evt.type == "onclick"){
var itm = evt.run.source.items[evt.index];
console.dir(itm);
}
});
chart.render();