How can i set up my y axis to be in the range of 0 to 24
Here is the code i have.
j$.plot(j$("#placeholder"),[d1],{
xaxis:
{ mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
}
},
{yaxis: { min:0, max:24 } };
};
xaxis seemed to work but when i added y axis it doesnt work.
Apart from this
d1 holds the string which is sent from salesforce
for example d1 holds
[1294041600000,14.00],[1294041600000,14.50],[1294041600000,15.00],[1293955200000,12.00]
I am not able to view the graph, currently i am having the y axis showing only the range -1 to 1, i am assuming this could be the reason why i am not seeing the line.
thanks
Prady
The y axis problem was solved. Here is the code
j$.plot(j$("#placeholder"), [d1], {
xaxis:
{
mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
},
yaxis:
{
min:0, max: 24, tickSize: 5
}
});
Related
I have 10 points inn x-axis, ranging [-25,-20,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
Below is the code i tried with suggestedmin and suggestedmax but it didnt worked.
Please suggest some way to achieve this
export class CgChartComponent {
lineChartData: ChartDataSets[] = [
{ data: [3145000, 3430001, 1499998, 1700000, 3515340, 2480011], label: 'ABC', lineTension: 0, },
];
lineChartLabels: Label[] = ['-25','-20','-15', '-10', '0', '10', '20', '30','40','50' ];
lineChartOptions = {
responsive: true,
responsiveAnimationDuration: 30,
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
ticks: {
suggestedMin: -15,
suggestedMax: 40
}
}]
}
};
lineChartColors: Color[] = [
{
borderColor: 'black',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}
Try to use min and max instead of suggestedMin and suggestedMax as follows:
xAxes: [{
ticks: {
min: -15,
max: 40
}
}]
From Chart.js documentation
Axis Range Settings
The suggestedMax and suggestedMin settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
Tick Configuration
min: User defined minimum value for the scale, overrides minimum value from data.
max: User defined maximum value for the scale, overrides maximum value from data.
UPDATE
The problem is probably that the labels are strings but min and max are defined as numbers. This can be solved in two different ways.
Either you transform the labels into numbers or you define min and max as follows:
xAxes: [{
ticks: {
min: '-15',
max: '40'
}
}]
What am trying to achieve is to have y values of percentage such that it the percentage value of 100 shows high and not starts at 100
example
I have some data
data:[100, 100, 100 .....]
When i draw a high charts with
series: [{
name: 'Percentage Compliance',
data: data //the values of percentage
}]
Am getting a chart of the following
What i wanted it to have is have ranges and have the 100% line be at the top not at the bottom.So have a y axis with 0,10,20
,30% ... buit the line to draw at 100%
What else do i need to add.
just include min and max in your chart like
yAxis: {
max: 100,
min: 0
},
Define your yAxis:
yAxis: {
min: 0,
tickInterval: 10
}
I am trying to plot a line graph, using timestamps from the past 24 hours (plotting data for each 1 hour interval), to show a decreasing and increasing value in flot. When I set my minTickSize, min, and max values, the line no longer plots.
Complete code (also in this fiddle):
$(function () {
var d = [
[1443903422000, 4994],
[1443903429000, 4993],
[1443910918000, 4999]
];
var epochT = (new Date).getTime(); // time right now in js epoch
$.plot("#placeholder", [d], {
xaxis: {
mode: "time",
timeformat: "%I:%M",
minTickSize: [1, "hour"],
min: epochT - 2 * 86400000,
max: epochT,
timezone: "browser",
},
series: {
lines: {
show: true
},
points: {
show: true
},
},
grid: {
hoverable: true,
clickable: true,
},
});
});
Can anyone point me in the right direction to resolving this?
Yout timestamps are in seconds not microseconds like JavaScript needs it (see here in the documentation). Multiplying by thousand (and shifting the min value because it already cuts off the chart) leads to this updated fiddle version.
Changes to your code:
var d = [[1443903422000,4994], [1443903429000,4993], [1443910918000,4999]];
min: epochT - 2*86400000,
I want to have bar chart start from a specific time (1.Apr)
So I implemented this in below sample:
(jsFiddle) sample with axis right but can the bar disappear
With the code below
yAxis: {
type: 'datetime',
min:Date.UTC(2010, 3, 1)
},
yAxis actually start from 1.Apr, but I can not see the bar itself .
If I remark the min line as below
yAxis: {
type: 'datetime'
//min:Date.UTC(2010, 3, 1)
},
Now I can see the bar appear, but the yAxis default show from 1.Jan.
Can anyone help me make the bar visible and yAxis starting from 1.Apr ?
I think I found what you're searching.
There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :
yAxis: {
type: 'datetime',
min: Date.UTC(2010, 3, 1)
}
Hope it's what you're searching. Chears from a bear.
Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:
series: [{
name: 'UP',
color: 'lime',
data: [{
x: 1,
y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
// or:
// y: 1433120400000
// is the same as above use for Date.UTC()
}]
}]
Live demo: http://jsfiddle.net/v9582phy/4/
Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)
return moment(x).format('MMM/DD HH:mm:ss')
}
}
},
with series data as
series: [{
data: [{
status:'studying',
color: 'lime',
x: 1,
y: 5
}, {
status:'playing guitar',
color: 'yellow',
x: 2,
y: 10
}, {
status:'exam',
color: 'red',
x: 2,
y: 23
}]
}]
And I got stacked bar which each bar present how many minutes for lasting status
Live demo: http://jsfiddle.net/v9582phy/11/
How do I keep jqplot options for max, min and numberTicks when I use
plot1.replot({resetAxes: true });
I get shifted chart on the both sideof x axis. Example: chart x axis starts with 0, when I execute replot, my x axis starts with -40.
Here is the fix to your problem:
plot1.replot({
resetAxes:true,
axes: {
xaxis: {
show: true,
label: "Date/Time",
showLabel: false,
showTicks: true,
renderer:$.jqplot.CategoryAxisRenderer
},
yaxis: {
label: 'y1',
showLabel: false,
tickInterval: y1AxisInterval,
min: minYaxis,
max: maxYaxis
}
}
});
Here you can specify your old max and min values, when you replot.