I am doing a bar chart and I have a problem with names of columns. I was trying also to give names of x and yAxes but here was a problem too.
That's my dates from database:
[{ "id": "1", "paliwo": "200", "przebieg": "150", "jedzenie": "0" }]
My code:
$(document).ready(function() {
$.ajax({
url: "data.php",
method: "GET",
success: function(data) {
console.log(data);
var paliwo = [];
var przebieg = [];
for (var i in data) {
paliwo.push(data[i].paliwo);
przebieg.push(data[i].przebieg);
}
var chartdata = {
labels: paliwo,
przebieg,
datasets: [{
label: 'Paliwo',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: paliwo
}, {
label: 'Przebieg',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: przebieg
}]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
this is because you have given labels:paliwo; Labels denotes the x axis and paliwo contains [200]
Related
I have a jsfiddle here - https://jsfiddle.net/nhww0uor/4/
I have a simple line graph using chart.js
The data is hard coded in the code.
How do I do the same thing but with data from json
var data = {
'January' : '65',
'February' : '59',
'March' : '80',
'April' : '81',
'May' : '56',
'June' : '55'
}
const CHART = document.getElementById('lineChart');
var lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ['January','February','March','April','May','June'],
datasets:[
{
label: 'My first dataset',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJointStyle: 'miter',
data: [65,59,80,81,56,55]
}
]
}
})
Considering you have the following JSON data ...
{
"January": 65,
"February": 59,
"March": 80,
"April": 81,
"May": 56,
"June": 55
}
You can use Object.keys() and Object.values() methods to parse labels and data respectively from that JSON data, for creating the chart.
Example
var data = {
"January": 65,
"February": 59,
"March": 80,
"April": 81,
"May": 56,
"June": 55
}
const CHART = document.getElementById('lineChart');
var lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: Object.keys(data),
datasets: [{
label: 'My first dataset',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJointStyle: 'miter',
data: Object.values(data)
}]
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
I want to do this chart:
As you can see the lines (Meta and Rango de aceptación) were drawed like a points. I believe this is because I only have one bar and in another charts I was made with 2 bars I get the lines drawed like a line.
This is the code, what I'm doing wrong?
<canvas id="myChart2016_5857751099b04" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas>
<script style="text/javascript">
var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04");
var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, {
type: 'bar',
data: {
labels: ["Año 1"],
datasets: [
{backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)',
type: 'line',
label: 'Meta',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)',
type: 'line',
label: 'Rango de aceptación ',
data: [90],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'],
type: 'bar',
label: 'Porcentaje de proveedores evaluados satisfactoriamente ',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 } ]},
options: {
tension:1,
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
xAxes: [{
categorySpacing: 20,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}],
yAxes: [{
categorySpacing: 20,
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
I tryed on Meta and Rango de aceptación data:
data: [100,100,100] and data: [90,90,90]
But the result is unexpected:
[
Assign your label below value it will start working.
labels: ["Año 1","",""]
Below is the working sample code
<script style="text/javascript">
var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04");
var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, {
type: 'bar',
data: {
labels: ["Año 1","",""],
datasets: [
{backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)',
type: 'line',
label: 'Meta',
data: [100,100,100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)',
type: 'line',
label: 'Rango de aceptación ',
data: [90,90,90],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'],
type: 'bar',
label: 'Porcentaje de proveedores evaluados satisfactoriamente ',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 } ]},
options: {
tension:1,
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
xAxes: [{
categorySpacing: 20,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}],
yAxes: [{
categorySpacing: 20,
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
In below code i need the tool tip to be like this Probability: 40 Audience: 5000 i.e in the tool tip i need xAxes labelstring with the xAxes value and yAxes labelstring with yAxes value.How to achieve this pls help
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Audience',
data: [{x:12,y:9000}, {x:30, y:6000}, {x:40, y:5000},{x:52,y:4000},{x:70,y:3000},{x:92,y:2000}],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 1
}]
},
options: {
tooltips:
{
callbacks:
{
label: function(tooltipItem, data) {return data.datasets[tooltipItem.datasetIndex].label+':'+ tooltipItem.yLabel;
}
}
},
scales: {
xAxes: [{
type: 'linear',position: 'bottom',
scaleLabel:{labelString:"Probability",display:true},
ticks: {
beginAtZero:true,
max:100
}
}],
yAxes: [{
scaleLabel:{labelString:"Audience",display:true},
ticks: {
min: 1000
}
}]
}
}
});
Just replace your "callbacks" block with this one:
callbacks:
{
title: function() {
return '';
},
beforeLabel: function(tooltipItem, data) {
return 'Probability: ' + tooltipItem.xLabel + '%';
},
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label+': '+ tooltipItem.yLabel;
}
}
I need assistance on how to dynamically bind my x-axis. I have written a webservice, that will fetch the data from the stored procedure.
I am stuck on displaying just the first column from the SP as for the x-axis.
$.ajax({
type: "POST",
url: "/path/path.asmx/xpath",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(data) {
alert("X_axis function is being hit")
// Parse JSON data:
var jsonCategories = eval('(' + data + ')');
alert(jsonCategories);
// Pass parsed data to the chart:
$('#Div3').xAxis[0].setCategories(jsonCategories);
}
})
// };
$('#Div3').highcharts({
chart: {
type: 'areaspline',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
}
},
title: {
text: 'Average Disc Space consumption',
style: { fontSize: 10, color: '#E0E0E3' }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#EEE'
},
legend: {
enabled: true
},
xAxis: {
categories: [],
labels: {
style: {
color: '#E0E0E3'
}
},
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Disc (GB)',
style: { fontSize: 10, color: '#E0E0E3' }
},
labels: {
style: {
color: '#E0E0E3'
}
}
},
tooltip: {
shared: true,
valueSuffix: ' GB'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'DB size',
data: [20, 10, 65, 3, 55, 62, 58]
}, {
name: 'Data size',
data: [19, 34, 47, 31, 3, 54, 41]
},
{
name: 'Log size',
data: [11, 34, 49, 38, 38, 80, 10]
},
{
name: 'Backup size',
data: [1, 32, 47, 3, 39, 59, 4]
}
]
});
I am trying to read the data from csv and display it as a input to Speedometer but I am unable to get the chart. Please tell me where i am going wrong.
My code is:
$(document).ready(function() {
var options = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: []
};
$.get('data.csv', function(data) {
var series = {
data: [],
name: 'Speed',
tooltip: {
valueSuffix: ' km/h'
}
};
series.data.push(parseFloat(data));
options.series.push(series);
alert("data "+options.series);
var chart = new Highcharts.Chart(options);
});
});
and the csv file is simple
data.csv has only one value 30.
or incase it is
t1,30
t2,40
t3,60
how do i display 3 corresponding speedometers with respective speed.
Your help is greatly appreciated.
Thanks in advance.
In your case data your data (from ajax) is a single string, but you need to split elements and then choose which should be parsed to integer (parseFloat).