<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
- <button id="randomizeData">Randomize Data</button>
+
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
});
}
- $('#randomizeData').click(function(){
- barChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- barChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- barChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- window.myBar.update();
- });
-
</script>
</body>
</html>
<head>
<title>Doughnut Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body{
padding: 0;
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"/>
</div>
- <button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
-
var doughnutData = [
{
- value: randomScalingFactor(),
+ value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
- value: randomScalingFactor(),
+ value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
- value: randomScalingFactor(),
+ value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
- value: randomScalingFactor(),
+ value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
- value: randomScalingFactor(),
+ value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
- $('#randomizeData').click(function(){
- $.each(doughnutData, function(i, piece){
- doughnutData[i].value = randomScalingFactor();
- doughnutData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- });
- window.myDoughnut.update();
- });
-
</script>
<head>
<title>Line Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div style="width:30%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
- <button id="randomizeData">Randomize Data</button>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
-
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
});
}
- $('#randomizeData').click(function(){
- lineChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
- lineChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- lineChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
- lineChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- window.myLine.update();
- });
-
</script>
</body>
<head>
<title>Pie Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="canvas-holder">
<canvas id="chart-area" width="300" height="300"/>
</div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+ <script>
var pieData = [
{
- value: randomScalingFactor(),
+ value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
- value: randomScalingFactor(),
+ value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
- value: randomScalingFactor(),
+ value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
- value: randomScalingFactor(),
+ value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
- value: randomScalingFactor(),
+ value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
window.myPie = new Chart(ctx).Pie(pieData);
};
- $('#randomizeData').click(function(){
- $.each(pieData, function(i, piece){
- pieData[i].value = randomScalingFactor();
- pieData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- });
- window.myPie.update();
- });
-
</script>
<head>
<title>Polar Area Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="canvas-holder" style="width:30%">
<canvas id="chart-area" width="300" height="300"/>
</div>
- <button id="randomizeData">Randomize Data</button>
<script>
- var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
-
var polarData = [
{
- value: randomScalingFactor(),
+ value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
- value: randomScalingFactor(),
+ value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
- value: randomScalingFactor(),
+ value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
- value: randomScalingFactor(),
+ value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
- value: randomScalingFactor(),
+ value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
});
};
- $('#randomizeData').click(function(){
- $.each(polarData, function(i, piece){
- polarData[i].value = randomScalingFactor();
- polarData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- });
- window.myPolarArea.update();
- });
-
</script>
<head>
<title>Radar Chart</title>
<script src="../Chart.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+ <style>
+ canvas{
+ }
+ </style>
</head>
<body>
<div style="width:30%">
<canvas id="canvas" height="450" width="450"></canvas>
</div>
- <button id="randomizeData">Randomize Data</button>
<script>
-
- var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
- var randomColorFactor = function(){ return Math.round(Math.random()*255)};
-
var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
- data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ data: [65,59,90,81,56,55,40]
},
{
label: "My Second dataset",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
- data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ data: [28,48,40,19,96,27,100]
}
]
};
});
}
- $('#randomizeData').click(function(){
- radarChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
- radarChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- radarChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
- radarChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
-
- window.myRadar.update();
- });
-
</script>
</body>
</html>
defaults : defaultConfig,
initialize: function(data){
- // Save data as a source for updating of values & methods
- this.data = data;
-
//Expose options as a scope variable here so we can access it in the ScaleClass
var options = this.options;
this.render();
},
update : function(){
- //Iterate through each of the datasets, and build this into a property of the chart
- helpers.each(this.data.datasets,function(dataset,datasetIndex){
-
- helpers.extend(this.datasets[datasetIndex], {
- label : dataset.label || null,
- fillColor : dataset.fillColor,
- strokeColor : dataset.strokeColor,
- });
-
- helpers.each(dataset.data,function(dataPoint,index){
- helpers.extend(this.datasets[datasetIndex].bars[index], {
- value : dataPoint,
- label : this.data.labels[index],
- datasetLabel: dataset.label,
- strokeColor : dataset.strokeColor,
- fillColor : dataset.fillColor,
- highlightFill : dataset.highlightFill || dataset.fillColor,
- highlightStroke : dataset.highlightStroke || dataset.strokeColor
- });
- },this);
-
- },this);
-
this.scale.update();
// Reset any highlight colours before updating.
helpers.each(this.activeElements, function(activeElement){
//Config is automatically merged by the core of Chart.js, and is available at this.options
initialize: function(data){
- // Save data as a source for updating of values & methods
- this.data = data;
-
//Declare segments as a static property to prevent inheriting across the Chart type prototype
this.segments = [];
this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
},this);
},
update : function(){
-
- // Map new data to data points
- if(this.data.length == this.segments.length){
- helpers.each(this.data, function(segment, i){
- helpers.extend(this.segments[i], {
- value : segment.value,
- fillColor : segment.color,
- highlightColor : segment.highlight || segment.color,
- showStroke : this.options.segmentShowStroke,
- strokeWidth : this.options.segmentStrokeWidth,
- strokeColor : this.options.segmentStrokeColor,
- label : segment.label
- });
- }, this);
- } else{
- // Data size changed without properly inserting, just redraw the chart
- this.initialize(this.data);
- }
-
this.calculateTotal(this.segments);
// Reset any highlight colours before updating.
name: "Line",
defaults : defaultConfig,
initialize: function(data){
- // Save data as a source for updating of values & methods
- this.data = data;
-
//Declare the extension of the default point, to cater for the options passed in to the constructor
this.PointClass = Chart.Point.extend({
offsetGridLines : this.options.offsetGridLines,
this.render();
},
update : function(){
- //Iterate through each of the datasets, and build this into a property of the chart
- helpers.each(this.data.datasets,function(dataset,datasetIndex){
-
- helpers.extend(this.datasets[datasetIndex], {
- label : dataset.label || null,
- fillColor : dataset.fillColor,
- strokeColor : dataset.strokeColor,
- pointColor : dataset.pointColor,
- pointStrokeColor : dataset.pointStrokeColor,
- });
-
- helpers.each(dataset.data,function(dataPoint,index){
- helpers.extend(this.datasets[datasetIndex].points[index], {
- value : dataPoint,
- label : this.data.labels[index],
- datasetLabel: dataset.label,
- strokeColor : dataset.pointStrokeColor,
- fillColor : dataset.pointColor,
- highlightFill : dataset.pointHighlightFill || dataset.pointColor,
- highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
- });
- },this);
-
- },this);
-
this.scale.update();
// Reset any highlight colours before updating.
helpers.each(this.activeElements, function(activeElement){
//Initialize is fired when the chart is initialized - Data is passed in as a parameter
//Config is automatically merged by the core of Chart.js, and is available at this.options
initialize: function(data){
- // Save data as a source for updating of values & methods
- this.data = data;
-
this.segments = [];
//Declare segment class as a chart instance specific class, so it can share props for this instance
this.SegmentArc = Chart.Arc.extend({
},
update : function(){
-
- // Map new data to data points
- if(this.data.length == this.segments.length){
- helpers.each(this.data, function(segment, i){
- helpers.extend(this.segments[i], {
- fillColor: segment.color,
- highlightColor: segment.highlight || segment.color,
- label: segment.label,
- value: segment.value,
- });
- },this);
- } else{
- // Data size changed without properly inserting, just redraw the chart
- this.initialize(this.data);
- }
-
this.calculateTotal(this.segments);
helpers.each(this.segments,function(segment){
},
initialize: function(data){
- // Save data as a source for updating of values & methods
- this.data = data;
-
this.PointClass = Chart.Point.extend({
strokeWidth : this.options.pointDotStrokeWidth,
radius : this.options.pointDotRadius,
this.update();
},
update : function(){
- //Iterate through each of the datasets, and build this into a property of the chart
- helpers.each(this.data.datasets,function(dataset,datasetIndex){
-
- helpers.extend(this.datasets[datasetIndex], {
- label : dataset.label || null,
- fillColor : dataset.fillColor,
- strokeColor : dataset.strokeColor,
- pointColor : dataset.pointColor,
- pointStrokeColor : dataset.pointStrokeColor,
- });
-
- helpers.each(dataset.data,function(dataPoint,index){
- helpers.extend(this.datasets[datasetIndex].points[index], {
- value : dataPoint,
- label : this.data.labels[index],
- datasetLabel: dataset.label,
- strokeColor : dataset.pointStrokeColor,
- fillColor : dataset.pointColor,
- highlightFill : dataset.pointHighlightFill || dataset.pointColor,
- highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
- });
- },this);
-
- },this);
-
this.eachPoints(function(point){
point.save();
});
projects / thirdparty / Chart.js.git / commitdiff
