[demo] correct example

This commit is contained in:
Prateeksha Singh 2018-04-17 23:57:24 +05:30
parent eb3cd64b1b
commit 8b61bcf888
11 changed files with 44 additions and 32 deletions

View File

@ -282,6 +282,10 @@ class SvgTip {
}
}
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) {
return parseFloat(d.toFixed(2));
}
@ -1724,14 +1728,13 @@ const NO_OF_DAYS_IN_WEEK = 7;
const NO_OF_MILLIS = 1000;
const SEC_IN_DAY = 86400;
const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
const MONTH_NAMES = ["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December"];
const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
// https://stackoverflow.com/a/11252167/6495043
function treatAsUtc(date) {
let result = new Date(date);
@ -3635,6 +3638,7 @@ class AxisChart extends BaseChart {
// removeDataPoint(index = 0) {}
}
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = {
bar: AxisChart,
line: AxisChart,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -88,7 +88,7 @@ Array.prototype.slice.call(
});
});
document.querySelector('.export-aggr').addEventListener('click', (e) => {
document.querySelector('.export-aggr').addEventListener('click', () => {
aggrChart.export();
});
@ -181,7 +181,7 @@ chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("cli
updateChart.removeDataPoint();
});
document.querySelector('.export-update').addEventListener('click', (e) => {
document.querySelector('.export-update').addEventListener('click', () => {
updateChart.export();
});
@ -233,7 +233,7 @@ Array.prototype.slice.call(
});
});
document.querySelector('.export-trends').addEventListener('click', (e) => {
document.querySelector('.export-trends').addEventListener('click', () => {
trendsChart.export();
});
@ -356,6 +356,6 @@ Array.prototype.slice.call(
});
});
document.querySelector('.export-heatmap').addEventListener('click', (e) => {
document.querySelector('.export-heatmap').addEventListener('click', () => {
heatmapChart.export();
});

View File

@ -118,7 +118,6 @@ var NO_OF_MILLIS = 1000;
var SEC_IN_DAY = 86400;
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@ -385,7 +384,7 @@ Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button'
});
});
document.querySelector('.export-aggr').addEventListener('click', function (e) {
document.querySelector('.export-aggr').addEventListener('click', function () {
aggrChart.export();
});
@ -474,7 +473,7 @@ chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("cli
updateChart.removeDataPoint();
});
document.querySelector('.export-update').addEventListener('click', function (e) {
document.querySelector('.export-update').addEventListener('click', function () {
updateChart.export();
});
@ -523,7 +522,7 @@ Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button
});
});
document.querySelector('.export-trends').addEventListener('click', function (e) {
document.querySelector('.export-trends').addEventListener('click', function () {
trendsChart.export();
});
@ -634,7 +633,7 @@ Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons but
});
});
document.querySelector('.export-heatmap').addEventListener('click', function (e) {
document.querySelector('.export-heatmap').addEventListener('click', function () {
heatmapChart.export();
});

File diff suppressed because one or more lines are too long

View File

@ -56,15 +56,15 @@
datasets: [
{
label: "Some Data", type: 'bar',
label: "Some Data", chartType: 'bar',
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
label: "Another Set", type: 'bar',
label: "Another Set", chartType: 'bar',
values: [25, 50, -10, 15, 18, 32, 27, 14]
},
{
label: "Yet Another", type: 'line',
label: "Yet Another", chartType: 'line',
values: [15, 20, -3, -15, 58, 12, -17, 37]
}
],
@ -77,7 +77,10 @@
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
height: 250,
colors: ['purple', '#ffa3ef', 'red']
});</code></pre>
});
chart.export();
</code></pre>
<!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
<!-- <div >
<div class="btn-group x-axis-buttons margin-vertical-px" role="group">
@ -100,7 +103,9 @@
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
</div>
<button type="button" class="btn btn-sm btn-tertiary export-aggr">Export</button>
<div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
</div>
<!-- <p class="text-muted">
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
</p> -->
@ -117,7 +122,7 @@
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
<button type="button" class="btn btn-sm btn-tertiary export-update">Export</button>
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
</div>
</div>
</div>
@ -134,7 +139,9 @@
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
</div>
<button type="button" class="btn btn-sm btn-tertiary export-trends">Export</button>
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
</div>
<!-- <pre><code class="hljs javascript margin-vertical-px"> ...
lineOptions: 'line', // Line Chart specific properties:
@ -194,7 +201,9 @@
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
</div>
<button type="button" class="btn btn-sm btn-tertiary export-heatmap">Export</button>
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
</div>
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart("#heatmap", {
type: 'heatmap',
height: 115,

View File

@ -102,4 +102,3 @@ export function animatePath(paths, newXList, newYList, zeroLine) {
export function animatePathStr(oldPath, pathStr) {
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
}

View File

@ -121,4 +121,4 @@ export function getShortenedLabels(chartWidth, labels=[], isSeries=true) {
});
return calcLabels;
}
}

View File

@ -70,4 +70,4 @@ export const DEFAULT_COLORS = {
// Universal constants
export const ANGLE_RATIO = Math.PI / 180;
export const FULL_ANGLE = 360;
export const FULL_ANGLE = 360;

View File

@ -6,13 +6,14 @@ export const DAYS_IN_YEAR = 375;
export const NO_OF_MILLIS = 1000;
export const SEC_IN_DAY = 86400;
export const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
export const MONTH_NAMES = ["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December"];
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
export const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
export const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
export const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];
// https://stackoverflow.com/a/11252167/6495043
function treatAsUtc(date) {