What I am wanting to do is take data from two rows as x & y axis and that data should be displayed in a bar chart.
Here is what I am doing:
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Bar Chart Example <small>With custom colors.</small></h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
Config option 1
</li>
<li>
Config option 2
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-bar-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts {
#Scripts.Render("~/plugins/flot")
<script type="text/javascript">
$(document).ready(function () {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.6,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: [ **//here i want to set a query to get data from database**
[1, 40],
[2, 25],
[3, 19],
[4, 34],
[5, 32],
[6, 22]
]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
var barOptions = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.0
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: [ **//here i want to set a query to get data from database**
[1, 40],
[2, 25],
[3, 19],
[4, 34],
[5, 32],
[6, 22]
]
};
doPlot("right");
$("button").click(function () {
doPlot($(this).text());
});
});
</script>
}
How to achieve it? Can I set a query here or should I manage this in controller? like this
E.g If I have a table in SQL named Sale and having two records "Sales & Year", I want to show years at x-axis and sales at y-axis.
An exception of type 'System.NotSupportedException' occurred in EntityFramework.SqlServer.dll but was not handled in user code Additional information:
var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).ToList();
var baseWorkerModel = new BaseWorkerModel()
{
ChartName = "Anything",
ChartData = wokerData
};
return View(baseWorkerModel);
}
public class BaseWorkerModel
{
public string ChartName { get; set; }
public List<WorkerModel> ChartData { get; set; }
public List<WorkerModel> WorkerData { get; set; }
}
Maybe help you this way:
First separate code in functions:
/**
* Get data from server
*/
const getChartData = function(data) {
return new Promise((resolve, reject) => {
try {
$.ajax({
data: data,
method: 'GET', // or POST
url: '[Controller/Action/????]'
}).done(data => {
resolve({state: 'done', data: data});
}).fail(errorThrown => {
reject({state: 'fail', data: errorThrown});
});
}
catch(error) {
reject({state: 'catch', data: error});
}
});
};
/**
* Draw chart
*/
const drawChart = function(chartData) {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.6,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: chartData // Chart data input parameter to function
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
var barOptions = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.0
}]
}
}
},
xaxis: {
tickDecimals: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
}
};
var barData = {
label: "bar",
data: chartData // Chart data input parameter to function
};
doPlot("right");
}
And next in button click can use:
$('button').on('click', function(e) {
getChartData(...).then(result => { // ... means parameters need to send to server
drawChart(result['data']);
doPlot($(this).text()); //??
}).catch(error => {
console.log(error);
});
});
===========================================================================
Update [based on comments]
public class BaseWorkerModel
{
public string ChartName { get; set; }
public List<WorkerModel> WorkerData { get; set; }
}
public class WorkerModel
{
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public string Extn { get; set; }
public string Salary { get; set; }
}
In action you need create list from data
public ActionResult GetChartData()
{
// with this code you can retrieve list of WorkerModel based on your data
// note: if salary is float or double change data type to double
var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).Tolist();
var baseWorkerModel = new BaseWorkerModel()
{
ChartName = "Anything",
WorkerData = wokerData
};
return View(baseWorkerModel);
}
Now in first line of view add
#model BaseWorkerModel
If js code inline in your view, You can access to model data see this link Access model in js
===========================================================================
NEW UPDATE
1- I used chart.js library to draw any chart type.
2- In Models folder I created model with this structure
public class ChartDataModel
{
public string ChartName { get; set; }
public List<string> ChartLabel { get; set; }
public List<int> ChartData { get; set; }
}
3- In our controller I initialized instance of model and set data and labels and pass model to view
public ActionResult Index()
{
var chartDataModel = new Models.ChartDataModel()
{
ChartData = new List<int>() { 12, 19, 3, 5, 2, 3 },
ChartLabel = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
ChartName = "Chart JS demo"
};
return View(chartDataModel);
}
4- In index.cshtml first import model and in javascript code section I used this model properties
#model ChartDemo1.Models.ChartDataModel
<!-- canvas for draw chart -->
<canvas id="myChart" width="400" height="100"></canvas>
#section scripts {
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: #Html.Raw(Json.Encode(Model.ChartLabel)),
datasets: [{
label: "#Model.ChartName",
data: #Html.Raw(Json.Encode(Model.ChartData)),
backgroundColor: [
'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)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
}
Now, you've a bar chart drawed by Chart.js, I used static data but you can fill chart from any data source.
Note: remember add chart.min.js and chart.min.css in your main layout.
Note: you can pass chart config as model like backgrounds or etc...
I used chart.js this time as mentioned in your last answer,
here is the example:
public ActionResult Index( )
{
var worker = db.Workers.ToList<Worker>();
//var chartData = new List<dynamic[]>();
//var chartLabel = new List<dynamic[]>();
//foreach (var item in worker)
//{
//chartData.Add(new dynamic[] {item.Salary});
//chartLabel.Add(new dynamic[] {item.Name});
//}
var chartData = worker.Select(s => s.Salary).ToList();
var chartLabel = worker.Select(s => s.Name).ToList();
ViewBag.ChartData = chartData;
ViewBag.ChartLabel = chartLabel;
return View();
}
<script type="text/javascript">
$(document).ready(function () {
var barData = {
labels: #Html.Raw(Json.Encode(ViewBag.ChartLabel)),
datasets: [
{
label: "Bar Chart Demo",
backgroundColor: 'rgba(26,179,148,0.5)',
borderColor: "rgba(26,179,148,0.7)",
pointBackgroundColor: "rgba(26,179,148,1)",
pointBorderColor: "#fff",
data: #Html.Raw(Json.Encode(ViewBag.ChartData)),
}
]
};
var barOptions = {
responsive: true
};
var ctx2 = document.getElementById("barChart").getContext("2d");
new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });
});
...
Here is the output, as it is displaying the labels from database but no chart data "Salary".
Related
I'm stuck to display a list of graph from data of a realtime database firebase.
At the moment I can display a list of graph, however I can't get the data of the list : "listData" .
When I change the lifecycle "ngAfterViewInit" by "ngAfterViewChecked", it works for displaying the Graph and the data of listData, however I want to do this cycle once.
If the lifecycle is ngAfterViewInit I can't display the graph
my script
#ViewChildren('pr_chart') chartElementRefs: QueryList<ElementRef>;
constructor(
public afDB: AngularFireDatabase,
public afSG: AngularFireStorage,
public afAuth: AngularFireAuth,
){ }
listData = []
chartData1 = [];
charts= [];
colorCurve = null;
colorCurveFull = null;
ngAfterViewInit() {
this.chartData1 = [1,2,3,4,5,6];
this.afDB.list('db').snapshotChanges(['child_added']).subscribe(async mybets => {
mybets.forEach(mybet => {
this.listData.push({
data : mybet.payload.exportVal().bankroll)
});
var data = Object.values(mybet.payload.exportVal().bankroll);
({result: this.colorCurve, result_full: this.colorCurveFull} = this.giveColor(Object.values(data)));
});
this.charts = this.chartElementRefs.map((chartElementRef, index) => {
return new Chart(chartElementRef.nativeElement, {
type: 'line',
data: {
labels: Object.keys(this.listData[index]["data"]),
datasets: [
{
label: "Test",
fill: true,
borderCapStyle: 'butt',
borderDash: [],
backgroundColor: this.colorCurve,
borderColor: this.colorCurveFull,
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: Object.values(this.listData[index]["data"]),
spanGaps: false,
}
]
},
options: {
scales: {
yAxes: {
title: {
display: true,
text: "Bankroll (100€/match)",
font: {
size: 10
}
},
ticks: {
precision: 0
}
},
xAxes: {
title: {
display: true,
text: "Number value bets",
font: {
size: 10
}
}
}
},
plugins: {
legend: {
display: false,
}
}
}
});
});
// this.chartData1 = Array.from(Array(this.listData.length).keys())
// console.log("test ", this.chartData1 )
});
}
}
my html script :
<ion-card *ngFor="let data of listData" >
<ion-card-content>
<canvas #pr_chart></canvas> <!--I can't display the graph-->
</ion-card-content>
</ion-card>
<ion-card *ngFor="let data of chartData1" >
<ion-card-content>
{{listData[0].country}} <!--I can't display list data-->
<canvas #pr_chart></canvas> <!--I can display the graph-->
</ion-card-content>
</ion-card>
I've tried to changed by other lifecycle and nothing works correctly... If someone can help me !
I need to make a chart at the level with a row in the table, are there any tips on how to implement this enter image description here
I need the chart lines to match the row level in the table
and this code draws a separate chart
const diag = () => {
document.getElementById("canvasic").innerHTML = ' ';
document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>';
densityCanvas = document.getElementById("densityChart");
//remove canvas from container
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 16;
var densityData = {
label: 'CallVol',
data:calloiList1,
backgroundColor: 'rgba(0,128,0, 0.6)',
borderColor: 'rgba(0,128,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var densityData1 = {
label: 'PutVol',
data:calloiList3 ,
backgroundColor: 'rgba(255,0,0, 0.6)',
borderColor: 'rgba(255,0,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: 'left',
}
}
};
var barChart = new Chart(densityCanvas, {
type: 'horizontalBar',
data: {
labels: calloiList4,
datasets: [densityData,densityData1],
},
options: chartOptions
}
);
}
enter image description here
I use Charts.js in my Angular project (not AngularJS) and i want to use data from my database to make a graphic with woman / man, but i didn't know how create a loop and count number of woman or number of men :
First, for the Chart, my html code :
<canvas id="myChart" width="700" height="400"></canvas>
typescript :
ngAfterViewInit() {
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, {
type: 'pie',
data: {
labels: ["Femme", "Homme"],
datasets: [{
label: '# of Votes',
data: [2,2],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
display:true
}
});
}
and the code to get my data :
javascript :
app.get("/api/getUser",function(req,res){
model.find({},function(err,data){
if(err){
res.send(err);
}
else{
res.send(data);
}
});
})
typescript :
GetUser(){
return this.http.get('http://localhost:8080/api/getUser/')
.map((response: Response) => response.json())
}
and the second typescript :
ngOnInit() {
this.newService.GetUser().subscribe(data => this.Repdata = data)
}
for finish, this is the collection :
{
"_id" : ObjectId("5b9551a60e89ad15a8ff77fb"),
"name" : "XXX",
"prenom" : "KEVIN",
"datenaissance" : "17/11/2011",
"mail" : "KEVIN#laposte.fr",
"tel" : "XXXXXXXXXX",
"sexe" : "Homme",
"adresse" : "XXXXXXXX",
"note" : [
{
"matiere" : "Français",
"note" : "10/20",
"date" : "01/09/2018"
},
{
"matiere" : "Anglais",
"note" : "07/20",
"date" : "26/09/2018"
},
{
"matiere" : "EPS",
"note" : "15/20",
"date" : "29/09/2018"
}
]
}
I want to count the number of sexe:Homme and sexe:Femme to use this for create my graphic but i didn't know how
thank you very much
If I do this my charts can't find the countHomme and countFemme :
javascript :
app.get("/api/getUser",function(req,res){
model.find({},function(err,data){
if(err){
res.send(err);
}
else{
res.send(data);
var countHomme = model.where({ 'sexe': 'Homme' }).count();
res.send(countHomme);
var countFemme = model.where({ 'sexe': 'Femme' }).count();
res.send(countFemme);
}
});
})
typescript :
ngAfterViewInit() {
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, {
type: 'pie',
data: {
labels: ["Femme", "Homme"],
datasets: [{
label: '# of Votes',
data: [countFemme,countHomme],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
display:true
}
});
}
IMO, its better to ask the data about male and female sex from the backend through an API.
You can try to count the fields using mongoose ORM via Model.count() method and it can send back a JSON object with total counts as per your need and you can feed it directly to chart.js
I wanted to stream live data in the form of a chart. I'm new to Javascript, so I wanted to first experiment with the sample on this page.
https://web.archive.org/web/20211113012042/https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html
The code is given as:
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
function randomScalingFactor() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
function onRefresh(chart) {
chart.config.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: randomScalingFactor()
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1 (linear interpolation)',
backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
borderColor: chartColors.red,
fill: false,
lineTension: 0,
borderDash: [8, 4],
data: []
}, {
label: 'Dataset 2 (cubic interpolation)',
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
title: {
display: true,
text: 'Line chart (hotizontal scroll) sample'
},
scales: {
xAxes: [{
type: 'realtime'
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
tooltips: {
mode: 'nearest',
intersect: false
},
hover: {
mode: 'nearest',
intersect: false
},
plugins: {
streaming: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onRefresh
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(dataObj) {
dataObj.y = randomScalingFactor();
});
});
window.myChart.update();
});
var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (config.data.datasets.length + 1),
backgroundColor: color(newColor).alpha(0.5).rgbString(),
borderColor: newColor,
fill: false,
lineTension: 0,
data: []
};
config.data.datasets.push(newDataset);
window.myChart.update();
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.pop();
window.myChart.update();
});
document.getElementById('addData').addEventListener('click', function() {
onRefresh(window.myChart);
window.myChart.update();
});
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<p>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
</p>
</body>
When I copy and paste it into jsfiddle, the first code snippet going into the Javascript section and the second going into the HTML section. However, nothing happens? Could someone explain why/help me edit it so that it works?
Note: the code above is not my own, it belongs to this guy
In JSFiddle, the load type is set to 'On Load' by default, so you cannot handle the load event. Setting the load type to 'No wrap - bottom of ' works (in the pop-up menu in the Javascript section).
In my controller I have an Action method that will find all questions in a table called Questions, and the answers for each question.
This Action is of type ContentResult that will return a result serialized in Json format.
public ContentResult GetData()
{
var datalistQuestions = db.Questions.ToList();
List<PsychTestViewModel> questionlist = new List<PsychTestViewModel>();
List<PsychTestViewModel> questionanswerslist = new List<PsychTestViewModel>();
PsychTestViewModel ptvmodel = new PsychTestViewModel();
foreach (var question in datalistQuestions)
{
PsychTestViewModel ptvm = new PsychTestViewModel();
ptvm.QuestionID = question.QuestionID;
ptvm.Question = question.Question;
questionlist.Add(ptvm);
ViewBag.questionlist = questionlist;
var agree = //query
var somewhatAgree = //query
var disagree = //query
int Agree = agree.Count();
int SomewhatAgree = somewhatAgree.Count();
int Disagree = disagree.Count();
ptvmodel.countAgree = Agree;
ptvmodel.countSomewhatAgree = SomewhatAgree;
ptvmodel.countDisagree = Disagree;
questionanswerslist.Add(ptvmodel);
ViewBag.questionanswerslist = questionanswerslist;
}
return Content(JsonConvert.SerializeObject(ptvmodel), "application/json");
}
Now, my problem is the pie chart is not being created and I don't quite know how to push the values to my data structure?
What should I be doing instead?
Here is my script:
#section Scripts {
<script type="text/javascript">
var PieChartData = {
labels: [],
datasets: [
{
label: "Agree",
backgroundColor:"#f990a7",
borderWidth: 2,
data: []
},
{
label: "Somewhat Agree",
backgroundColor: "#aad2ed",
borderWidth: 2,
data: []
},
{
label: "Disgree",
backgroundColor: "#9966FF",
borderWidth: 2,
data: []
},
]
};
$.getJSON("/PsychTest/GetData/", function (data) {
for (var i = 0; i <= data.length - 1; i++) {
PieChartData.datasets[0].data.push(data[i].countAgree);
PieChartData.datasets[1].data.push(data[i].countSomewhatAgree);
PieChartData.datasets[2].data.push(data[i].countDisagree);
}
var ctx = document.getElementById("pie-chart").getContext("2d");
var myLineChart = new Chart(ctx,
{
type: 'pie',
data: PieChartData,
options:
{
responsive: true,
maintainaspectratio: true,
legend:
{
position : 'right'
}
}
});
});
</script>
You need two arrays for creating your chart. One of them indicates titles and another one shows the number of each titles. You have titles in the client side, so you only need the number of each options and it could be fetched from a simple server method like:
[HttpGet]
public JsonResult Chart()
{
var data = new int[] { 4, 2, 5 }; // fill it up whatever you want, but the number of items should be equal with your options
return JsonConvert.SerializeObject(data)
}
The client side code is here:
var aLabels = ["Agree","Somewhat Agree","Disagree"];
var aDatasets1 = [4,2,5]; //fetch these from the server
var dataT = {
labels: aLabels,
datasets: [{
label: "Test Data",
data: aDatasets1,
fill: false,
backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
};
var opt = {
responsive: true,
title: { display: true, text: 'TEST CHART' },
legend: { position: 'bottom' },
//scales: {
// xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
// yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
//}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: dataT,
options: opt
});
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.1/Chart.min.js"></script>
<div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
<div style="width:100%;height:100%">
<canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
</div>
</div>
If you are still looking to use json for chart.js charts.
Here is a solution which fetch a json file and render it on chart.js chart.
fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/CSVtoJSON.json')
.then(function(response) {
return response.json();
})
.then(function(ids) {
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ids.map(function(id) {
return id.Label;
}),
datasets: [
{
label: "value2",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: ids.map(function(id) {
return id.Value2;
}),
},
{
label: "value",
//backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: ids.map(function(id) {
return id.Value;
}),
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Sample Json Data Chart'
}
}
});
});
see running code on jsfiddle here