Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-07 20:59:08 +02:00
Code Issues Packages Projects Releases Wiki Activity
64b5def774
Chart.js/samples/line/line-multi-axis.html

105 lines
3.3 KiB
HTML
Raw Normal View History

Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
<!doctype html>
<html>
<head>
Fix line chart multi axis sample title
2015-05-23 23:50:27 +02:00
<title>Line Chart Multiple Axes</title>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
<script src="../../dist/Chart.bundle.js"></script>
Update chartColors.js to utils.js and move randomScalingFactor function there
2016-10-23 20:04:00 +02:00
<script src="../utils.js"></script>
improve line-logarithmic sample - set title - set same size canvas as other samples - remove user select from canvas - remove logs
2016-02-28 07:24:58 +01:00
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
</head>
<body>
improve line-logarithmic sample - set title - set same size canvas as other samples - remove user select from canvas - remove logs
2016-02-28 07:24:58 +01:00
<div style="width:75%;">
<canvas id="canvas"></canvas>
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
</div>
<button id="randomizeData">Randomize Data</button>
<script>
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
yAxisID: "y-axis-1",
}, {
label: "My Second dataset",
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
yAxisID: "y-axis-2"
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
Create interfaces similar to the old interfaces. Ensure that scales always have IDs before controllers are built.
2015-06-17 01:20:26 +02:00
window.myLine = Chart.Line(ctx, {
More maintainable file structure
2015-06-12 22:00:48 +02:00
data: lineChartData,
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
options: {
responsive: true,
Improve Tooltip and Hover Interaction (#3400) Refactored interaction modes to use lookup functions in Chart.Interaction.modes and added new modes for 'point', 'index', 'nearest', 'x', and 'y'
2016-10-03 22:05:21 +02:00
hoverMode: 'index',
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
stacked: false,
improve line-logarithmic sample - set title - set same size canvas as other samples - remove user select from canvas - remove logs
2016-02-28 07:24:58 +01:00
title:{
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
display: true,
improve line-logarithmic sample - set title - set same size canvas as other samples - remove user select from canvas - remove logs
2016-02-28 07:24:58 +01:00
text:'Chart.js Line Chart - Multi Axis'
},
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
scales: {
yAxes: [{
Rename 'scaleType' property to 'type; throughout samples & code
2015-06-13 00:24:51 +02:00
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
Move some functions into the category scale. This cleans up the bar chart interface & allows for waterfall charts by settings `stacked` to false on the category axis but `stacked` to true on the y axis
2015-06-13 02:50:26 +02:00
display: true,
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
position: "left",
id: "y-axis-1",
}, {
Rename 'scaleType' property to 'type; throughout samples & code
2015-06-13 00:24:51 +02:00
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
Move some functions into the category scale. This cleans up the bar chart interface & allows for waterfall charts by settings `stacked` to false on the category axis but `stacked` to true on the y axis
2015-06-13 02:50:26 +02:00
display: true,
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
position: "right",
id: "y-axis-2",
More maintainable file structure
2015-06-12 22:00:48 +02:00
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
document.getElementById('randomizeData').addEventListener('click', function() {
lineChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
Move line chart over to use new scale config. This adds support for multiple y axes. Added an example demonstrating this.
2015-05-23 21:19:30 +02:00
window.myLine.update();
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink