Develop Reference

Saving pie chart as an image using database data

Require some help when trying to save chart as an image. Sorry just started this new chart.js.
Issue:
How do I add my database data inside the chart? I keep try to add in $user but it keep giving me undefined user.
Here is the data that I want to add in from my database,
$users = DB::table('personal_infos')
->join('evaluations','evaluations.user_id', '=', 'personal_infos.id')
->select('evaluations.recommendation','evaluations.created_at' )
->where('evaluations.recommendation', '=', 'Yes')
->get();
For now I just used something like this to generate the pie chart:
<script type="text/javascript">
$("#save-btn").click(function() {
$("#canvas").get(0).toBlob(function(blob) {
saveAs(blob, "chart_1.png");
});
});
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var ctx = $("#canvas").get(0).getContext("2d");
var mychart = new Chart(ctx).Pie(data,
{
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : false,
//String - The colour of each segment stroke
segmentStrokeColor : "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth : 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout : 0, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps : 10,
//String - Animation easing effect
animationEasing : "linear",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale : false,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
);
</script>

using ajax populate dynamic piechart from chartjs

Hello there stack overflow programmers, i have a question related to getting data from my database using ajax and display it in piechart from chartjs library. Now i am trying to make dynamic data to be accepted by format within piechart format.
Here is my ajax and its response: ( still it doesn't show my piegraph. i dont know why)
function getpieclinic() {
$.ajax({
type: "POST",
url: siteurl+"patients_report/piedataclinic",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
// alert("hi");
var aData = response.d;
var arr = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.color = val.color;
obj.value = val.value;
obj.label = val.label;
arr.push(obj);
});
var ctx = $("#myChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);
}
function OnErrorCall_(response) {}
}
the response of my ajax is these:
[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]
now, i want to make a dynamic format of piechart chartjs data format to be able to display it. this is the default format from the example:
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome"
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE"
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox"
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari"
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera"
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator"
}
];
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);

You could accomplish this in the following way ...
// for demonstration purposes only
// use response.d in real case scenario
var response = [{ "clinic_name": "Clinic 1", "total_checked_up": "10" }, { "clinic_name": "Clinic 2", "total_checked_up": "20" }, { "clinic_name": "Clinic 3", "total_checked_up": "30" }, { "clinic_name": "Clinic 4", "total_checked_up": "40" }]; // response from ajax request
OnSuccess_(response);
function OnSuccess_(response) {
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [];
// create PieData dynamically
response.forEach(function(e) {
var random_color = '#' + Math.floor(Math.random() * 16777215).toString(16);
PieData.push({
value: e.total_checked_up,
color: random_color,
highlight: random_color,
label: e.clinic_name
});
});
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 0, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="pieChart"></canvas>

How to make ChartJS not cut off tooltips?

I am trying to figure out how to make chartjs not cut off it's tooltips, but I can't seem to find a config option to fix this.
This is what I have tried so far:
<script>
$(document).ready(function() {
var doughnutData = [
{
value: 48.3,
color: "#81d7d8",
highlight: "#23c6c8",
label: "Accepted"
},
{
value: 20.7,
color: "#f58894",
highlight: "#d9534f",
label: "Denied"
},
{
value: 31,
color: "#f5c592",
highlight: "#f8ac59",
label: "Pending"
}
];
var doughnutOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 45, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
fullWidth: true
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
});
</script>
In my HTML the respective section looks like this:
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-content">
<canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas>
</div>
</div>
</div>
Anyone who could point me to what I am missing here?

Since you are using the legacy Chart.js v1.x, you don't have as many possibilities as in the v2.x.
One simple way to fix your problem is to edit the style of your tooltips in your options. This won't change your default 95px of height and width for your chart :
var doughnutOptions = {
// ...
fullWidth: true,
tooltipFontSize: 10
};
And will give this result.

Piechart doesn't show up in Canvas

I just discovered Chart.js and it looks amazing! So I tried to follow an example and it didn't work, saying that new Chart(ctx, options).Pie(data); was invalid (that (intermerdiate value).Pie(...) was not a function). Then I found that the syntax changed in Version 2 so I changed it to what you find below. I no longer get any errors but nothing is shown in my canvas.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/test/Chart.js"></script>
<script src="js/test/chart-test.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
And the script:
$(document).ready(function () {
var data = [
{
value: 5,
color: "#44A9FF",
highlight: "#FF5A5E",
label: "N/A"
},
{
value: 79,
color: "#009900",
highlight: "#5AD3D1",
label: "On Track"
},
{
value: 31,
color: "#66FF33",
highlight: "#FFC870",
label: "Done"
},
{
value: 4,
color: "#F3F300",
highlight: "#FFC870",
label: "Issues"
},
{
value: 7,
color: "#FF0000",
highlight: "#FFC870",
label: "Behind"
},
{
value: 9,
color: "#979797",
highlight: "#FFC870",
label: "Abandoned"
}
];
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
var ctx = $('#myChart').get(0).getContext('2d');
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});

Take a look at the fiddle - Pie chart with Chart.js
I made the following changes:-
var pieChartCanvas = $("#myChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
pieChart.Pie(data, options);

From the example you gave it looks like the syntax has changed too.
It should be
var myPieChart = new Chart(ctx).Pie(data);
Not
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
Got that from the example found in the docs -> https://github.com/nnnick/Chart.js/blob/master/samples/pie.html

They also changed the data format in 2.0. If you checkout the sample here. You'll see the data is like this now:
data: {
datasets: [{
data: [
...
],
backgroundColor: [
...
]
}/* notice you can have more than one dataset, with pie they interlace when you have more than one */],
labels: [
...
]
}
Hope that helps.... also I needed to pull the v2.0-dev branch and build it myself to get past one bug that I found in the "released" version, so you may have better luck with that!

Cannot get react-chartjs to update

I am trying to follow the "Example usage" code from react-chartjs github page
I am new to javascript and react and probably just being naive. How can I get the new chartData from "_onChange" to update my PolarAreaChart? I tried something more direct by calling element.getDocumentById("polarChart"), but that returns nothing and then I cannot call .update on it... the whole "insert redraw in the xml" and it will magically call update seems magical to me :(
PolarPlot.jsx
var React = require ('react');
var PolarAreaChart = require ('react-chartjs').PolarArea;
var FilterStore = require ('FilterStore')
var PolarPlot = React.createClass ({
componentWillMount: function () {
FilterStore.addChangeListener (this._onChange);
},
_onChange: function () {
console.log("time to update")
chartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
}]
},
render: function () {
return (
<PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/>
);
}
});
var chartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var chartOptions = [
{
//Boolean - Show a backdrop to the scale label
scaleShowLabelBackdrop : true,
//String - The colour of the label backdrop
scaleBackdropColor : "rgba(255,255,255,0.75)",
// Boolean - Whether the scale should begin at zero
scaleBeginAtZero : true,
//Number - The backdrop padding above & below the label in pixels
scaleBackdropPaddingY : 2,
//Number - The backdrop padding to the side of the label in pixels
scaleBackdropPaddingX : 2,
//Boolean - Show line for each value in the scale
scaleShowLine : true,
//Boolean - Stroke a line around each segment in the chart
segmentShowStroke : true,
//String - The colour of the stroke on each segement.
segmentStrokeColor : "#fff",
//Number - The width of the stroke value in pixels
segmentStrokeWidth : 2,
//Number - Amount of animation steps
animationSteps : 100,
//String - Animation easing effect.
animationEasing : "easeOutBounce",
//Boolean - Whether to animate the rotation of the chart
animateRotate : true,
//Boolean - Whether to animate scaling the chart from the centre
animateScale : false,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
];
module.exports = PolarPlot;

Your PolarPlot component is not rendered unless you explicitly change the state. Your chartData is not part of the component state. So assigning a new array to that variable does nothing more than that. Move this chartData to the component state. Then, whenever you update this state variable you are going to force the re-render. Something like this:
var PolarPlot = React.createClass ({
componentWillMount: function () {
FilterStore.addChangeListener (this._onChange);
},
getInitialState: function() {
return {chartData: chartData};
},
_onChange: function () {
console.log("time to update")
this.setState({
chartData: [{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
}]
});
},
render: function () {
return (
<PolarAreaChart id="polarChart" data={this.state.chartData} options={chartOptions} redraw/>
);
}
});
If you want to know more about how components rendering reacts to state changes check Reactive state section from the React Tutorial.