Flot library setting up y axis to min 0 and max 24 - javascript

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,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?

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'
}
}]

Highcharts set the default y column values

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
}

Flot time series not drawing line

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,

How to make yAxis start from a specific time with bar series in highchart?

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/

Keep jqplot settings on replot() chart

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.

Categories

Resources