Is it possible to disable point display on 2.0.0-beta2 line type charts?
How?
I have a weekly graph with time scale where data is hourly. All works well but there are too many points. I would prefer a graph with just lines and without points. I searched the documentation but I haven't seen any option about it.
Maybe a bit late but still.
I had this same issue & searched the Source code for this (Because It used to be: pointDot: false which isn't working anymore)
There are 2 ways of doing this now:
Use the options (This is in the documentation nnick.github Chartjs & Search for point.radius)
options: {
elements: { point: { radius: 1, hitRadius: 1, hoverRadius: 4 } }
}
Use the property from the line dataset itself
data: {
datasets: [{
radius: 0,
Small remark: when using radius: 0 it's hard to find the point when mouseover
Related
I'm fairly new in js and I'm using chartjs to plot information of database.
Until now, I have managed to plot all my work. But there is one thing I don't know how to do.
I have a nested dict like this :
{
"tech_1": {
"cert_1": 1,
"cert_2": 3
},
"tech_2": {
"cert_3": 10,
"cert_4": 5
}
}
How can I plot this dict in chartJS to have something like this :
Thanks for your help.
Chart.js doesn't support nested label.
https://github.com/chartjs/Chart.js/issues/4946
In discussion above, unofficial plugin is recommeded. This may realize your needs.
https://github.com/sgratzl/chartjs-plugin-hierarchical
I'm trying to display a formatted string for thousands and million amounts for only certain ticks on a horizantal stacked bar chart.
See line 18 (which works): https://stackblitz.com/edit/angular-sl5pqg
If the line is changed to const actualAmount = 12500000;, I am expecting "$12.5M" to be displayed on the first tick point I want to display but it's coming up blank.
Could someone kindly let me know what I'm doing wrong?
Many thanks!
Ben
Your code looks fine but you need to define ticks.autoSkip: false:
ticks: {
...
autoSkip: false,
Please have a look at the amended StackBlitz
If autoSkip is true (default), Chart.js automatically calculates
how many labels can be shown and hides labels accordingly. Labels will
be rotated up to maxRotation before skipping any. Turn autoSkip
off to show all labels no matter what.
I have too many points on x-axis in my chart. I would like to limit maximum of displayed points to 100. But at the same time still displaying same chart. Exactly same chart - but with fewer points.
screenshot of my chart with too many points
I have no idea how to do it in PHP at server side so I was thinking if there is any solution on client side in chart.js?
It's your responsibility to give chart.js the points it should display. You have to limit the arrays with the labels and the data to 100 datapoints. Use every second data or so. Just do it in plain JavaScript. There's no function in chart.js for that.
For large datasets, chart.js does offer a data decimation plugin that automatically decimates data at the start of the chart lifecycle, reducing the number of data points drawn.
According to chart.js docs, to use the decimation plugin, the following requirements must be met:
The dataset must have an indexAxis of 'x' The dataset must be a line
The X axis for the dataset must be either a 'linear' or 'time' type axis
Data must not need parsing, i.e. parsing must be false
The dataset object must be mutable. The plugin stores the original data
as dataset._data and then defines a new data property on the dataset.
Your chart options should look something like this:
options: {
parsing: false,
plugins: {
decimation: {
enabled: false,
algorithm: 'min-max',
},
},
scales: {
x: {
type: 'time',
ticks: {
source: 'auto',
autoSkip: true,
}
}
}
Remember also that if you disable parsing the data you pass should be in the right format for the type of chart you chose, so epoch timestamps in this case. More info here.
Finally, you can find a working example here.
this was originally asked on Google groups but since I received no replies, I'm asking here on SO.
I am plotting basic data like temperature, various counts and such with date time and I like to append a third column as a further description.
E.g.
time, value, description
time, value, description
time, value, description
So I am looking at the simplest way of plotting that, as full screen as possible, as minimally (least LOC) as possible.
So far with https://jsfiddle.net/kaihendry/q1mczqc1/2/ I have not figured how to show the description (is it a infobox/selection? not sure on terminology), which in my example is the kernel version, when I click a point.
Furthermore I don't understand why on the right of the graph there are these null value labels:
http://s.natalian.org/2015-06-16/1434449447_1054x1058.png
And any tips to make http://s.natalian.org/2015-06-16/foo.html scale to fill the whole screen? I especially want to make it usable on my iPhone.
I have not figured how to show the description (is it a infobox/selection? not sure on terminology)
In web development, this is called a tooltip. In Google charts, you can add a tooltip by replacing the commented line with the following one :
//data.addColumn('string', 'kernel');
data.addColumn({type: 'string', role: 'tooltip'});
So, the 3rd column will not be handled as a data series, but as a tooltip.
Furthermore I don't understand why on the right of the graph there are these null value labels
The null values are shown, because (as previously stated), you have inserted 2 series of data ('Date' and 'kernel'). If you make the replacement mentioned before, the null values will be replaced
And any tips to make .. scale to fill the whole screen ?
You can add the following option to configure the dimensions of the chart :
var options = {
chartArea: {width: '80%', height: '80%'}
};
Furthermore, since the version of line charts you are using are slightly obsolete, you shoud replace
var chart = new google.charts.Line(document.getElementById('linechart_material'));
with
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
In the following jsfiddle, you can find a final working version
(with some more fixes, like horizontal axis range and legend positioning).
If I understand right you want to add third column as a description for each point.
If you add 3rd column like this
data.addColumn('string', 'kernel');
Google chart takes this as another series and because the data are string it can't draw the series and shows null.
You can add 3rd column as a tooltip.
data.addColumn({type: 'string', role: 'tooltip'});
But for tooltip to work you need to change the line chart to visualization line chart
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
To make chart fill the screen you can change the div style.
<div id="linechart_material" style="height:100%;"></div>
I have this Column Chart using Google's Visualization Chart API tools. How would I make it so the y-axis numbers are only positive whole numbers? I've tried looking through the documentation but can't seem to find anything.
I used the following and have not seen fractions since...
vAxis:{minValue:0,maxValue:5,gridlines:{count:6}}
The trick seems to be that with 6 gridlines and 5 as lowest 'high' value,
the halves and tenths aren't applicable anymore.
This worked for me
vAxis: {minValue:0, format:'#'}
Simply use hAxis.format
example :
hAxis: {minValue:0,format:'0'},
format 0 = Digit
Positive numbers:
You can use vAxis.minValue to set the lowest y-axis gridline, however the actual value of the gridline will be the minimum of what you set and the lowest value in your data, so if you have 0 in your data (as it seems you do for Unsatisfactory), this value will be used for the lowest y-axis gridline.
Whole numbers:
http://groups.google.com/group/google-visualization-api/browse_thread/thread/04a001766367dc0f/84c34338c2808069 - this is an older post, but as there is nothing in the chart API documentation, it seems the functionality to specify whole numbers only is still lacking.
Because the chart defaults to 5 gridlines (this is what you'd like to be able to override), if your highest data value is 2.0 (like in the example) you could force whole numbers by setting vAxis: {maxValue: 5}, although this may not be the most elegant solution.
you can use the axisLabels feature.
To use it, you must manually edit your axixLabels as shown here: http://code.google.com/apis/chart/image/docs/chart_params.html#axis_labels
e.g.:
chxt=x,y
chxp=0:|Excellent|Very Good|Fair|Unsatisfactory|1:|0|1|2
Greetings,
Jan
If you change your graph type as follow:
google.load('visualization', '1', {'packages':['linechart']});
will work for you..
var max=Math.max(1,10,15,20);(u have to pass the values what the values u have)
var maxvalue= max / 4;
var res=Math.floor(maxvalue);
res=res+1;
var remin= max % 4;
if(res != 0) {
maxvalue=(res * 4);
}
else
maxvalue= 4;
use the above code its working fine for me.
The only workaround that I could find to this problem is that... For example, the default grid divisions are 4. You could change that number. But incase of the default (4) the vAxis.maxValue should be divisible by 4, if now increment that number so that it is.