Related
I wonder if there's any way to remove opacity from bar charts built with Chartkick in combination with ChartJS? They always appear semi-transparent, no matter what I do.
This is what I've got so far:
<%=
column_chart(
[
{:data => #invoices},
{:data => #payments}
],
:id => "chart",
:stacked => true,
:colors => ["#E91E63", "#003366"],
:legend => false,
:dataset => {:borderWidth => 0}
)
%>
Thanks for any help.
For two different color with two data-set for proper data comparison Check code snippet
//START Common for all chart
var legend = {
display: true,
position: 'bottom',
labels: {
fontColor: '#000'
}
};
//END Common for all chart
//Dataset
var data1 = {
label: 'Dataset 1',
data: [4, 6, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 99, 132, 1)', //Set 1 for remove transparency
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
};
var data2 = {
label: 'Dataset 2',
data: [5, 2, 3, 4, 6, 3],
backgroundColor: 'rgba(54, 162, 235, 1)', //Set 1 for remove transparency
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
};
var Dataset = [data1, data2]
// Dataset
//START Bar chart
var option = {
scales: {
yAxes: [{
gridLines: {
offsetGridLines: true
},
categorySpacing: 5,
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
//maintainAspectRatio: false,
legend: legend,
//onClick: LoadDataInDetails
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: Dataset
},
options: option
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
OK, it seems that only RGB colours can be passed into column_chart() (correct me if I'm wrong). This is what I ended up with:
<%=
column_chart(
[
{:data => #invoices},
{:data => #payments}
],
:id => "chart",
:stacked => true,
:colors => [to_rgba("#E91E63"), to_rgba("#003366")],
:legend => false,
:dataset => {:borderWidth => 0}
)
%>
module ColorHelper
def to_rgba(hex_value)
opacity = 1
hex_value = hex_value.gsub('#', '')
rgb_values = hex_value.scan(/../).map{ |x| x.hex }
rgb_values << opacity
"rgba(#{rgb_values.join(',')})"
end
end
Not perfect, but it gets the job done.
I have an issue when displaying a chart. I have a function that load data by default for today. After that, I can select a date range. But there is an issue when hovering on labels. They load old chart values and lines. I know that I need to use destroy or update function. But I don't know how to implement it in my code.
Script:
<script type="text/javascript">
$(document).ready(function() {
getdata_chart();
{{-- chartjs --}}
function getdata_chart(start_date='', end_date='')
{
$.ajax({
url: "{{ route('ajaxdata.getdata_chart') }}",
method: "GET",
data:{
start_date:start_date, end_date:end_date
},
success: function(data) {
console.log(data);
var timeFormat = 'DD MMM YYYY г. kk:mm:ss ч.';
var progress = document.getElementById('animationProgress');
var dateANDtime = [];
var Gblok9osx = [];
var Gblok9osy = [];
var Gblok11osx = [];
var Gblok11osy = [];
var Gfilblok10 = [];
var Gfilblok11 = [];
var Gcvn = [];
var Gndk = [];
var Gndk2 = [];
for (var i in data) {
dateANDtime.push(data[i].timestamp);
Gblok9osx.push(data[i].blok9osx);
Gblok9osy.push(data[i].blok9osy);
Gblok11osx.push(data[i].blok11osx);
Gblok11osy.push(data[i].blok11osy);
Gfilblok10.push(data[i].filblok10);
Gfilblok11.push(data[i].filblok11);
Gcvn.push(data[i].cvn);
Gndk.push(data[i].ndk);
Gndk2.push(data[i].ndk2);
}
var chartdata = {
labels: dateANDtime,
datasets: [{
fill: false,
label: 'Отвес блок 9 x',
backgroundColor: 'rgba(199, 228, 238, 0.75)',
borderColor: 'rgba(1, 150, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 0.75)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok9osx,
hidden: false
},
{
fill: false,
label: 'Отвес блок 9 y',
backgroundColor: 'rgba(163, 147, 222, 0.75)',
borderColor: 'rgba(50, 10, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok9osy,
hidden: true
},
{
fill: false,
label: 'Отвес блок 11 x',
backgroundColor: 'rgba(221, 221, 241, 0.75)',
borderColor: 'rgba(100, 100, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok11osx,
hidden: true
},
{
fill: false,
label: 'Отвес блок 11 y',
backgroundColor: 'rgba(147, 227, 227, 0.75)',
borderColor: 'rgba(1, 200, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gblok11osy,
hidden: true
},
{
fill: false,
label: 'Филтрация блок 10',
backgroundColor: 'rgba(139, 105, 132, 0.75)',
borderColor: 'rgba(255, 1, 200, 0.75)',
//hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: Gfilblok10,
hidden: true
},
{
fill: false,
label: 'Филтрация блок 11',
backgroundColor: 'rgba(0, 200, 1, 1)',
borderColor: 'rgba(0, 101,1, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gfilblok11,
hidden: true
},
{
fill: false,
label: 'КВН',
backgroundColor: 'rgba(30, 100, 100, 1)',
borderColor: 'rgba(100, 200,1, 0.75)',
hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gcvn,
hidden: true
},
{
fill: false,
label: 'КДК',
backgroundColor: 'rgba(30, 100, 100, 1)',
borderColor: 'rgba(100, 200,1, 0.75)',
hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gndk,
hidden: true
},
{
fill: false,
label: 'НДК',
backgroundColor: 'rgba(30, 100, 100, 1)',
borderColor: 'rgba(100, 200,1, 0.75)',
hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
hoverBorderColor: 'rgba(50, 50, 50, 1)',
data: Gndk2,
hidden: true
}
]
};
$('#reset_zoom').click(function() {
barGraph.resetZoom();
})
$("#save-btn").click(function() {
$("#mycanvas").get(0).toBlob(function(blob) {
saveAs(blob, "chart_1.png");
});
});
var config = {
type: 'line',
data: chartdata,
options: {
responsive: true,
title: {
display: true,
text: 'Диаграма: Отвеси и филтрации'
},
scales: {
yAxes: [{
type: type,
scaleLabel: {
display: true,
labelString: '[ mm ] ,[ m ], [ l/s ]'
},
ticks: {
beginAtZero: false
}
}],
xAxes: [{
type: 'time',
time: {
tooltipFormat: timeFormat,
displayFormats: {
'hour': timeFormat
}
},
scaleLabel: {
display: true,
labelString: 'Дата/Час'
},
ticks: {
beginAtZero: true
}
}]
},
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'y'
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy'
},
animation: {
duration: 2000,
onProgress: function(animation) {
progress.value = animation.currentStep / animation.numSteps;
},
onComplete: function() {
window.setTimeout(function() {
progress.value = 0;
}, 2000);
}
},
legend: {
display: true,
labels: {
//fontColor: 'rgb(255, 99, 132)'
usePointStyle: true
}
}
},
plugins: [{
beforeDraw: function(c) {
var reset_zoom = document.getElementById("reset_zoom"); //reset button
var ticks = c.scales['x-axis-0', 'y-axis-0'].ticks.length; //x-axis ticks array
var labels = c.data.labels.length; //labels array
if (ticks < labels) reset_zoom.hidden = false;
else reset_zoom.hidden = true;
}
}]
};
var type = 'linear';
var ctx = document.getElementById("mycanvas");
var barGraph = new Chart(ctx, config);
window.onload = function() {
var ctx = document.getElementById("mycanvas");
window.myLine = barGraph;
};
document.getElementById('toggleScale').addEventListener('click', function() {
type = type === 'linear' ? 'logarithmic' : 'linear';
window.myLine.options.title.text = 'Диаграма('+type+'): Отвеси и филтрации';
window.myLine.options.scales.yAxes[0] = {
display: true,
type: type
};
window.myLine.update();
}); //end data
},
error: function(data) {
console.log(data);
}
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date != '')
{
getdata_chart(start_date, end_date);
}
else
{
alert('Both Date is required');
}
});
});
</script>
in to the controller:
function getdata_chart(Request $request)
{
$start_date = date('d-m-Y 00:00:00');
$end_date = date('d-m-Y 23:59:59');
if($request->start_date != '' && $request->end_date != '')
{
$dateScope = array($request->start_date ." 00:00:00", $request->end_date ." 23:59:59");
} else {
$dateScope = array($start_date, $end_date);
};
$students = otv_fil::whereBetween('timestamp', $dateScope)
->selectRaw('timestamp,blok9osx,blok9osy,blok11osx,blok11osy,filblok10,filblok11,cvn,ndk,ndk - ? as ndk2',[743.38])
->orderBy('timestamp', 'ASC')
->get();
return response()->json($students);
}
The main part need to be in search click function right?
I made a bar graph with c3.js and I need to add non consecutive days to the graph
The problem is that the graph adds empty days
http://c3js.org/samples/timeseries.html
I used this code, it is possible to copy and paste code in page and see live result
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You can use a category axis instead of a timeseries axis. Check the example:
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
],
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}});
I am developing a django app using the Django Rest Framework with chart.JS in order to render some chart.
My ajax call is taking a long long long time and I am on local..
Is there a way to check what is taking so long in order to know where to look in order to refactor ?
it takes on average on local between 10 and 15 second each time..
Here is my code for example:
<script>
var endpoint = 'api/chart/data2'
$('.ajaxProgress').show();
$('.dashboard-container').hide();
function getAvg(grades) {
return grades.reduce(function (p, c) {
return p + c;
}) / grades.length;
}
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
console.log(data)
complete_data = data.team_complete,
info_data = data.team_info_score,
motiv_data = data.team_motiv_score,
action_data = data.team_action_score,
behaviour_data = data.team_behaviour_score,
user_list = data.users,
user_dist = data.user_dist,
info_dist = data.info_dist,
motiv_dist = data.motiv_dist,
action_dist = data.action_dist,
behav_dist = data.behav_dist,
info_label = data.info_label,
motivation_label = data.motivation_label,
action_label = data.action_label,
behav_label = data.behav_label,
complete_label = data.complete_label,
cohesiveness_score = data.cohesiveness_score
var bar_color = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(255, 99, 132, 0.2)'
]
var ctx = document.getElementById("mainGraph").getContext('2d');
var ctx2 = document.getElementById("mainGraph2").getContext('2d');
var ctx3 = document.getElementById("mainGraphLine1").getContext('2d');
var ctx4 = document.getElementById("mainGraphLine2").getContext('2d');
var ctx5 = document.getElementById("mainGraphLine3").getContext('2d');
var ctx6 = document.getElementById("mainGraphLine4").getContext('2d');
$('.ajaxProgress').hide();
$('.dashboard-container').show();
var canvas = document.getElementById("mainGraph");
var mainGraph = new Chart(ctx, {
type: 'bar',
data: {
labels: complete_label,
datasets: [{
data: complete_data,
backgroundColor: bar_color ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false}
}]
}
},
});
//end graph 1//
canvas.onclick = function(evt) {
var activePoints = mainGraph.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var str_label = label.toString()
console.log(str_label)
var value = chartData.datasets[0].data[idx];
if(label == "General,Details"){
$('#general').modal('show');
} else if(label == "Sameness,Difference"){
$('#sameness').modal('show');
} else if(label == "Visual,Auditory"){
$('#visual').modal('show');
} else if(label == "Static,Process"){
$('#static').modal('show');
} else if(label == "Best Scenario,Worst Scenario"){
$('#bestScenario').modal('show');
} else if(label == "Binary,Shades"){
$('#binary').modal('show');
} else if(label == "External,Internal"){
$('#external').modal('show');
} else if(label == "Go Away,Toward"){
$('#goAway').modal('show');
} else if(label == "Things"){
$('#things').modal('show');
} else if(label == "Variety,Routine"){
$('#variety').modal('show');
} else if(label == "Active,Reaction"){
$('#active').modal('show');
} else if(label == "Manager worker"){
$('#manager').modal('show');
} else if(label == "Option,Procedure"){
$('#option').modal('show');
} else if(label == "Perfection,Optimizing"){
$('#perfection').modal('show');
} else if(label == "Sensor,Intuition"){
$('#sensor').modal('show');
} else if(label == "External locus,Internal locus"){
$('#locus').modal('show');
} else if(label == "Strong Will,Compliant"){
$('#will').modal('show');
} else if(label == "In time,Through time"){
$('#time').modal('show');
} else{
$('#modeling').modal('show');
}
}}
;
//graph 2 //
var mainGraph2 = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: user_list,
datasets: [{
data: user_dist,
backgroundColor: bar_color ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
min: 0,
max:100,
}
}]
},
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: getAvg(user_dist),
borderColor: "rgba(216, 138, 138, 1)",
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 10,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 2//
//graph 3 //
var mainGraphLine1 = new Chart(ctx3, {
type: 'line',
data: {
labels: info_label,
datasets: [{
data: info_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(info_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 3//
//graph 4 //
var mainGraphLine2 = new Chart(ctx4, {
type: 'line',
data: {
labels: motivation_label,
datasets: [{
data: motiv_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(motiv_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 4//
//graph 5 //
var mainGraphLine3 = new Chart(ctx5, {
type: 'line',
data: {
labels: action_label,
datasets: [{
data: action_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(action_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 5//
//graph 6 //
var mainGraphLine4 = new Chart(ctx6, {
type: 'line',
data: {
labels: behav_label,
datasets: [{
data:behav_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)',
}]
},
options: {
legend: {
position: 'top',
display: false
},
responsive:true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {autoSkip: false,
beginAtZero: true,
}
}],
yAxes: [{
ticks: {min: 0, max:100}
}],
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(behav_dist),
borderColor: "rgba(216, 138, 138, 0.8)",
borderWidth: 0.5,
label: {
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
}
}
]
}
},
});
//end graph 6//
}
})
</script>
You can test you django api using postman. You will get the execution time there.
Also if you want to profile your django app you can refer the following link profiling django
I have a c3.js bar graph with a subgraph and zooming enabled. I would like for the graph to show more x-tick labels and make the bars a little wider when the user selects a smaller area.
Here's what my graph looks like zoomed out (left) and zoomed in (right):
Here's a fiddle.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 1.0 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});
I'd like it to look more like this when zoomed in:
.
Is there a way to make this happen using C3?
copy the code to your fiddle js panel. type: 'categories' changes the bar scales.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 0.8 }
},
axis: {
x: {
type: 'categories',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});