I'm trying to create a scatter-plot chart in chart.js mixing a line chart and a bubble chart to graph the dispersion of some data vs the "ideal" of a predictive math model.
I'm using the scales to scatter the xAxes and make a straight line (which represents the "ideal"). The problem is in the bubble chart, the data of bubble can't be exactly over the line, is technically impossible (in theory), but they are exactly over the "ideal" line.
Here is my example code for the chart:
var chart = new Chart(ctx, {
type: 'bubble',
data: {
labels: makeLabels().labels,
datasets: [
{
type: 'line',
label: 'Data',
data: makeLabels().labels,
fill: false,
backgroundColor: "rgba(218,83,79, .7)",
borderColor: "rgba(218,83,79, .7)",
pointRadius: 0
},
{
type: 'bubble',
label: 'Data2',
data: makeBubbles(),
backgroundColor: "rgba(76,78,80, .7)",
borderColor: "transparent"
}
]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: 0,
max: Math.max(...makeLabels().array)
}
}]
}
}
});
And here is the complete code with the dummie data and the playground in codepen.
Anyway, this is the actual result:
And this is the expected result:
The position of the line is irrelevant (the charts in the captures aren't plotted with the same data), but what i want is to cause the bubbles to disperse.
¿Any idea how to achieve it?
The reason your points are coming out linearly is because you are setting each data point's x and y value to be the same in makeBubbles(). This results in points that are positioned linearly.
To get the points to scatter just use point that don't fall into a linear pattern. To demonstrate what I mean, I have modified your makeBubbles() function so that your x and y values aren't equal. Now you get a very broad scatter.
arr = arr.map(function(item, i) {
return {x: item, y:arr[i - 1]}
});
Here is an example.
Related
My scatter chart keep pushing double values, I am using onchange="" and doing per user input to update the x-value in my HTML.
Here is the screenshots. User input x-values here is my chart problem, the 2nd and 3rd data keeps plotting on my first onchange value. Scatter chart photo.
Here is my function.
function interactiveChart() {
let test1 = document.getElementById('bzvaqxnufhyd1').value;
let test2 = document.getElementById('bzvaqxnufhyd2').value;
let test3 = document.getElementById('bzvaqxnufhyd3').value;
nineChart2.data.datasets[0].data.push({x: test1,y: 0});
nineChart2.data.datasets[0].data.push({x: test2,y: 1385.27});
nineChart2.data.datasets[0].data.push({x: test3,y: 1959.07});
console.log(nineChart2data1)
nineChart2.update();
nineChart2.render();
}
It push my y value after I inputted x-value #1 that is my problem.
This is my chart setup
var nineChart2data1 = [];
data: {
datasets: [{
type: 'scatter',
stacked: true,
fill: false,
showLine: true,
label: ["MODEL 20T"],
backgroundColor: 'red',
borderColor: 'red',
data: [{
dataPoints: nineChart2data1
}]
}
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?
Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...
Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).
This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.
Having a chart type line, where I have drawn points on the same point x with y but different, I should bring up the tooltip on the various points, but unfortunately when I pass with the mouse on the chart appears to me only one of the marks painted on the same x, ignoring the other. The graph is on:
enter link description here
I tried, but unfortunately I have not found anything to solve my problem. And 'possible to bring up the tooltip on all points?
Thank you all for the help.
..
david
Use scatter serie, instead of line chart.
series: [{
type: 'scatter',
lineWidth: 2,
name: 'Litri Carburante Rimasti',
data: data,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
color: colorerifornimento,
}]
http://jsfiddle.net/jsd96atf/2/
I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?
See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example: