I need a way to hide marker on apex charts when the y-axis has 0 value.
For instance, this is my dataset,
d = [{x:1, y:0}, {x:2, y:10}]
So, when my chart renders, I should see one marker with point (2,10) on the chart.
If this makes sense, then can you please help me with this one?
You can't set marker's size dynamically based on y-value, but you can use the markers.discrete option.
markers: {
size: 6,
discrete: [
{
seriesIndex: 0,
dataPointIndex: 0,
size: 0
},
{
seriesIndex: 0,
dataPointIndex: 1,
fillColor: '#419EF7',
strokeColor: '#fff',
size: 6
}
]
}
Docs
Related
Inputting data as follows works:
[
{
x: 1,
y: 2
},
{
x: 2,
y: 3
},
]
Depending on the data-source it needs some conversion though. In my use case I already have the data in RAM as follows:
[
[1,2],
[2,3]
]
As I am speaking about >500k data points, the loop for formatting the data is very expensive. I do it with a map-function right now.
var plotData = myArray.map(function (value) {
return {
x: value[0],
y: value[1]
};
});
Is there any possibility to pass the data as is (array of arrays)? I can't find any hint in the docs.
How it currently works:
https://jsfiddle.net/txugfcnd/
I use Chart.js to render a scattered line chart, which works pretty well.
For the rendering algorithm I need to find out the highest value shown on the y-axis, so let's say my "largest" point in the dataset has y = 248, so the y-axis shows 250 as the largest value. I need to find out that it's 250.
I tried to inspect the chart object at runtime, like so:
lineChart.options.scales[0].ticks.??
but it seems that I can only find out the settings I set myself programmatically.
Also looking at the comprehensive Chart.js docs did not point me to the solution.
Any advice how to figure out this value?
There is callback method in which you can get the array of values which will show on yAxes.
The first element of that array will be the highest value for the yAxes. Below is the sample code for the same.
var yAxesticks = [];
var highestVal;
var chartInstanceHoverModeNearest = new Chart(ctx, {
type: 'bar',
data: data,
options:{
scales: {
yAxes : [{
ticks : {
beginAtZero : true,
callback : function(value,index,values){
yAxesticks = values;
return value;
}
}
}]
}
}
});
highestVal = yAxesticks[0];
How do I hide values past the x-axis in chartjs 2.0? You will notice the chart juts past the -60 mark. The x-axis uses a time scale and I have the max and min values set.
Here's my chart configuration:
{
"type":"line",
"data":{
"datasets":[
{
"label":"Scatter Dataset",
"data":[
{
"x":"2016-09-16T16:36:53Z",
"y":88.46153846153845
},
...
{
"x":"2016-09-16T16:37:54Z",
"y":88.3076923076923
}
],
"pointRadius":0,
"backgroundColor":"rgba(0,0,255,0.5)",
"borderColor":"rgba(0,0,255,0.7)"
}
]
},
"options":{
"title":{
"display":true,
"text":"Water Level Over Last 60 Seconds"
},
"animation":false,
"scales":{
"xAxes":[
{
"type":"time",
"position":"bottom",
"display":true,
"time":{
"max":"2016-09-16T16:37:54Z",
"min":"2016-09-16T16:36:54.000Z",
"unit":"second",
"unitStepSize":5
},
"ticks":{
callback: function(value, index, values) {
return "-" + (60 - 5 * index);
}
}
}
],
"yAxes":[
{
"display":true,
"ticks":{
}
}
]
},
"legend":{
"display":false
}
}
}
You can achieve this using Chart.js plugins. They let you handle events occuring while creating, updating or drawing the chart.
Here, you'll need to affect before the chart is initialised :
// We first create the plugin
var cleanOutPlugin = {
// We affect the `beforeInit` event
beforeInit: function(chart) {
// Replace `ticks.min` by `time.min` if it is a time-type chart
var min = chart.config.options.scales.xAxes[0].ticks.min;
// Same here with `ticks.max`
var max = chart.config.options.scales.xAxes[0].ticks.max;
var ticks = chart.config.data.labels;
var idxMin = ticks.indexOf(min);
var idxMax = ticks.indexOf(max);
// If one of the indexes doesn't exist, it is going to bug
// So we better stop the program until it goes further
if (idxMin == -1 || idxMax == -1)
return;
var data = chart.config.data.datasets[0].data;
// We remove the data and the labels that shouldn't be on the graph
data.splice(idxMax + 1, ticks.length - idxMax);
data.splice(0, idxMin);
ticks.splice(idxMax + 1, ticks.length - idxMax);
ticks.splice(0, idxMin);
}
};
// We now register the plugin to the chart's plugin service to activate it
Chart.pluginService.register(cleanOutPlugin);
The plugin is basically a loop through the data to remove the values that shouldn't be displayed.
You can see this plugin working in a live example on jsFiddle.
For instance, the following chat with a min set to 2 and a max to 6 ...
... would give the following result :
I am creating a Google scatter chart. I have one data series which looks something like:
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('number', 'Value');
data.addRows([[1,100], [2,150],
[3,200], [4,250],
[5,300], [6,350],
[7,400], [8,450]]);
I want the colour of the points on the scatter chart to vary, between green and red, based on the 'Value' of each point.
i.e. the colour of point ID=1 should be green, however ID=8 should be red!
Is this possible?
Add an extra column to your DataTable, with the role style :
data.addColumn( {'type': 'string', 'role': 'style'} );
Now add styling to each of the rows to get the desired effect :
data.addRows([[1,100, 'point {size: 14; fill-color: green'],
[2,150, 'point {size: 14; fill-color: green'],
....
[8,450, 'point {size: 14; fill-color: red']
]);
demo -> http://jsfiddle.net/v92k8rty/
Update. There is one (out of probably hundreds) javascript library that very easily can provide a gradient palette with customizeable colors and range - RainbowVis-JS. Instead of the above, create a palette by using RainbowVis in the same range as the DataTable, and then add the colors dynamically :
//create a gradient palette from green to red using RainbowVis
var rainbow = new Rainbow();
rainbow.setNumberRange(1, data.getNumberOfRows());
rainbow.setSpectrum('green', 'red');
//alter the DataTable
data.addColumn( {'type': 'string', 'role': 'style'} );
for (var i=0;i<data.getNumberOfRows();i++) {
data.setCell(i, 2, 'point { fill-color:'+rainbow.colorAt(i+1)+'}');
}
demo -> http://jsfiddle.net/ehgfwh8z/
I have my chart working ok, however I would like to use a custom step for my vertical y-axis. At the moment it seems to be automatic and is spaced out as below:
1,500,000
3,000,000
4,500,000
I would prefer it to be:
100,000
200,000
300,000
and so on...
Is there any way I can set this, I have looked through all the documentation but can't figure it out.
Here is my code:
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
yAxis: { gridlineColor: '#ff0000' },
xAxis: { gridlineColor: '#ff0000' }
}
);
My data is company profit for each week of the year, y-axis is profit, x-axis is the week number.
Hope somebody can help.
Paul
this is how I do it:
var options = {
vAxis: { // same thing for horisontal, just use hAxis
viewWindow: { // what range will be visible
max: 120,
min: 0
},
gridlines: {
count: 12 // how many gridlines. You can set not the step, but total count of gridlines.
}
}
};
all the best ;)
For as far as I know this cannot be done automatically with Google Charts settings.
I've written a javascript function to do this.
To use it you can create a nice sequence that can be used as ticks for the vertical axis:
var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
The line for the xAxis should be changed to apply the ticks:
yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
Here is the javascript method to create the ticks. It will create a tick for each value of 10 and if that creates too many ticks then it will do this for each 100 or 1000 etc.
// Creates an array of values that can be used for the tick property of the Google Charts vAxis
// The values provide a nice scale to have a clean view.
var getChartTicks = function (min, max) {
// settings
var maxTicks = 8;
var tickSize = 10;
// determine the range of the values and the number of ticks
var newMin;
var newMax;
var nrOfTicks;
var appliedTickSize = 1;
while (newMin == null || nrOfTicks > maxTicks) {
appliedTickSize *= tickSize;
newMin = Math.floor(min / appliedTickSize) * appliedTickSize;
newMax = Math.ceil(max / appliedTickSize) * appliedTickSize;
nrOfTicks = (newMax - newMin) / appliedTickSize;
}
// generate the tick values which will be applied to the axis
var ticks = new Array();
var i = 0;
for (var v = newMin; v <= newMax; v += appliedTickSize) {
ticks[i++] = v;
}
return ticks;
}
So to summarize, after adding this method your code could then be changed to:
var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
xAxis: { gridlineColor: '#ff0000' }
}
);
Hi Please refer google chart api.There are several parameters available according to your requirement like
chbh = Bar width and spacing ...
chco = Series colors ...
chd = Chart data string...
chdl,chdlp, chdls=Chart legend text and style...
chds Scale for text format with custom range...
chem = Dynamic icon markers...
for more information
http://code.google.com/apis/chart/image/docs/chart_params.html