archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Revert "Merge pull request #856 from tannerlinsley/editable-chart-config"

Browse Source 
This reverts commit a8063de6b8a744b0ad117d20ef7c9138147212f3, reversing
changes made to 7f513b87eefc7319f31a4e5590bdd916398ca44d.
This commit is contained in:
Tanner Linsley 2015-05-11 18:57:14 -06:00
parent 4e3dd8ae3f
commit b8691c9581
11 changed files with 24 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
samples/bar.html
View File

@ -3,17 +3,15 @@
<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"],
@ -42,16 +40,6 @@
});
}
$('#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>

23
samples/doughnut.html
View File

@ -3,7 +3,6 @@
<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;
@ -18,41 +17,37 @@
<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"
@ -65,14 +60,6 @@
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>

14
samples/line.html
View File

@ -3,7 +3,6 @@
<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%">
@ -11,13 +10,10 @@
<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 : [
@ -52,16 +48,6 @@
});
}
$('#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>

24
samples/pie.html
View File

@ -3,46 +3,42 @@
<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)};
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"
@ -55,14 +51,6 @@
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>

23
samples/polar-area.html
View File

@ -3,47 +3,42 @@
<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"
@ -58,14 +53,6 @@
});
};
$('#randomizeData').click(function(){
$.each(polarData, function(i, piece){
polarData[i].value = randomScalingFactor();
polarData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
});
window.myPolarArea.update();
});
</script>

25
samples/radar.html
View File

@ -3,20 +3,19 @@
<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: [
@ -28,7 +27,7 @@
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",
@ -38,7 +37,7 @@
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]
}
]
};
@ -49,16 +48,6 @@
});
}
$('#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>

26
src/Chart.Bar.js
View File

@ -48,9 +48,6 @@
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;
@ -143,29 +140,6 @@
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){

22
src/Chart.Doughnut.js
View File

@ -45,9 +45,6 @@
//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;
@ -127,25 +124,6 @@
},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.

28
src/Chart.Line.js
View File

@ -62,9 +62,6 @@
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,
@ -140,31 +137,6 @@
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){

19
src/Chart.PolarArea.js
View File

@ -59,9 +59,6 @@
//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({
@ -193,22 +190,6 @@
},
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){

28
src/Chart.Radar.js
View File

@ -67,9 +67,6 @@
},
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,
@ -272,31 +269,6 @@
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();
});