I cannot figure out where to put the options in Chart.js on my bar graph. (I am not a programmer.)
Here is the code that I have:
<canvas id="canvasOne" height="450" width="450"></canvas>
<script>
var barChartData = {
labels: ["test "],
datasets: [
{
fillColor: "#153b63",
data: [61]
},
{
fillColor: "#e99555",
data: [25]
}]
}
var myLine = new Chart(document.getElementById("canvasOne").getContext("2d")).Bar(barChartData);
</script>
All I want to do is hide the labels. The option to do this exists, and it's called scaleShowLabels: false, but I have no idea where to put it in the code. The documentation does not show this either.
You need to pass it as an option:
options = {
scaleShowLabels : false
};
var barChartData = {
labels : ["test "],
datasets : [
{
fillColor : "#153b63",
data : [61]
},
{
fillColor : "#e99555",
data : [25]
}
]
};
var myLine = new Chart(document.getElementById("canvasOne").getContext("2d")).Bar(barChartData, options);
Related
I wanted to get percentage of each slice of pie . I am using chart.js for visualizing feedback results. Below is the code i am using
<script>
var xValues = ["very satisfied", "satisfied", "neutral", "dissatisifed", "very dissatified"];
var yValues = {{ faculty_feedback_data }};
var barColors = [
"#b91d47",
"#00aba9",
"#2b5797",
"#e8c3b9",
"#1e7145"
];
faculty_questionnaire = [questions are inserted here ]
faculty_chart_ids = ["faculty-chart1", "faculty-chart2", "faculty-chart3", "faculty-chart4", "faculty-chart5", "faculty-chart6", "faculty-chart7", "faculty-chart8", "faculty-chart9", "faculty-chart10", "faculty-chart11", "faculty-chart12", "faculty-chart13"]
for (let i = 0; i < faculty_chart_ids.length; i++) {
new Chart(faculty_chart_ids[i], {
type: "pie",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues[i]
}]
},
options: {
title: {
display: true,
text: faculty_questionnaire[i]
},
},
});
}
</script>
I'm working with chart using Canvas JS , I have problem to fetch data .
I have result json_encode() like this :
[{“jumlah_berita”:2,”nama_kategori”:”Music”},{“jumlah_berita”:1,”nama_kategori”:”Sport”},{“jumlah_berita”:1,”nama_kategori”:”Agama”},{“jumlah_berita”:0,”nama_kategori”:”Teknologi”},{“jumlah_berita”:1,”nama_kategori”:”Pendidikan”},{“jumlah_berita”:0,”nama_kategori”:”Cinta”},{“jumlah_berita”:0,”nama_kategori”:”coba test”}]
I already read documentation Canvas JS about Accepted Data CanvasJS, It's mean my json not valid.
My Question is, How to convert JSON
From:
[
{“jumlah_berita”:2,”nama_kategori”:”Music”},
{“jumlah_berita”:1,”nama_kategori”:”Sport”},
{“jumlah_berita”:1,”nama_kategori”:”Agama”},
{“jumlah_berita”:0,”nama_kategori”:”Teknologi”},
{“jumlah_berita”:1,”nama_kategori”:”Pendidikan”},
{“jumlah_berita”:0,”nama_kategori”:”Cinta”},
{“jumlah_berita”:0,”nama_kategori”:”coba test”}
]
To :
[{y:2,label:"Music"},
{y:1,label:"Sport"},
{y:1,label:"Agama"},
{y:0,label:"Teknologi"},
{y:2,label:"Pendidikan"}]
Thank's
It's My code to make Chart
<script>
window.onload = function() {
var tampil_kategori = '<?= $tampil_kategori ?>';
var newdataPoints = JSON.parse(tampil_kategori);
var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: "Jumlah Berita(per Kategori)"
},
data: [{
type: "column",
dataPoints: newdataPoints
}]
});
jumlahBerita.render();
}
</script>
You can use map:
const to = from.map(item => ({
y: item.jumlah_berita,
label: item.nama_kategori
}));
EDIT
window.onload = function() {
var tampil_kategori = [
{“jumlah_berita”:2,”nama_kategori”:”Music”},
{“jumlah_berita”:1,”nama_kategori”:”Sport”},
{“jumlah_berita”:1,”nama_kategori”:”Agama”},
{“jumlah_berita”:0,”nama_kategori”:”Teknologi”},
{“jumlah_berita”:1,”nama_kategori”:”Pendidikan”},
{“jumlah_berita”:0,”nama_kategori”:”Cinta”},
{“jumlah_berita”:0,”nama_kategori”:”coba test”}
];
// map here --------------------------------
var newdataPoints = tampil_kategori.map(item => ({
y: item.jumlah_berita,
label: item.nama_kategori
}));
// -----------------------------------------
var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: "Jumlah Berita(per Kategori)"
},
data: [{
type: "column",
dataPoints: newdataPoints
}]
});
jumlahBerita.render();
}
I have more doughnut charts in one page, every chart have different data but I show the same tooltips. It's tooltips of the last chart. I don't found the problem.
This is js code:
var idList = [];
// --------------------
// Memo ID list...
// --------------------
jQuery('.idKQI').each(function (i) {
idList.push( jQuery(this).text() );
});
var idListLength = idList.length;
// ------------------
// Doughnut loop...
// ------------------
var dataDoughnutChart = {
labels: [
'KO',
'OK'
],
datasets: [{
data: [30,70],
backgroundColor: [
'#DF0101', // red
'#31B404' // green
]
}]
};
var optionsDoughnutChart = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
tooltips: {
mode: 'dataset'
}
};
var idLav;
var ctxDoughnut;
var labelAdd;
var errati;
var esatti;
for (var i = 0, max = idListLength; i < max; i++) {
idLav = '#' + idList[i] + "_chartDoughnut";
ctxDoughnut = jQuery(idLav);
labelAdd = jQuery(idLav).data("labeladd");
errati = jQuery(idLav).data("errati");
esatti = jQuery(idLav).data("esatti");
dataDoughnutChart.labels[0] = 'Errati' + labelAdd;
dataDoughnutChart.labels[1] = 'Esatti' + labelAdd;
dataDoughnutChart.datasets[0].data[0] = errati;
dataDoughnutChart.datasets[0].data[1] = esatti;
var myDoughnutChart = new Chart(ctxDoughnut, {
type: 'doughnut',
data: dataDoughnutChart,
options: optionsDoughnutChart
});
}
If I have two doughnut chart, in witch in the first chart datasets.data = [10,90], and in the second chart datasets.data = [2,98], the tooltips for all two chart show 'Errati: 2' and 'Esatti: 98'. It's values like the second chart.
I'm also try to use an array for var dataDoughnutChart like:
var myDoughnutChart = new Chart(ctxDoughnut, {
type: 'doughnut',
data: dataDoughnutChart[i],
options: optionsDoughnutChart
});
but don't resolve.
Thanks for your help.
Resolved like below:
// .....
configDoughnutList.push(
{
type: 'doughnut',
data: {
datasets: [{
data: [
30,
70
],
backgroundColor: [
'#DF0101', // rosso
'#31B404' // verde
],
label: 'daughnut_163'
}],
labels: [
'Errati',
'Corretti'
]
},
options: {
responsive: true,
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
mode: 'dataset'
}
}
}
);
configDoughnutList[i].data.datasets[0].data[0] = errati;
configDoughnutList[i].data.datasets[0].data[1] = esatti;
configDoughnutList[i].data.labels[0] = 'Errati' + labelAdd;
configDoughnutList[i].data.labels[1] = 'Esatti' + labelAdd;
window.myDoughnut = new Chart(ctxDoughnut, configDoughnutList[i]);
I have the simple javascript code below which im initializing from a JSON Array Object using SimpleJSON java api how do I set data=dataSets[i] inside of a loop rather then hardcoding it.
var scatterChart = new Chart(ctx, {
type : 'scatter',
data : {
datasets : [
{
borderColor : window.chartColors.red,
backgroundColor : color(window.chartColors.red)
.alpha(0.2).rgbString(),
label : 'Sample1'
data : dataSets[0]
},
{
data : dataSets[1]
},
{
borderColor : window.chartColors.blue,
backgroundColor : color(window.chartColors.blue)
.alpha(0.2).rgbString(),
data : dataSets[2]
},
{
data : dataSets[3]
}, {
data : dataSets[4]
}, {
data : dataSets[5]
}, {
data : dataSets[6]
}, {
data : dataSets[7]
}, {
data : dataSets[8]
}, {
data : dataSets[9]
}, {
data : dataSets[10]
} ]`
You could also map the dataSets to an array of objects with the dataSet being the data property, then you could extend the first and the third with some extra properties:
// transform the datasets (from the api?) to the structure that you want
var dataSetsWithData = dataSets
.map(dataSet => ({ data: dataSet})) ;
// you now have an array of objects
// manually add the extra properties for the ones you're intresed in
dataSetsWithData[0] = {
// keep the original properties, in this case just "data"
...dataSetsWithData[0],
// additional properties for this particular index
borderColor : window.chartColors.red,
backgroundColor : color(window.chartColors.red)
.alpha(0.2).rgbString(),
label : 'Sample1'
};
dataSetsWithData[2] = {
// keep the original properties, in this case just "data"
...dataSetsWithData[0],
// additional properties for this particular index
borderColor : window.chartColors.blue,
backgroundColor : color(window.chartColors.blue).alpha(0.2).rgbString(),
};
var scatterChart = new Chart(ctx, {
type : 'scatter',
data : {
datasets : dataSetsWithData
}
});
You could set up your array without the data property (lets call it settings):
var settings = [
{
borderColor : window.chartColors.red,
backgroundColor : color(window.chartColors.red)
.alpha(0.2).rgbString(),
label : 'Sample1'
},
null,
{
borderColor : window.chartColors.blue,
backgroundColor : color(window.chartColors.blue)
.alpha(0.2).rgbString(),
}
];
Then we take dataSets and extend it with our settings:
var datasets = dataSets.map((data,i) => {
...(settings[i] || {}),
data
});
The upper code is ESnext so you might use this instead:
var datasets = dataSets.map(function(data,i){
return Object.assign({data:data},settings[i]);
});
Then we can draw the graph:
var scatterChart = new Chart(ctx, {
type : 'scatter',
data : { datasets }
});
you can write down as following using forEach
var dataArray=[];
dataSets.forEach(function(d,i){
var tempObj={};
tempObj["data"]=d;
if(i==0){
tempObj["borderColor"] = window.chartColors.red;
tempObj["backgroundColor"] =
color(window.chartColors.red).alpha(0.2).rgbString();
tempObj["label"] = 'Sample1';
}else if(i==2){
tempObj["borderColor"] = window.chartColors.blue;
tempObj["backgroundColor"] =
color(window.chartColors.blue).alpha(0.2).rgbString();
}
dataArray.push(tempObj);
});
var scatterChart = new Chart(ctx, {
type : 'scatter',
data : {
datasets :dataArray
}
if you wan to use for loop then,
var dataArray=[];
for(i=0;i<dataSets.length;i++){
var tempObj={};
tempObj["data"]=dataSets[i];
if(i==0){
tempObj["borderColor"] = window.chartColors.red;
tempObj["backgroundColor"] =
color(window.chartColors.red).alpha(0.2).rgbString();
tempObj["label"] = 'Sample1';
}else if(i==2){
tempObj["borderColor"] = window.chartColors.blue;
tempObj["backgroundColor"] =
color(window.chartColors.blue).alpha(0.2).rgbString();
}
dataArray.push(tempObj);
}
var scatterChart = new Chart(ctx, {
type : 'scatter',
data : {
datasets :dataArray
}
I am using a doughnut chart plugin in my website. It is working fine but I want multiple chart on same page with different data. Please see the code below.
This is the chart I am using
<canvas id="chart-area1" width="200" height="200" style="width:150px !important; height:150px !important;"/></canvas>
Script is here
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script>
var doughnutData = [
{
value: 45,
color:"#17CB8A",
highlight: "#17CB8C",
label: "Strating"
},
{
value: 12,
color: "#FF003C",
highlight: "#FF003A",
label: "Warning"
},
{
value: 7,
color: "#fb6800",
highlight: "#fb6801",
label: "Past Due"
},
{
value: 9,
color: "#88c100",
highlight: "#88c102",
label: "In Progress"
},
];
window.onload = function(){
var ctx = document.getElementById("chart-area1").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
</script>
How I can copy this chart with different attributes?
This is how i did it. with multiple canvases.
<script>
var doughnutData = [ ... ];
var doughnutData2 = [ ... ];
var doughnutData3 = [ ... ];
window.onload = function(){
var ctx = document.getElementById("chart-area1").getContext("2d");
var dtx = document.getElementById("chart-area2").getContext("2d");
var etx = document.getElementById("chart-area3").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
window.myDoughnut2 = new Chart(dtx).Doughnut(doughnutData2, {responsive : true});
window.myDoughnut3 = new Chart(etx).Doughnut(doughnutData3, {responsive : true});
};
</script>
If you want to use multiple Charts on same canvas you can use the fork FVANCOP did for Chart.js here