Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scale rewrite for v2.0 #1132

Merged
merged 29 commits into from
May 26, 2015
Merged

Scale rewrite for v2.0 #1132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
b5b0081
Some helper functions needed for better scales.
etimberg May 16, 2015
db1365c
Initial check in of the scale service and the scale constructor regis…
etimberg May 16, 2015
d7ad5b6
Add a scatter chart sample
etimberg May 17, 2015
67b3d32
Initial implementation of a scatter chart. Uses a new style of config…
etimberg May 17, 2015
56d53e3
Ensure that you always have at least 2 ticks on the linear axis
etimberg May 17, 2015
454f519
Fix jshint warnings
etimberg May 18, 2015
492292e
Remove x label rotation code since we dynamically adjust the number o…
etimberg May 18, 2015
e30a9d2
The scatter example page now has negative numbers in both directions
etimberg May 18, 2015
2e383da
Handle the beginAtZero option for a linear scale. Added a helper for …
etimberg May 18, 2015
a6e2eec
Linear scale drawing improvements. Ensured that the scatter plot conf…
etimberg May 18, 2015
f206526
Fix an error in the scale service that prevented the chart from filli…
etimberg May 18, 2015
676765e
Initial config merge. Handles special cases for objects and arrays an…
etimberg May 18, 2015
978ed1b
Created a multi axis sample file. Added an option to draw ticks for t…
etimberg May 19, 2015
4b8c9bc
Fix a drawing bug when drawTicks is false.
etimberg May 19, 2015
4cc24d4
Clean up the scale service. It's now more of a helper function for fi…
etimberg May 19, 2015
008bb1a
Set new tooltip templates for the scatter chart
etimberg May 20, 2015
ed4b994
Initial dataset scale class
etimberg May 20, 2015
12e2ace
Merge remote-tracking branch 'upstream/v2.0-dev' into feature/v2.0dev-xy
etimberg May 20, 2015
b7606c7
Rename onHover to events to match the line chart
etimberg May 23, 2015
c66edc9
dataset axis to be used in the line chart and the bar chart
etimberg May 23, 2015
a559ab8
Ensure consistency in the helpers.toRadians name
etimberg May 23, 2015
d998c80
Move line chart over to use new scale config. This adds support for m…
etimberg May 23, 2015
181e866
Fix line chart multi axis sample title
etimberg May 23, 2015
a10e245
Use correct tooltip events in each chart
etimberg May 23, 2015
b67afcd
Bar chart converted to new scale system. Added bar chart multi axis s…
etimberg May 23, 2015
73b579c
Remove old linear scale
etimberg May 24, 2015
d4e7765
Clean up some unused config options. Renamed 'show' to 'display' for …
etimberg May 24, 2015
1352dfe
Fix the y scales that were missed in the previous check in
etimberg May 24, 2015
a2d477a
Moved radial scale into Chat.Scale.js. Registered as "radialLinear" w…
etimberg May 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions samples/bar-multi-axis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
<html>

<head>
<title>Bar Chart Multi Axis</title>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../Chart.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.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};

var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
yAxisID: "y-axis-1",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Dataset 2',
backgroundColor: "rgba(151,187,205,0.5)",
yAxisID: "y-axis-2",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Dataset 3',
backgroundColor: "rgba(151,187,205,0.5)",
yAxisID: "y-axis-1",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]

};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar({
data: barChartData,
options: {
responsive: true,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
scales: {
yAxes: [{
scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",

// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},

// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,

// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}, {
scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",

// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: false, // only want the grid lines for one axis to show up
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},

// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,

// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
}
}
});
};

$('#randomizeData').click(function() {
$.each(barChartData.datasets, function(i, dataset) {
dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

});
window.myBar.update();
});
</script>
</body>

</html>
17 changes: 10 additions & 7 deletions samples/bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>

<body>
<div style="width: 100%">
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
Expand Down Expand Up @@ -47,12 +47,15 @@
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true,
hoverMode: 'label',
scaleBeginAtZero: false,
hoverAnimationDuration: 400,
stacked: true,
window.myBar = new Chart(ctx).Bar({
data: barChartData,
options: {
responsive: true,
hoverMode: 'label',
scaleBeginAtZero: false,
hoverAnimationDuration: 400,
stacked: true,
}
});
};

Expand Down
7 changes: 6 additions & 1 deletion samples/doughnut.color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@

window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
window.myDoughnut = new Chart(ctx).Doughnut({
data: doughnutData,
options: {
responsive : true
}
});
};


Expand Down
7 changes: 5 additions & 2 deletions samples/doughnut.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,11 @@

window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
window.myDoughnut = new Chart(ctx).Doughnut({
data: doughnutData,
options: {
responsive: true
}
});
};

Expand Down
11 changes: 7 additions & 4 deletions samples/line-customTooltips.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,13 @@

window.onload = function() {
var ctx1 = document.getElementById("chart1").getContext("2d");
window.myLine = new Chart(ctx1).Line(lineChartData, {
showScale: false,
pointDot : true,
responsive: true
window.myLine = new Chart(ctx1).Line({
data: lineChartData,
options: {
showScale: false,
pointDot : true,
responsive: true
}
});

var ctx2 = document.getElementById("chart2").getContext("2d");
Expand Down
140 changes: 140 additions & 0 deletions samples/line-multi-axis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!doctype html>
<html>

<head>
<title>Line Chart Multiple Axes</title>
<script src="../Chart.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>
<div style="width:50%">
<div>
<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 * (Math.random() > 0.5 ? -1 : 1));
};
var randomColor = function(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};

var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
yAxisID: "y-axis-1",
}, {
label: "My Second dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
yAxisID: "y-axis-2"
}]
};

$.each(lineChartData.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(1);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});

console.log(lineChartData);

window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line({
data: lineChartData,
options: {
responsive: true,
hoverMode: 'label',
stacked: false,
scales: {
xAxes: [{
gridLines: {
offsetGridLines: false
}
}],
yAxes: [{
scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",

// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},

// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,

// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}, {
scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",

// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: false, // only want the grid lines for one axis to show up
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},

// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,

// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
}
}
});
};

$('#randomizeData').click(function() {
lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

window.myLine.update();
});
</script>
</body>

</html>
20 changes: 15 additions & 5 deletions samples/line.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>

<body>
<div style="width:100%">
<div style="width:50%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
Expand Down Expand Up @@ -45,10 +45,20 @@

window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
hoverMode: 'label',
stacked: true
window.myLine = new Chart(ctx).Line({
data: lineChartData,
options: {
responsive: true,
hoverMode: 'label',
stacked: false,
scales: {
xAxes: [{
gridLines: {
offsetGridLines: false
}
}]
}
}
});
};

Expand Down
Loading