Why I don't see the second plot? - javascript

Hello I writed this code using javascript and Chart.js :
<script>
new Chart(document.getElementById("line-chart"),
{type:'line',
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false
}]
}
},
{
type: 'scatter',
data: {
datasets: [{
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
}]
},
options: {
title:{
display: true,
text:"Test"},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
}
);
</script>
And the problem is I don't see the scatter plot, I see only the first plot. Actually I would like to plot these two plot on the same graph in logarithmic scale.
Thank you very much !

You need to add one dataset with type "scatter" in the line datasets. You can checkout their mixed chart documentation here http://www.chartjs.org/docs/latest/charts/mixed.html.
You can checkout my running example here https://jsfiddle.net/sherlcode13/m3mfz6jh/5/
var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
type: 'scatter'
}
]
},
options: {
title:{
display: true,
text:"Test"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})

You can use the mixed chart, it is possible to create mixed charts that are a combination of two or more different chart types
http://www.chartjs.org/docs/latest/charts/mixed.html

Related

Can chart.js display text associated with each point on a line chart that is permanently visible?

Reading https://www.chartjs.org/docs/latest/charts/line.html#general there does not appear to be an option to add a permanently visible label associated with each data point.
For example in below fiddle the data values are:
[{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}]
Can chart.js display some text associated with each point that is permanently visible?
So instead of above data struture use :
[{x: 1, y: 2, text:'Test1'}, {x: 2, y: 4, text:'Test2'}, {x: 3, y: 8, text:'Test3'},{x: 4, y: 16, text:'Test4'}]
The attribute text contains the text data to be displayed for the given point.
Fiddle: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/3/
Fiddle src:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
Javascript:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [
{
label: 'test',
data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
showLine: true,
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
}
]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
Update:
This code:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["T", "A", "s" , "sdfs"],
datasets: [
{
label: 'test',
data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
showLine: true,
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
}
]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
Achieves the desired behaviour partially. Can the tooltips be permanently displayed?
Updated fiddle: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/14/
When using the latest stable version of Chart.js (2.9.3), it can be done through global plugins for example.
Please have a look at your amended code below. Note that the option showAllTooltips lets you enable the feature for individual charts in case you you want to include multiple charts with different behavior on the same page.
Chart.plugins.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips,
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
chart.options.tooltips.enabled = false; // turn off normal tooltips
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1) {
return;
}
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["T", "A", "s" , "sdfs"],
datasets: [
{
label: 'test',
data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
showLine: true,
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
}
]
},
options: {
showAllTooltips: true,
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Chartjs different length of labels and datasets

How to organize data depending datasets?
// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [ "Mar", "Apr", ],
datasets: [
{
label: "serj",
backgroundColor: "#11564D",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}, ],
},
{
label: "aisha",
backgroundColor: "#508D2F",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}, ],
},
{
label: "serikzhan",
backgroundColor: "#3F22F5",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Apr", y: 8000}, ],
},
],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'month',
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 6
}
}],
yAxes: [{
ticks: {
min: 0,
max: 150000,
maxTicksLimit: 5
},
gridLines: {
display: true
}
}],
},
legend: {
display: false
}
}
});
All the datasets and labels created automatically. Problem is all the data begins from March not depending x axes. Different users have different data with different months. Have we way solve the probleme with only chartjs api?
Your approach is almost fine. The only thing that needs to be changed is removing data.labels and defining xAxis as follows:
xAxes: [{
offset: true,
type: 'time',
time: {
parser: 'MMM',
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
Please note that Chart.js uses Moment.js for the functionality of the
time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
{
label: "serj",
backgroundColor: "#11564D",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}]
},
{
label: "aisha",
backgroundColor: "#508D2F",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}]
},
{
label: "serikzhan",
backgroundColor: "#3F22F5",
borderColor: "rgba(2,117,216,1)",
data: [{x: "Apr", y: 8000}]
}
]
},
options: {
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
parser: 'MMM',
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 6
}
}],
yAxes: [{
ticks: {
min: 0,
max: 150000,
maxTicksLimit: 5
},
gridLines: {
display: true
}
}],
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myBarChart" height="90"></canvas>

Chart.js -> line chart -> multiple points with the same X

I am using chart.js to create some charts, and I need to make line chart that have multiple entries for the same point in the X axes.
In other words, this:
Whatever I try, i can not create it to look like the image.
Dose anyone know how I can manage this (with plugins or without)?
This can be done with a scatter graph, the data has to be an array of objects with x and y, also you can adjust the tension of the line.
var data = {
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [{
x: 0,
y: 5
},
{
x: 1,
y: 10
},
{
x: 1,
y: 5
},
{
x: 3,
y: 10
}]
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}]
},
elements: {
line: {
tension: .1, // bezier curves
}
}
};
Chart.Scatter('chart_0', {
options: option,
data: data
});
[Codepen]https://codepen.io/devil-geek/pen/KrQWBP

Chart.js Vertically Aligned points on single x axis

I have a bit of a unique chart.js issue here whereas I'm attempting to plot points on a linear chart on a single X axis only. For a visual reference, this chart would look like a vertical line with multiple Y values on a single X value. So far I cannot get the charts.js scipt to not automatically space values across the width of the chart at 100%, even with all X values declared at 0. I've got the sample data set with basic filler with a 0 X Value for each in the following.
<script>
var chart = new Chart(linechart, {
type: 'line',
options: {
scales: {
xAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
},
}],
yAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
},
}]
},
legend: {
}
},
data: {
datasets: [{
data: [{x: 0, y: 12}, {x: 0, y: 11}, {x: 0, y: 10}],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: true,
showLine: false
}]
}
});
</script>
The issue here is that the x-axis default type of a line chart is category. To turn this into linear, simply add type: 'linear' to the x-axis as follows:
options: {
scales: {
xAxes: [{
type: 'linear',
...
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'Dataset',
data: [{ x: 0, y: 12 }, { x: 0, y: 11 }, { x: 0, y: 10 }],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: false,
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
gridLines: {},
ticks: {
suggestedMin: 0,
}
}],
yAxes: [{
gridLines: {},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Chart.js adds second lines values to first

I have bar/line chart on my page and there is two lines and four bar values.
The first line is average value, that is one straight line, so it is array that filled with same number. Second line has different values that are not related to first line number. The think is that the first line raises the second line?? When I click to enable the average line, then the second line goes to right place. Is this a bug or did I do something wrong?
Here is is the code:
var ctx_bar = document.getElementById("points").getContext('2d');
var average = Array.apply(null, Array(points_order[0].length)).map(Number.prototype.valueOf,glob_pisteet[4][3]);
trows_chart = new Chart(ctx_bar, {
type: 'bar',
data: {
labels: points_order[4],
datasets: [{
type: 'line',
label: 'average',
borderColor: 'rgb(50, 50, 0)',
borderWidth: 1,
fill: false,
radius: 0,
data: average
},{
type: 'line',
label: 'points/trow',
borderColor: 'rgb(255, 51, 51)',
borderWidth: 4,
fill: false,
data: points_order[5]
},{
type: 'bar',
label: 'first',
backgroundColor: 'rgb(0, 92, 230)',
stack: 'round 1',
data: points_order[0]
}, {
type: 'bar',
label: 'second',
backgroundColor: 'rgb(102, 163, 255)',
stack: 'round 1',
data: points_order[1]
}, {
type: 'bar',
label: 'third',
backgroundColor: 'rgb(230, 138, 0)',
stack: 'round 2',
data: points_order[2]
}, {
type: 'bar',
label: 'fourth',
backgroundColor: 'rgb(255, 194, 102)',
stack: 'round 2',
data: points_order[3]
}]
},
options: {
title:{
display:true,
text:"Drows"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
Well I found the reason:
If you have your options setting like this:
title:{
display:true,
text:"Heitot"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Then it will do that. As soon as you take this part:
yAxes: [{
stacked: true
}]
away or change stacked: true to false, then it acts like normal.

Categories