chartjs datapoints breakes - javascript
I don't know If I have done anything wrong or if this is just an annoying bug.
I want to be able to have two charts on top of each other and have the 24-hour format
so the x-axis should start from 0 and go to 23:59
When I add one datapoint to the chart it works and it does not break. As soon as I add another datapoint it breaks.
If you look at the image the Monthly totals works, but as soon as I get the data2 info then some data points on the red line just start to break.
Also I don't know how to remove some of the labels since there are duplicates
Codesandbox link to bug
This is how my datapoints are
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: usageData,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
},
{
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
},
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
options: {
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
},
};
AFA I see, there is a bug in the chart configuration. The options node it's wrong and it must be removed. This is the reason of the bug and why the scales are not what your are defining (see missing colors and correct position in your picture) and is using the defaults (linear ones).
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let dsMonthly = {
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
};
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: dailyGeneration,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
}
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm"
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'line',
data: yourData,
options: yourOptions
});
document.getElementById('month').addEventListener('click', function() {
myChart.data.datasets.push(dsMonthly);
myChart.update();
document.getElementById('month').disabled = true;
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
<button id="month">Add month dataset</button>
</body>
</html>
Related
Comparing two array and adding missing objects in JS
I have two big arrays I want to compare both arrays and add missing data from arrayOne to arrayTwo
this is my some of the data
const arrayOne = [
{
id: "This Year",
data: [
{ x: "01-02", y: "81" },
{ x: "01-03", y: "361" },
{ x: "01-04", y: "64" },
{ x: "01-05", y: "169" },
{ x: "01-06", y: "9" },
{ x: "01-07", y: "100" },
{ x: "01-08", y: "144" },
{ x: "01-09", y: "81" },
{ x: "01-10", y: "256" },
{ x: "01-11", y: "81" },
{ x: "01-12", y: "144" },
{ x: "01-13", y: "144" },
{ x: "01-14", y: "225" },
{ x: "01-15", y: "289" },
{ x: "01-16", y: "81" },
{ x: "01-17", y: "64" },
{ x: "01-18", y: "64" },
{ x: "01-19", y: "121" },
{ x: "01-20", y: "25" },
{ x: "01-21", y: "49" },
{ x: "01-22", y: "16" },
{ x: "01-23", y: "49" },
{ x: "01-24", y: "196" },
{ x: "01-25", y: "16" },
{ x: "01-26", y: "25" },
{ x: "01-27", y: null },
{ x: "01-28", y: "144" },
{ x: "01-29", y: "100" },
{ x: "01-30", y: "64" },
{ x: "01-31", y: "144" },
{ x: "02-01", y: "100" },
{ x: "02-02", y: "100" },
{ x: "02-03", y: "49" },
],
},
];
const arrayTwo = [
{
id: "This Year",
data: [
{ x: "01-02", y: "64" },
{ x: "01-03", y: "25" },
{ x: "01-04", y: "25" },
{ x: "01-05", y: "169" },
{ x: "01-15", y: "64" },
{ x: "01-16", y: "121" },
{ x: "01-17", y: "49" },
{ x: "01-18", y: "81" },
{ x: "01-19", y: "49" },
],
},
];
I have tried to map it and compare it with respect to x but i am not able to achieve desirable output
arrayOne[0].data.map((date, index) => {
arrayTwo[0].data.map((newDate, newIndex) => {
if (date.x !== newDate.x) {
arrayTwo[0].data.push({x:date.x, y: null })
}
});
});
I want to check if data is missing from arrayTwo[data] if it is missing then add that data from arrayOne[data] (i.e. take the object with its x-value but set the y-value to null)
Desired output:
[
{
"id":"This Year",
"data":[
{"x":"01-02", "y":"64"},
{"x":"01-03", "y":"25"},
{"x":"01-04", "y":"25"},
{"x":"01-05", "y":"169"},
{"x":"01-06", "y":null},
{"x":"01-07", "y":null},
{"x":"01-08", "y":null},
{"x":"01-09", "y":null},
{"x":"01-10", "y":null},
{"x":"01-11", "y":null},
{"x":"01-12", "y":null},
{"x":"01-13", "y":null},
{"x":"01-14", "y":null},
{"x":"01-15", "y":"64"},
{"x":"01-16", "y":"121"},
{"x":"01-17", "y":"49"},
{"x":"01-18", "y":"81"},
{"x":"01-19", "y":"49"},
{"x":"01-20", "y":null},
{"x":"01-21", "y":null},
{"x":"01-22", "y":null},
{"x":"01-23", "y":null},
{"x":"01-24", "y":null},
{"x":"01-25", "y":null},
{"x":"01-26", "y":null},
{"x":"01-27", "y":null},
{"x":"01-28", "y":null},
{"x":"01-29", "y":null},
{"x":"01-30", "y":null},
{"x":"01-31", "y":null},
{"x":"02-01", "y":null},
{"x":"02-02", "y":null},
{"x":"02-03", "y":null}
]
}
]
You can do it like this:
create an object (objOne) from arrayOne[0].data using reduce
overwrite any property of the objOne if the key is present in arrayTwo[0].data, again using reduce and using objOne as the initial value.
convert this objOne to an array with Object.values(objOne) and then set that as the property of arrayTwo[0].data
Time complexity should be O(n + m) for the two reduce functions (where n and m are the length of the two arrays). (Should be faster than using find for every element in one of the arrays)
Key part of the code:
const objOne = arrayOne[0].data.reduce((aggObj, item) => {
aggObj[item.x] = item;
return aggObj;
}, {});
const mergedObjOutput = arrayTwo[0].data.reduce((aggObj, item) => {
aggObj[item.x] = item;
return aggObj;
}, objOne)
const mergedFinalOutput = [...arrayTwo];
mergedFinalOutput[0].data = Object.values(mergedObjOutput);
console.log(mergedFinalOutput);
Full demo:
const arrayOne = [
{
id: "This Year",
data: [
{ x: "01-02", y: "81" },
{ x: "01-03", y: "361" },
{ x: "01-04", y: "64" },
{ x: "01-05", y: "169" },
{ x: "01-06", y: "9" },
{ x: "01-07", y: "100" },
{ x: "01-08", y: "144" },
{ x: "01-09", y: "81" },
{ x: "01-10", y: "256" },
{ x: "01-11", y: "81" },
{ x: "01-12", y: "144" },
{ x: "01-13", y: "144" },
{ x: "01-14", y: "225" },
{ x: "01-15", y: "289" },
{ x: "01-16", y: "81" },
{ x: "01-17", y: "64" },
{ x: "01-18", y: "64" },
{ x: "01-19", y: "121" },
{ x: "01-20", y: "25" },
{ x: "01-21", y: "49" },
{ x: "01-22", y: "16" },
{ x: "01-23", y: "49" },
{ x: "01-24", y: "196" },
{ x: "01-25", y: "16" },
{ x: "01-26", y: "25" },
{ x: "01-27", y: null },
{ x: "01-28", y: "144" },
{ x: "01-29", y: "100" },
{ x: "01-30", y: "64" },
{ x: "01-31", y: "144" },
{ x: "02-01", y: "100" },
{ x: "02-02", y: "100" },
{ x: "02-03", y: "49" },
],
},
];
const arrayTwo = [
{
id: "This Year",
data: [
{ x: "01-02", y: "64" },
{ x: "01-03", y: "25" },
{ x: "01-04", y: "25" },
{ x: "01-05", y: "169" },
{ x: "01-15", y: "64" },
{ x: "01-16", y: "121" },
{ x: "01-17", y: "49" },
{ x: "01-18", y: "81" },
{ x: "01-19", y: "49" },
],
},
];
const objOne = arrayOne[0].data.reduce((aggObj, item) => {
aggObj[item.x] = item;
return aggObj;
}, {});
const mergedObjOutput = arrayTwo[0].data.reduce((aggObj, item) => {
aggObj[item.x] = item;
return aggObj;
}, objOne)
const mergedFinalOutput = [...arrayTwo];
mergedFinalOutput[0].data = Object.values(mergedObjOutput);
console.log(mergedFinalOutput);
.as-console-wrapper { max-height: 100% !important; top: 0; }
UPDATE
If you really want your output like this (from your clarification in the comments under your question):
[
{
"id":"This Year",
"data":[
{"x":"01-02", "y":"64"},
{"x":"01-03", "y":"25"},
{"x":"01-04", "y":"25"},
{"x":"01-05", "y":"169"},
{"x":"01-06", "y":null},
{"x":"01-07", "y":null},
{"x":"01-08", "y":null},
{"x":"01-09", "y":null},
{"x":"01-10", "y":null},
{"x":"01-11", "y":null},
{"x":"01-12", "y":null},
{"x":"01-13", "y":null},
{"x":"01-14", "y":null},
{"x":"01-15", "y":"64"},
{"x":"01-16", "y":"121"},
{"x":"01-17", "y":"49"},
{"x":"01-18", "y":"81"},
{"x":"01-19", "y":"49"},
{"x":"01-20", "y":null},
{"x":"01-21", "y":null},
{"x":"01-22", "y":null},
{"x":"01-23", "y":null},
{"x":"01-24", "y":null},
{"x":"01-25", "y":null},
{"x":"01-26", "y":null},
{"x":"01-27", "y":null},
{"x":"01-28", "y":null},
{"x":"01-29", "y":null},
{"x":"01-30", "y":null},
{"x":"01-31", "y":null},
{"x":"02-01", "y":null},
{"x":"02-02", "y":null},
{"x":"02-03", "y":null}
]
}
]
Then this is the demo:
const arrayOne = [
{
id: "This Year",
data: [
{ x: "01-02", y: "81" },
{ x: "01-03", y: "361" },
{ x: "01-04", y: "64" },
{ x: "01-05", y: "169" },
{ x: "01-06", y: "9" },
{ x: "01-07", y: "100" },
{ x: "01-08", y: "144" },
{ x: "01-09", y: "81" },
{ x: "01-10", y: "256" },
{ x: "01-11", y: "81" },
{ x: "01-12", y: "144" },
{ x: "01-13", y: "144" },
{ x: "01-14", y: "225" },
{ x: "01-15", y: "289" },
{ x: "01-16", y: "81" },
{ x: "01-17", y: "64" },
{ x: "01-18", y: "64" },
{ x: "01-19", y: "121" },
{ x: "01-20", y: "25" },
{ x: "01-21", y: "49" },
{ x: "01-22", y: "16" },
{ x: "01-23", y: "49" },
{ x: "01-24", y: "196" },
{ x: "01-25", y: "16" },
{ x: "01-26", y: "25" },
{ x: "01-27", y: null },
{ x: "01-28", y: "144" },
{ x: "01-29", y: "100" },
{ x: "01-30", y: "64" },
{ x: "01-31", y: "144" },
{ x: "02-01", y: "100" },
{ x: "02-02", y: "100" },
{ x: "02-03", y: "49" },
],
},
];
const arrayTwo = [
{
id: "This Year",
data: [
{ x: "01-02", y: "64" },
{ x: "01-03", y: "25" },
{ x: "01-04", y: "25" },
{ x: "01-05", y: "169" },
{ x: "01-15", y: "64" },
{ x: "01-16", y: "121" },
{ x: "01-17", y: "49" },
{ x: "01-18", y: "81" },
{ x: "01-19", y: "49" },
],
},
];
const objOne = arrayOne[0].data.reduce((aggObj, item) => {
aggObj[item.x] = {...item, y: null};
return aggObj;
}, {});
const mergedObjOutput = arrayTwo[0].data.reduce((aggObj, item) => {
aggObj[item.x] = item;
return aggObj;
}, objOne)
const mergedFinalOutput = [...arrayTwo];
mergedFinalOutput[0].data = Object.values(mergedObjOutput);
console.log(mergedFinalOutput);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Try something like this:
Loop through the elements, if they aren't found in the first array add them to the second array
const arrayOne = [
{
id: "This Year",
data: [
{ x: "01-02", y: "81" },
{ x: "01-03", y: "361" },
{ x: "01-04", y: "64" },
{ x: "01-05", y: "169" },
{ x: "01-06", y: "9" },
{ x: "01-07", y: "100" },
{ x: "01-08", y: "144" },
{ x: "01-09", y: "81" },
{ x: "01-10", y: "256" },
{ x: "01-11", y: "81" },
{ x: "01-12", y: "144" },
{ x: "01-13", y: "144" },
{ x: "01-14", y: "225" },
{ x: "01-15", y: "289" },
{ x: "01-16", y: "81" },
{ x: "01-17", y: "64" },
{ x: "01-18", y: "64" },
{ x: "01-19", y: "121" },
{ x: "01-20", y: "25" },
{ x: "01-21", y: "49" },
{ x: "01-22", y: "16" },
{ x: "01-23", y: "49" },
{ x: "01-24", y: "196" },
{ x: "01-25", y: "16" },
{ x: "01-26", y: "25" },
{ x: "01-27", y: null },
{ x: "01-28", y: "144" },
{ x: "01-29", y: "100" },
{ x: "01-30", y: "64" },
{ x: "01-31", y: "144" },
{ x: "02-01", y: "100" },
{ x: "02-02", y: "100" },
{ x: "02-03", y: "49" }
]
}
];
const arrayTwo = [
{
id: "This Year",
data: [
{ x: "01-02", y: "64" },
{ x: "01-03", y: "25" },
{ x: "01-04", y: "25" },
{ x: "01-05", y: "169" },
{ x: "01-15", y: "64" },
{ x: "01-16", y: "121" },
{ x: "01-999", y: "49" },
{ x: "01-18", y: "81" },
{ x: "01-19", y: "49" }
]
}
];
console.log(arrayOne);
arrayTwo[0].data.forEach(obj => {
const found = arrayOne[0].data.find(obj2 => obj2.x === obj.x);
if (!found) {
arrayOne[0].data.push(obj);
}
});
console.log(arrayOne);
How to show only first and last labels in CanvasJS
I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?
You can use axisY labelFormatter to do so.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisY: {
tickColor: "transparent",
labelFormatter: function(e){
if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
return e.value;
return "";
}
},
data: [{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
You can also try hiding all axis-labels and add stripLines at the minimum and maximum.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisX: {
valueFormatString: "####"
},
axisY:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
axisY2:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
data: [
{
type: "column",
showInLegend: true,
name: "Axis Y-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Axis Y2-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 12 },
{ x: 2007, y: 20 },
{ x: 2008, y: 28 },
{ x: 2009, y: 34 },
{ x: 2010, y: 24 },
{ x: 2011, y: 45 },
{ x: 2012, y: 15 },
{ x: 2013, y: 34 },
{ x: 2014, y: 22 }
]
}
]
});
chart.render();
addStripLine(chart);
function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
min = chart.axisY[i].get("minimum");
max = chart.axisY[i].get("maximum");
chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
min = chart.axisY2[i].get("minimum");
max = chart.axisY2[i].get("maximum");
chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
How to create chart bar with lines in jQuery
I want create some Chart Bar + line, but i dont know how to combine two chart. I wannt make Like this pic Bar Thanks, Hope someone can Help my problem
How about this one https://jsfiddle.net/nu7cx100/
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Grafik Riwayat PKPT"
},
axisX:{
valueFormatString: "####",
interval: 1
},
axisY:[{
title: "Linear Scale",
lineColor: "#369EAD",
titleFontColor: "#369EAD",
labelFontColor: "#369EAD"
}],
axisY2:[{
title: "Linear Scale",
lineColor: "#7F6084",
titleFontColor: "#7F6084",
labelFontColor: "#7F6084"
}],
data: [
{
type: "column",
showInLegend: true,
//axisYIndex: 0, //Defaults to Zero
name: "ANNGGARAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 60 },
{ x: 2007, y: 20 },
{ x: 2008, y: 50 },
{ x: 2009, y: 70 },
{ x: 2010, y: 10 },
{ x: 2011, y: 50 },
{ x: 2012, y: 50 },
{ x: 2013, y: 20 },
{ x: 2014, y: 20 }
]
},
{
type: "line",
showInLegend: true,
axisYIndex: 1, //Defaults to Zero
name: "KEGIATAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 15 },
{ x: 2007, y: 3 },
{ x: 2008, y: 20 },
{ x: 2009, y: 10 },
{ x: 2010, y: 15 },
{ x: 2011, y: 10 },
{ x: 2012, y: 20 },
{ x: 2013, y: 20 },
{ x: 2014, y: 2 }
]
}
]
});
chart.render();
}
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
It uses canvasjs
Hope this helps
Changing the x-label in HTML Canvas charts
Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?
You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };
Canvas.js not showing all label
I have a graph like in the picture. But I am having trouble with the labels. I can not show all of the labels. When I hover on it it shows the label, but when I print it it doesn't display.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX: { labelAngle: -70 },
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
Try adding:
culture: "es",
to your object config after title: { text: '' },
Some of the labels hide in order to avoid overlapping due to insufficient width. In your case if you do this:
axisX: {
interval: 1,
labelAngle: -70
}
it should work.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX:{
interval: 1,
labelAngle: -70
},
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
.description {
margin-top: 50px;
text-align:left;
font-family: calibri;
font-size: 16px;
color: gray;
}
a:link, a:visited, a:active {
color: #4F81BC;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
This should definitely work. I got the similar issue I could resolve it by adding this :
axisX: {
interval: 1,
labelAngle: -70
}