Develop Reference

Adding Custom Point on the X axis- Kendo UI - javascript

I have the following project and only missing piece that I could not able to figure out that to add 0 on the X axis. The interval is 2000, therefore it is skipping 0 in the middle of X axis, which is start point.
xAxis: {
min: -5000
, axisCrossingValue: [-5000, 0],
labels: {
template: kendo.template($("#labelTemplate").html())
},
}
, yAxis: {
reverse: true
, labels: {
format: "{0}"
}
}
http://jsfiddle.net/3yhbyy2g/37/

Add majorUnit:1000 to the xAxis
xAxis: {
majorUnit:1000, //<-add here
min: -5000
, axisCrossingValue: [-5000, 0],
labels: {
template: kendo.template($("#labelTemplate").html())
},
}
, yAxis: {
reverse: true
, labels: {
format: "{0}"
}
}

Related

please take a look at this jsfiddle first
jsfiddle example of sparkline
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
i try to use the concept of having those sparkline between table tags and achieve a chart with more than 2 column on left and right , however instead of sparkline i need bar chart like a picture below
please help me on this problem ...
Update :
thanks to ppotaczek and his suggestion on changing to bar type i had another problem on the way
updated jsfiddle with bar type
well now i don't know how to make every row to adopt xrow size of 115 . at this moment all bar chart draw the entire cell but 20 from 115 must have different view via 71 from 115 ...
any suggestion to how to put 0 to 115 on the top of the table and adjust the bar charts with that ?

You need to change chart.type to 'bar' and adapt data in the HTML table.
chart: {
type: 'bar',
...
}
Live demo: https://jsfiddle.net/BlackLabel/cyuvws37/
API Reference: https://api.highcharts.com/highcharts/chart.type

I'm using this data:
{
label: 'Payments',
// data: this.getFlotPaymentData(),
data: [
[Moment().subtract(6, 'days').valueOf(), 0],
[Moment().subtract(5, 'days').valueOf(), 0],
[Moment().subtract(4, 'days').valueOf(), 0],
[Moment().subtract(3, 'days').valueOf(), 0],
[Moment().subtract(2, 'days').valueOf(), 168.50],
[Moment().subtract(1, 'days').valueOf(), 200.00],
[Moment().valueOf(), 200.00]
],
last: false
}
and for some reason, my graph goes into negative values. I'm expecting it to be zero until 2 days ago then suddenly jump to 168.50.
I don't want to set the min value of the graph to 0 because I have another data set being introduced which goes into negative values (expenses).
It's producing this:
I'm initialising flot like so:
// Chart options
var chart = $('#flot-visitors')
var labelColor = chart.css('color')
var options = {
colors: chart.data('color').split(','),
series: {
shadowSize: 0,
lines: {
show: true,
lineWidth: false,
fill: true
},
curvedLines: {
apply: true,
active: true,
monotonicFit: false
}
},
legend: {
container: $('#flot-visitors-legend')
},
xaxis: {
mode: 'time',
timeformat: '%d %b',
font: {color: labelColor}
},
yaxis: {
font: {color: labelColor}
},
grid: {
borderWidth: 0,
color: labelColor,
hoverable: true
}
}
chart.width('100%')
// Create chart
$.plot(chart, data, options)

According to Documentation, you could set
monotonicFit: true
parameter type effect
------------ ---- -----------------------------------------------------------------
monotonicFit bool true => uses monotone cubic interpolation (preserve monotonicity)

I have used highchart to plot chart. In which x axis has date time and y axis has numbers. but the problem is that last label on x-axis is not coming. So if you can help please help me to do it.
if i use endontick and show last label it adds 00:00:04 in end
Here is the link to jsfiddle of same code is like a 4k line code
https://goo.gl/bbwZRC
<script>
$(function () {
$('#trend1307').highcharts({
chart:{
defaultSeriesType: 'line',
events: {
load: function () {
var car = this;
$(car.series).each(function (i, serie) {
$('<li><span style="background-color: ' + serie.color + ';"></span>' + serie.name + '</li>').click(function () {
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend1307');
});
}
}
},
legend: {
enabled: false
},
title:false,
borderWidth: 1,
xAxis: {
type:'time',
title: {
text: 'Time (HH:MM:SS)'
},
categories: [ Date.UTC(2016,01,25,21,00,00)
, Date.UTC(2016,01,25,21,05,00)
, Date.UTC(2016,01,25,21,10,00)
, Date.UTC(2016,01,25,21,15,00)
, Date.UTC(2016,01,25,21,20,00)
, Date.UTC(2016,01,25,21,25,00)
, Date.UTC(2016,01,25,21,30,00)
, Date.UTC(2016,01,26,19,05,00)
, Date.UTC(2016,01,26,19,10,00)
, Date.UTC(2016,01,26,19,15,00)
, Date.UTC(2016,01,26,19,20,00)
, Date.UTC(2016,01,26,19,25,00)
, Date.UTC(2016,01,26,19,30,00)
, Date.UTC(2016,01,26,19,35,00)
, Date.UTC(2016,01,26,19,40,00)
, Date.UTC(2016,01,26,19,45,00)
, Date.UTC(2016,01,26,19,50,00)
, Date.UTC(2016,01,26,19,55,00)
, Date.UTC(2016,01,26,20,00,00)
, Date.UTC(2016,01,26,20,05,00)
, Date.UTC(2016,01,26,20,10,00)
, Date.UTC(2016,01,26,20,15,00)
, Date.UTC(2016,01,26,20,20,00)
, Date.UTC(2016,01,26,20,25,00)
, Date.UTC(2016,01,26,20,30,00)
, Date.UTC(2016,01,26,20,35,00)
, Date.UTC(2016,01,26,20,40,00)
, Date.UTC(2016,01,26,20,45,00)
, Date.UTC(2016,01,26,20,50,00)
, Date.UTC(2016,01,26,20,55,00)
, Date.UTC(2016,01,26,21,00,00)
],
type: 'datetime',
showLastLabel:true,
labels: {
format: '{value:%H:%M:%S}',
rotation: - 90,
style: {
fontSize: '9px',
color:"black"
}
},
},
yAxis: {
plotLines: [ , {
value: 25,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum Temperature 25°C',
style: {
fontSize: '9px',
color:"black"
}
},
zIndex: 3
}],
max:26,
labels: {
format: '{value:.1f}'
},
tickInterval: 1,
title: {
text: 'Temperature (°C)'
},
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'T-464',
lineWidth:.75,
data: [
19.3,19.6,19.4,19.2,19.4,19.5,19.3,19.3,19.3,19.2,19.5,19.5,19.4,19.1,18.8,18.6,19,18.8,18.7,18.6,18.7,18.6,18.6,18.5,18.4,18.4,18.5,18.4,18.4,18.3,18.2,18.2,18.3,18.4,18.2,18.1,18.1,18.2,18.2,18,18,18.1,18.2,18.3,18.2,18.1,18.1,17.9,18,18.3,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.4,18.4,18.4,18.4,18.1,18.1,18.2,18.2,18.4,18.6,18.4,18.4,18.7,18.7,18.6,18.6,18.6,18.5,18.4,18.5,18.6,18.5,18.6,18.4,18.5,18.6,18.6,18.5,18.6,18.4,18.4,18.3,18.4,18.5,18.5,18.5,18.4,18.5,18.4,18.3,18.2,18.2,18.2,18.3,18.4,18.4,18.3,18.2,18.4,18.4,18.2,18.1,18.1,18.3,18.4,18,18.1,17.8,18,17.8,18,17.8,17.9,17.9,18,17.7,18,17.8,17.9,17.8,18.1,18,17.8,18,17.8,18.1,17.9,17.8,17.7,17.8,17.5,17.8,17.8,17.7,17.7,17.9,17.8,17.7,17.9,17.6,17.9,17.6,17.9,17.7,17.9,17.8,17.6,17.8,17.8,17.8,18,18,17.9,18.1,18.3,18.2,18.1,18.1,18.4,18.2,18.1,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.1,18.1,18.2,18.4,18.3,18.2,18.2,18.1,18,18.1,18,18.1,18.3,18.3,18.2,18.1,18.1,18.1,17.9,18,18.1,18,18,18,18,18.1,18.1,18,18,17.9,18,18.1,18.3,18.3,18.2,18.3,18.1,18,18,18.1,18.1,18.1,18.1,18.5,18.3,18.3,18.3,18.2,18.1,17.9,18,18,18.1,18.4,18.3,18.3,18,18,17.9,17.8,17.9,17.8,17.8,18.1,17.9,17.8,17.6,17.9,17.8,17.8,17.8,17.8,17.7,17.8,17.8,17.8,17.9,17.8,17.6,17.7,17.9,17.8,17.7,17.6,17.6,17.7,17.7,17.7,17.6,17.6,17.6,17.7,17.6,17.5,17.8,17.7,17.8,17.8,17.9,18.1,17.7,17.7,17.8,17.9,17.8,17.5,17.8,17.7,17.9,17.7 ],
}
, {
name: 'T-2306',
lineWidth:.75,
data: [
21.1,21.3,21.2,20.9,21.2,21.2,21,20.9,20.8,20.7,21,20.8,20.5,20.1,19.8,19.5,19.8,19.6,19.5,19.5,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.2,19.2,19.1,19.1,19.1,19.1,19.1,19,18.9,19,19.1,19,18.8,18.9,18.9,18.9,19.1,19.2,19.3,19.3,19.4,19.6,19.8,19.7,19.9,20.1,20.2,20.3,20.3,20.3,20.2,20.2,20.3,20.2,20.2,20.2,19.9,19.9,20.1,20.1,20.2,20.3,20.2,20.2,20.4,20.3,20.2,20.3,20.3,20.2,20.2,20.6,20.4,20.3,20.4,20.3,20.4,20.4,20.4,20.4,20.4,20.3,20.3,20.2,20.4,20.4,20.4,20.4,20.3,20.5,20.3,20.2,20.2,20.1,20.2,20.2,20.3,20.2,20.2,20.2,20.3,20.2,19.9,19.8,19.8,19.8,19.8,19.3,19.1,18.9,18.9,18.8,18.8,18.7,18.7,18.8,18.8,18.6,18.8,18.6,18.8,18.5,18.8,18.7,18.7,18.8,18.6,18.8,18.7,18.6,18.5,18.4,18.2,18.4,18.4,18.4,18.4,18.4,18.4,18.4,18.6,18.3,18.6,18.3,18.5,18.4,18.6,18.4,18.4,18.4,18.4,18.6,18.9,18.9,19,19.4,19.6,19.5,19.4,19.4,19.7,19.5,19.6,19.6,19.8,19.8,19.9,19.9,19.9,19.8,19.8,19.9,19.8,19.8,19.9,20,20.1,19.9,19.9,19.8,19.8,19.9,19.8,19.8,20,20,20,19.8,19.7,19.8,19.6,19.7,19.7,19.6,19.6,19.7,19.7,19.8,19.9,19.8,19.8,19.7,19.7,19.8,19.9,20,19.9,19.9,19.8,19.7,19.5,19.5,19.3,18.8,18.7,18.9,18.7,18.6,18.6,18.6,18.5,18.4,18.4,18.4,18.6,18.8,18.7,18.8,18.4,18.4,18.4,18.4,18.4,18.3,18.3,18.4,18.3,18.3,18.2,18.3,18.3,18.3,18.2,18.3,18.2,18.2,18.3,18.3,18.3,18.2,18.2,18.2,18.3,18.2,18.2,18.1,18.1,18.2,18.1,18.1,18.1,18.1,18.2,18.2,18,18.1,18.3,18.2,18.3,18.2,18.3,18.6,18.1,18.2,18.3,18.4,18.2,18,18.3,18.2,18.4,18.3 ],
}
, {
name: 'T-2282',
lineWidth:.75,
data: [
7.3,17.1,17.1,17.3,17.2,17.3,17.3,17.4,17.4,17.4,17.5,17.3,17.4,17.6,17.6,17.7,17.6,17.6,17.8,17.6,17.7,17.8,17.7,17.7,17.6,17.7,17.7,17.9,17.8,17.8,17.8,17.8,17.8,17.8,17.8,17.7,17.8,17.7,17.7,17.8,17.8,17.7,17.8,17.9,18.6,18.4,18.4,18.4,18.4,18.3,18.2,18.4,18.4,18.6,18.9,18.8,18.9,18.5,18.6,18.4,18.4,18.4,18.3,18.4,18.7,18.6,18.5,18.2,18.5,18.4,18.3,18.4,18.4,18.2,18.4,18.6,18.5,18.5,18.3,18.4,18.4,18.6,18.4,18.4,18.3,18.3,18.2,18.3,18.3,18.2,18.1,18.2,18.3,18,17.8,18.1,17.9,18,17.9,17.9,18.3,17.7,17.8,18,18.2,17.9,17.5,17.9,17.8,18.1,17.9 ],
}
, {
name: 'T-2089',
lineWidth:.75,
data: [
19.6,19.6,19.7,19.5,19.7,19.6,19.6,19.5,19.4,19.5,19.7,19.6,19.3,19.2,19,18.7,18.9,18.8,18.7,18.7,18.7,18.7,18.6,18.5,18.6,18.5,18.5,18.4,18.4,18.3,18.4,18.3,18.4,18.4,18.3,18.2,18.2,18.2,18.1,17.9,18,18.1,18.1,18.2,18.1,17.9,17.9,17.8,17.8,17.8,17.7,17.7,17.7,17.7,17.8,17.8,17.8,17.7,17.7,17.8,17.8,17.7,17.7,17.5,17.6,17.6,17.6,17.6,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.6,17.6,17.7,17.5,17.4,17.4,17.3,17.4,17.4,17.5,17.5,17.4,17.4,17.4,17.3,17.4,17.5,17.4,17.5,17.5,17.6,17.4,17.4,17.4,17.5,17.5,17.5,17.6,17.6,17.6,17.6,17.6,17.6,17.4,17.4,17.5,17.5,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.8,17.8,17.6,17.7,17.7,17.8,17.6,18,17.9,17.8,17.9,17.7,18.1,18,17.9,17.9,17.8,17.6,17.7,17.9,17.9,17.9,17.9,17.8,17.8,17.9,17.7,17.9,17.7,17.9,17.8,17.9,17.8,17.8,17.9,17.8,17.9,17.8,17.7,17.6,17.7,17.7,17.6,17.5,17.5,17.7,17.6,17.6,17.7,17.7,17.7,17.7,17.7,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.8,17.9,17.9,18.1,18.2,18.3,18.2,18.3,18.4,18.5,18.5,18.4,18.4,18.6,18.4,18.5,18.6,18.5,18.5,18.4,18.4,18.5,18.7,18.8,18.8,18.7,18.8,18.8,18.8,18.8,18.8,18.8,18.8,18.9,19,18.9,18.9,19.1,19.2,19.5,19.4,19.4,19.4,19.5,19.4,19.3,19.3,19.2,19.4,19.6,19.6,19.7,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.4,19.3,19.3,19.1,19.1,19.1,19,19.1,19.3,19.1,19.2,19.3,19.2,19.1,19.1,19.1,19.1,19.2,19.1,19.1,19.1,19,19,19,18.9,18.8,18.8,18.8,18.8,18.6,18.4,18.4,18.3,18.4,18.2,18.3,18.5,18.2,18.2,18.2,18.4,18.2,17.9,18.1,18.1,18.2,18.3 ],
}
],
plotOptions:{
line:{
marker:{
enabled : false
}
}
},
legend:{
enabled:false
}
});
});</script>

Don't use categories. In your case:
Set xAxis.type to datetime (not type: 'time'!). Remove categories, or at least replace categories with tickPositions.
If you have regular interval between points, use series.pointStart and series.pointInterval (or pointIntervalUnit). If your data may be irregular, then change your data format. Currently you have data: [value, value, value]. Instead use data: [ [timestamp, value], [timestamp, value], [timestamp, value] ]
Add xAxis.tickInterval option - for example 3600 * 1000, to determine where ticks should appear.
Add xAxis.maxPadding = 0 option - so last tick won't exceed extremes.
That's all. Example with regular interval between points: https://jsfiddle.net/txuhs36t/2/

I am expecting pretty weird problem with flot v.0.7. I have multiple axes, configured like that:
var plotData = [
{ data: data1 },
{ data: data2, yaxis: 2 }];
var options = {
selection: { mode: "x" },
xaxis: { mode: "time" },
yaxis: [
{ min: 0 },
{
min: 0,
position: "right",
zoomRange: false,
alignTicksWithAxis: 1,
tickFormatter: formatter,
}
],
grid: { markings: weekendAreas },
zoom: { interactive: true },
grid: {
clickable: true,
hoverable: true,
borderWidth: 1,
},
legend: { show: false },
};
var plot = $jq.plot(container, plotData, options);
But what I get is that both Y series are located on the right (not only second Y series). There is no formatter for my second series tick. Y values can be less then zero, if zooming. If I don't use array type for yaxis and define it as it would only be one series, then everything works fine. What am I doing wrong?

Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.

i'm trying to display a date field in flot:
Data:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230],
];
Flot creation:
$.plot($("#graph"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y"
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});
According to this site http://tools.semsym.com/index.php?tool=timestamp&timestamp=1309150800 the timestamp is Jun 26, 2011 10:00:00 PM.
But the graph looks like: http://i.stack.imgur.com/NUayx.png
The dots are a bit off. The first one should be at 26, but is at 25,5. I played a bit with timestamp formatting but wasn't able to get it to the specific point.
What am i missing?
Also it shows "26.06.2011" about 6 times. What config is needed to keep it at 1?

Make sure you set a minTickSize. Here is an example at http://jsfiddle.net/hAXHq/ where I have set minTickSize to 1 day and set the min/max values explicitly. You should be able to set your own min/max programmatically depending on your data.
Here is the code:
var data = [
[parseInt(1309150800.0)*1000, 220],
[parseInt(1309064400.0)*1000, 230]
];
$.plot($("#placeholder"), [ data ], {
grid: {
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d.%m.%y",
minTickSize: [1,"day"],
min: (new Date(2011,5,25)).getTime(),
max: (new Date(2011, 5, 28)).getTime()
},
yaxis: {
mode: "number",
tickSize: 2
},
series: {
lines: { show: true },
points: { show: true }
}
});