Chart.js
Simple HTML5 Charts using the <canvas> tag
I am trying to use Chart.js to display the data of Blood pressure, which include three sets of data(pulse, systolic, diastolic). the pulse data should display as line chart while systolic, and diastolic will be in bar chart. So I wondering there should be a way to combine them together.
PS. the updated Chart js provide the Stacked Bar Chart, which is pretty good to learn as the beginning of customizing Chart js.
Source: (StackOverflow)
I'm having a tough time figuring out how to get labels, legend and title showing up in my Chart JS Line Chart. I've copied the code directly from the example (reproduced below). However, the label "My First dataset" doesn't show up anywhere on the chart and so I can't tell which line is which. I've also tried adding a 'title' to my datasets, but with no luck. Anyone know what I'm missing?
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]};
Thanks,
Saswat
Source: (StackOverflow)
I have a simeple question about Chart.js, I would like to know how can I fix my chart.
I use Chart.js and respChartJS (https://github.com/arifLogic/respChartJS)
Demo: http://jsfiddle.net/k3YH7/1/
var data = {
labels : ["Something #1","Something #2","Something #3"],
datasets : [
{
fillColor : "rgba(224, 34, 34, 0.5)",
strokeColor : "#830505",
data : [1500,1500,1500]
}
]
}
respChart($("#chart2"),data);
Well, these bars so small and do not work as I expected. How can I make it visible? I want to crate better scale for example: 500, 1000, 1500, 2500 etc.
Source: (StackOverflow)
How do I remove the bottom labels that is used by the chartjs ?
Changing scaleShowLabels:false only removes the labels on the left but not the bottom.
<script>
var options = {
scaleFontColor: "#fa0",
datasetStrokeWidth: 1,
scaleShowLabels : false,
animation : false,
bezierCurve : true,
scaleStartValue: 0,
};
var lineChartData = {
labels : ["1","2","3","4","5","6","7"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [1,3,0,0,6,2,10]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
</script>
Source: (StackOverflow)
Please anyone help me.
I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, i want to make customized tooltip option. is there way to make it possible?
Here is my code
var chart = null;
barChart: function (data1, data2, data3, label) {
var data = {
labels: label,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data1
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: data2
},
{
fillColor: "rgba(0,255,0,0.3)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(0,255,0,0.3)",
data: data3
},
]
}
var cht = document.getElementById('exampleCanvas');
var ctx = cht.getContext('2d');
if (chart)
chart.destroy();
chart = new Chart(ctx).Bar(data);
}
Source: (StackOverflow)
Is it possible to get line breaks in chartjs tooltips?
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
I want to replace ": " with a new line.
I've tried with 
, \u000D, \n and <br /> to no avail.
Source: (StackOverflow)
I have a page that lists about 30 portfolios, each with 3 stocks. I am trying to create a pie chart to go with each portfolio, where the pie chart would be composed of values from the three stocks in that portfolio.
The values of the stocks are printed to the screen, so I can grab them quite easily with jQuery .text() and .slice().
My problem arises when I want to change the data in the graph to corespond with each portfolio (or group of stocks).
The <script>:
$(document).ready(function() {
$.each($('.stocks-data'), function(){
$this = $(this);
$a_base = $this.children(".a-card").text();
$a_pie = $a_base.].replace ( /[^\d.]/g, '' );;
console.log($a_pie)
$b_base = $this.children(".b-card").text();
$b_pie = $b_base.replace ( /[^\d.]/g, '' );
console.log($b_pie)
$c_base = $this.children(".c-card").text();
$c_pie = $c_base.replace ( /[^\d.]/g, '' );
console.log($c_pie)
var data = [
{
value: $a_pie,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Stock A"
},
{
value: $b_pie,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Stock B"
},
{
value: $c_pie,
color: "#FDB45C",
highlight: "#FFC870",
label: "Stock C"
}
]
$this.children('.stocks-pie'), (function(index, element){
var ctx = element.getContext("2d");
new Chart(ctx).Doughnut(data ,{animateRotate: false});
});
});
});
The page.php:
#in a php echo
<div class=".stocks-data">
<div class="name-container">
<div class="name">Name: '.$name.'</div>
</div>
<div class="a-card">Stock A: '.$stocka.'g</div>
<div class="b-card">Stock B: '.$stockb.'g</div>
<div class="c-card">Stock C: '.$stockc.'g</div>
<canvas class="stocks-pie" height="80" width="100"></canvas>
</div>
Example Data:
.$stocka. = 14.2
.$stockb. = 2.8
.$stockc. = 3.9
The Problem:
I can get the charts to work, but only be displaying the last portfolios data for each portfolios chart, which is obviously not what I want. How can I make this dynamic, in which the chart is created for each portfolio using it's own data?
Supplementary Info:
This is using Charts.js
Source: (StackOverflow)
i am using chart.js to generate charts in a meteor app.
Here is my code
function drawChart(){
var data = [
{
value: Policies.find({'purchased_cover.trip_type': 'Single Trip'}).count(),
color:"#F38630"
},
{
value :Policies.find({'purchased_cover.trip_type': 'Annual Multi-Trip'}).count(),
color : "#E0E4CC"
},
{
value : Policies.find({'purchased_cover.trip_type': 'Backpacker'}).count(),
color : "#69D2E7"
},
{
value :Policies.find({'purchased_cover.trip_type': 'Golf Annual'}).count(),
color : "green"
},
{
value :Policies.find({'purchased_cover.trip_type': 'Golf'}).count(),
color : "red"
},
{
value :Policies.find({'purchased_cover.trip_type': 'Winter Sports Annual'}).count(),
color : "yellow"
}
]
var ctx = $("#pieChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx);
new Chart(ctx).Pie(data);
}
Template.charts.rendered = function(){
drawChart();
};
i have few helpers to display the count in html templates and it works fine whenever the counts changes but the chart is not changing until i reload the page..i want the chart to be reactive to the changes in the collection.
Source: (StackOverflow)
I am using Python/Django with the default Django templates.
I have this in the head (other django static files in this location work fine):
<script type="text/javascript" src="{% static "js/Chart.min.js" %}"></script>
Naturally, I have Chart.min.js extracted from the master Chart.js download into the static js directory.
In my body I have:
<div class="graph">
<canvas id="dgraph" width="600" height="400"></canvas>
</div>
Also in the body I have:
<script type="text/javascript" src="{% static "js/stuff.js" %}"></script>
In stuff.js I have:
var data = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var ctx = document.getElementById("dgraph").getContext("2d");
new Chart(ctx).Doughnut(data, {});
However, when I try and display this in a browser (Chrome as it happens) I see this in the console:
Uncaught ReferenceError: Chart is not defined
Where on earth is the Chart object obtained from? It seems to be pretty fundamental and I feel as if I've followed every instruction available on google and stackoverflow. Please help!
Source: (StackOverflow)
I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn't find any parameter that would limit this.
I don't want to take only three labels for example, because then the chart is also limited to three points. Is it possible?
I have something like that right now:
and If I could just leave every third-fourth label it would be great. But I found absolutely nothing about labels options.
Source: (StackOverflow)
Is it possibile to add a horizontal line to an existing chart in Chart.js?
Here the example char code:
// the canvas
<canvas id="myChart" width="800" height="200"></canvas>
// the js
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data);
I want to add a horizontal marker line (eg. at y=100 like in this fiddle for highcharts)
Source: (StackOverflow)
My Html:
<div class="graph-display" ng-controller="jsonServerBox">
<div class="bar-chart-box" ng-repeat="module in ocw.modules">
<canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas>
</div>
</div>
My JS:
app.controller('jsonServerBox', function($scope, $http) {
var json = $http.get('serverbox.json').then(function(res){
return res.data;
});
$scope.ocw = json;
});
The Chart doesn't gets displayed, don't know why? I'm not getting any error in console either.
UPDATE: MY JSON FILES CONTENT
[{"modules":[
{
"series":"SeriesA",
"data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
"labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
},
{
"series":"SeriesB",
"data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
"labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
}
]}
]
CONSOLE LOG:
modules: Array[2]0: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesA"__proto__: Object1: Objectdata: Array[10]0: "90"1: "99"2: "80"3: "91"4: "76"5: "75"6: "60"7: "67"8: "59"9: "55"length: 10__proto__: Array[0]labels: Array[10]0: "01"1: "02"2: "03"3: "04"4: "05"5: "06"6: "07"7: "08"8: "09"9: "10"length: 10__proto__: Array[0]series: "SeriesB"
Source: (StackOverflow)
I'm trying to place a chart using Chart.js on a row with span6. Chart.js uses <canvas> and needs a height and width property. I've set the height to what I need and the width to 100% but it doesn't stretch to fill the div which is set to span6.
Any ideas?
<div class="row" style="padding-top: 20px;">
<div class="span6">
<div id="daily">
<canvas id="daily-chart" width="100%" height="400px"></canvas>
</div>
</div>
</div>
Source: (StackOverflow)