I have created a line graph using the google chart, I have inserted the image of the chart with this question. You may see that Y axis values are in created by 2, I would like to increase the Y Axis values by 1, is there any way to do so.
Image line http://imagebin.org/260899
I think that playing with parameter gridlines:{count} is right way to solve your problem, e.g.
hAxis: {
minValue: 0.00,
maxValue: 10.00
},
vAxis: {
minValue: 0.00,
maxValue:8.00,
baseline:4.00,
viewWindowMode:'explicit',
viewWindow:
{
max:8.00,
min:0.00
},
gridlines:{count:9}
}
Related
I previously had a scatter graph in Chart.js 2 with the zoom plugin, in which I just had to add data and change the xAxis ticks' min/max to see a nice animated horizontal scroll from my old xAxis range to my new xAxis range.
For some reason I now use Chart.js 3.24 and the zoom plugin 1.1.1. Now the same graph with nearly the same options became quite ugly when animated:
newly added points e.g. at position (X,Y) have an animation going from (X,0) to (X,Y), instead of appearing directly at (X,Y).
when a point from a dataset is at the same position than a line from another dataset, they move at a different speed.
if many points and line are added, sometimes the lines are only shown after the "scrolling animation" ended.
sometimes a point appear at its correct final position before the "scrolling animation" even started.
The only solution I found was to disable animation when updating my graph, then use window.requestAnimationFrame to manually pan the graph myself with the zoom plugin.
Are you aware of a better/simpler recommended way to achieve this ?
Thanks in advance,
My old Chart.js options:
let zoom_options = {
pan: {
enabled: true,
mode: 'x',
rangeMin: { x: 0, y: null},
rangeMax: { x: null, y: null}
},
zoom: {
enabled: true,
drag: false,
mode: 'x',
rangeMin: { x: 0, y: null },
rangeMax: { x: null, y: null },
speed: 0.1
}
};
var ctx = graph.getContext('2d');
this._chartjs = new Chart(ctx, {
type: 'scatter',
data: {
datasets: []
},
options: {
legend: {
//display: false
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
},
plugins: {
zoom: zoom_options // https://github.com/chartjs/chartjs-plugin-zoom
}
}
});
My old line options :
{
label: name,
showLine: false,
fill:false,
spanGaps: false, // I have some NaN values in my datasets.
backgroundColor: color.points_borders,
borderColor: color.line,
borderWidth:5,
pointRadius:5,
pointBorderWidth:2,
pointBorderColor: color.points_borders,
pointBackgroundColor: color.points,
data: []
}
My old update function:
this._chartjs.options.scales.xAxes[0].ticks.min = min;
this._chartjs.options.scales.xAxes[0].ticks.max = length;
this._chartjs.update();
I have a collection of 1000s of x/y points. I would like to plot them on a chart with a line connecting them all. This should be very easy to do but upon reading the docs there is no plot(x,y) type function. I am noticing the following:
It looks like a label has to be created for every x value. I may not know the x values at the time of the charts creation
I have huge numbers with many decimal places. I assume this will mean that most x values end up between labels.
Is there a way to plot the points without having a circular plot point shape? Basically a smooth line running all the way from the left to the right that is created based on the x/y data?
Here is some example data so you get the idea:
data: [
{x: 21345.67890, y: 40},
{x: 22783.12345, y: 43},
{x: 27900.00012, y: 80},
// many more plot points
],
Am I missing something obvious? Is there a quick example someone could whip up to show me how this works?
It looks like a label has to be created for every x value. I may not know the x values at the time of the charts creation
I am not sure how your data arises, but aking into consideration the information provided, you should create an object containing all of your data points and use the object within the chart function.
To provide a solution for this part we would need more input about how your data is built.
I have huge numbers with many decimal places. I assume this will mean that most x values end up between labels.
Well, this is more or less the spirit of a line chart. Depending on the data's value you should just define your axes properly to get a understandable visualization of your data.
Is there a way to plot the points without having a circular plot point shape? Basically a smooth line running all the way from the left to the right that is created based on the x/y data?
Chart.JS comes with a lot of options to play with. E.g. you could use pointStyle or pointRadius properties to change the points to your needs.
I attached an example for you to adapt as needed. As you can see the lines are smoothly visualized. The example uses multiple chart types in one. You can just remove the bar part.
For further reference check out the official documentation, especially the line-chart part: https://www.chartjs.org/docs/latest/charts/line.html
var optionsMulti = {
chart: {
height: 280,
width: 375,
type: 'line',
stacked: false,
toolbar: {
show: false
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
},
series: [{
name: 'Goals scored',
data: [2, 4, 5, 1, 1, 3, 3, 2, 4, 5, 1, 3]
}, {
name: 'Goals Conceded',
data: [1, 1, 3, 4, 2, 2, 3, 2, 1, 2, 5, 3]
}, {
name: 'Points gained',
type: 'column',
data: [3, 3, 3, 0, 0, 3, 0, 0, 3, 3, 0, 1]
}],
stroke: {
width: [4, 4, 4],
curve: 'smooth'
},
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
xaxis: {
type: 'category',
line: {
show: false
},
},
yaxis: {
min: 0,
max: 6,
tickamount: 6,
labels: {
show: false
},
line: {
show: false
},
},
};
var chartMulti = new ApexCharts(
document.querySelector("#chartMulti"),
optionsMulti
);
chartMulti.render();
<html>
<body>
<div id="chartMulti"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</html>
I'm enjoying the great Material chart lib from Google. I'm wondering if there is a way to set a max value on one of the series when using two independent x-axis?
var options7 = {
bars: 'horizontal',
series: {
0: {axis: 'percent', maxValue: 100}, // Bind series 0 to an axis named 'percent'.
1: {axis: 'total'} // Bind series 1 to an axis named 'total'.
},
axes: {
x: {
percent: {label: 'Percent Answered', maxValue: 100}, // Bottom x-axis.
total: {side: 'top', label: 'Total Questions'} // Top x-axis.
}
},
hAxis: {title: 'Questions Answered for the Division', maxValue: 100}
};
data7.sort({column: 2});
chart7 = new google.charts.Bar(document.getElementById("deptQuestionsAnswered"));
chart7.draw(data7, options7);
I've added the maxValue field in all the places I thought it might help one at a time, as well as combined (as in above code), but I can't find any documentation on how to do this for multi-series.
Any thoughts?
How do I adjust the column width on a google combo chart? Below is my code, but I can't figure out how to set the column width. Depending on the data I enter, the api makes the columns different widths. I'd like them all 10px. I've been trying to set the with with bar.groupWidth but cannot. Any ideas?
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Boluses', 'Total Volume', '30 mL/kg', { role: 'annotation' }], [0,0,0,1769.1, null],[9, 500, 500, 1769.1, null],[29, 250, 750, 1769.1, null],[44, 250, 1000, 1769.1, null],[114, 2000, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[288, 85, 3085, 1769.1, null],[288, 6.8, 3091.8, 1769.1, null],[348, 100, 3191.8, 1769.1, null],[348, 8, 3199.8, 1769.1, null],[408, 100, 3299.8, 1769.1, null],[408, 8, 3307.8, 1769.1, null],[360, 0, 3307.8, 1769.1, null]
]);
var view = new google.visualization.DataView(data);
var options = {
title: 'sepsis treatment summary',
fontName: 'Lato',
titleTextStyle: {fontSize: 18},
annotation: {},
vAxis: {title: 'total fluids received (mL)', minValue: 0, gridlines: {count: 6}},
hAxis: {title: 'time after alert (minutes)', viewWindow: {min: 0, max: 360}, gridlines: {count: 6}},
seriesType: "bars",
series: {
1: {color: '#99CCFF', type: "area"},
2: {color: 'red', type: "line", lineDashStyle: [10, 2]},
3: {role: "annotation"}
},
annotations: {style: 'line'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
This code creates the following chart:
The API calculates a maximum width for each bar group that is roughly:
var chartWidth, // chart area width in pixels
axisRange, // axis max value - axis min value
data, // DataTable, assume axis values are in column 0 for this exercise, and that data is sorted ascending
minSeparation = axisRange, // will hold the minimum separation between daat points
barGroupWidth;
// calculate the minimum distance between any two adjacent points
for (var i = 1; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 0) - data.getValue(i - 1, 0) < minSeparation) {
minSeparation = data.getValue(i, 0) - data.getValue(i - 1, 0);
}
}
// calculate the maximum width of a bar group
barGroupWidth = chartWidth * minSeparation / axisRange;
Pleaase note that this function is a rough approximation of what the API does based on what I was able to reverse engineer.
So, if you have a chart that has a chart area 300 pixels wide with an axis range of 100 and a minimum separation between adjacent points of 10, your maximum bar group width will be 30 pixels. If you try to set the bar group width above this value, your setting will be ignored.
In your case, you have adjacent points with a separation of 0 (rows 5 and 6, 7 and 8, 9 and 10, 11 and 12), which would result in a bar group width of 0 by my rough approximation. The actual algorithm is more generous, and is likely giving you 1 pixel wide groups. There is no setting you can change to make the bar groups wider, your only recourse is to change your data set to space the values out more. This may not be easy to do, but I would suggest starting by thinking about what it means to have two events at the same time with different values, and how you might be able to represent that differently.
I am using Liferay 6.1 and google pie chart in that.
For each colour of sector I am using the below code.
var options = {
chartArea : {
width : 300,
height : 135
},
height : 165,
margin : 10,
colors : [ '#C1D558', '#22297A', '#C21536', '#996ab2' ],
is3D : false
};
But the problem is that if there are changes in the data, the colour for each sector changes randomly. I wanted to fix the colour for each sector permanently which don't depend on data or their entry.
If someone else is looking for this answer just take a look a the documentation.
Look at the slice part you can do it like
slices: [{color: 'black', {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}