I have a water monitoring system, which reports tank level and usage values every minute. I have a mobile app that displays the data, but I want to surface the info on a general web page so the people in the house will see it..
but, a 3 day view is over 4000 data points.. level data range values are from 1750 to 2029 (and I see those on the y axis as top and bottom)
right now I get a straight line (from start of array to end) for both usage and level data items..
var myChart = new Chart(canvas, {
type: 'line',
showLine: true,
data: {
datasets: [
{
xAxisID: 'dates',
data: self.data[self.config.Pins[1]],
fill:true,
borderColor: '#2196f3', // Add custom color border (Line)
backgroundColor: '#2196f3',
//borderWidth: 1,// Specify bar
}
]
},
options: {
legend: { display: false, },
responsive: true,
elements: {
line: {
tension: 0, // disables bezier curves
}
},
scales: {
xAxes: [{
id: 'dates',
type: 'time',
distribution: 'linear',
scaleLabel: {
display: true,
labelString: 'Water Usage, gallons'
},
time: {
unit: 'minute'
},
bounds: 'data',
ticks: {
display: false ,
maxRotation: 90,
source: 'data',
maxTicksLimit: self.data[self.config.Pins[1]].length, },
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'used'
},
ticks: {
beginAtZero: true,
source: 'data',
min: 0,
//max: self.data[self.config.Pins[1]].length,
},
}]
},
}
});
any guidance welcomed
the x and y axis are displayed with the right labels,
the Y axis has the right number scale from the data
the chart shows the MAX value of the Y axis in the upper left (411.0000)
on the right, same height, is a dot, which displays date/time.
the right edge of the graph, also shows different date/time values...
as if the top edge is drawn on the right...
but the right edge is a STACK of all the values, low to high, where their timestamps are ignored.. all drawn on the right edge.. as if step drew the 1st point in the left edge, then the next point on the right edge, and then there was no more room, so kept drawing points at the rightmost edge.
this turned out to be a data bug.. one element in the array was not Time Cartesian (date & value), just a point(value)... charting got confused as to what to do...
Related
I have a scatter plot as shown below with code. How do I make the title area not take up this much space? Just to be clear, I don't mean the font size of the title, but the empty space the title area occupies.
var rstTrace = {
x: x_data,
y: y_data,
mode: 'markers',
type: 'scatter',
marker: {
size: 3,
color: chartMarkerColor
}
};
var rstLayout = {
height: 400,
title: {
text: 'My Title',
font: {
family: 'Tahoma',
size: 15
}
},
xaxis: {
showline: true,
zeroline: false,
linecolor: '#D3D3D3', // light gray
tickcolor: '#D3D3D3'
},
yaxis: {
showline: true,
zeroline: false,
linecolor: '#D3D3D3',
tickcolor: '#D3D3D3'
},
backgroundcolor: '#D3D3D3'
};
Plotly.newPlot('resultDiv', [rstTrace], rstLayout);
You can change the graph's top margin
https://plot.ly/javascript/setting-graph-size/#adjusting-height-width-and-margins
Example
var rstLayout = {
margin:{
t: 10
}
};
The top margin however accounts for all the space above the chart, so if you wish to move the title up or down so that it isn't centered, you could also use this workaround:
document.querySelector('.gtitle').setAttribute('y', 100)
The position of the text element is controlled by the attributes x and y. You can change y to whatever value you see fit to move the title down. Note that you'd need to make sure this runs after the svg is loaded in the page.
I have a bar chart where the first three series represent the expenses and the last series represent the revenue. I want to show the profit or loss for each month in percentage. Below is the image of current graph.
Here is my code for the same.
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I want it to show the profit or loss as shown below
I'm trying to achieve this by three different approaches.
1) First approach is with pointLabels. With pointLabel I have to use 'stackedValue:true' which does not give me individual value of the series in a stack. Secondly, the position of the pointLabel is above the stacked bar and not above the group.
2) Second approach is to add a trendline. But the problem is y-axis values are in absolute number and the values of the trendline will be in percentage. Is it possible to show the percentage series in the same chart ?
2) Third approach is to calculate the % profit or loss for each month and then display it by inserting a div into the graph for each month. Sounds tricky but is it feasible ?
Any different approach from your side most welcome.
I am trying to have a live graph of bitcoins that can be running long term with two datasets buy and sell using HighStocks the problem is the data is all live so the graph starts with no data and gets an update every 30 seconds and in those conditions HighStocks doesn't always seem to play nice
I have created a demo which is very close to the final code http://jsfiddle.net/v3z6T/2/! the increment is set to 1 second to speed up the demo, also if you change adaptToUpdatedData to true this has significant lag effects until the lowest navigator interval is exceeded (30s) so be careful
I want the navigator area to work but if i leave it updating with adaptToUpdatedData : true
The graph is very laggy after a short time and I can't leave it running for hours without the whole browser starting to not respond and getting script delay errors
This is strange to me as running for example 8 hours at 30second increments is only 960 data points, not enough to use as much processing and memory as it seems to
If adaptToUpdatedData is false the graph is much faster and the updates stream in ok until one of the navigation buttons is used then the graph is no longer 'live' as the new updates are out of scope, also the navigator starts at 1970 rather than the start of the series data
Does anyone know a way to trigger a navigator refresh or something I can call when I add a new data point that will keep the navigator area updated and keep the graph at the latest data entry point and not stop the page from rendering in a timely fashion? or a better way of using the api or data
Hope that makes sense
The whole idea of this graph is to be kept running for days possibly weeks to get a live view of the data as its progressing and I cant use the handling large datasets example code from HighStocks as the data is all live, not to mention I am not really working with large datasets anyway just constant slow updates
$(function()
{
var curTime = $.now();
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartContainer',
zoomType: 'x',
turboThreshold:100,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30S'
},{
count: 5,
type: 'minute',
text: '5M'
},{
count: 30,
type: 'minute',
text: '30M'
},{
count: 60,
type: 'minute',
text: '1H'
},{
count: 360,
type: 'minute',
text: '6H'
},{
count: 720,
type: 'minute',
text: '12H'
},{
count: 1,
type: 'day',
text: '1D'
},{
type: 'all',
text: 'All'
}],
inputEnabled: false
},
scrollbar: {
liveRedraw: false
},
title : {
text : 'Live Bitcoin Data'
},
exporting: {
enabled: true
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
},
navigator : {
adaptToUpdatedData: false
},
yAxis: {
title: {
text: 'Price'
}
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'Sell',
color: '#00FF00',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
},{
name: 'Buy',
color: '#FF00FF',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
}]
});
setInterval(function() {
var chart = $('#chartContainer').highcharts();
var exchangeSellRate = Math.floor(Math.random()*30)+40;
var exchangeBuyRate = Math.floor(Math.random()*30)+40;
var x = $.now();
chart.series[0].addPoint([x,exchangeSellRate],false,false);
chart.series[1].addPoint([x,exchangeBuyRate],true,false);
}, 1000);
});
Hi I'm using jqplot and is there a way to shorten the tick labels on numeric axis. Suppose there is a y series like this [100,250,125000000,14000000,300,..]. here according to the biggest values axis is scaled and rendered with large tick values. I want to simplify this ticks to millions or billions rendered with mill or bill with the axis. Any ideas?
Thanks in advance.
I use this on my initialization, pay attention at the "formatString" option, ".2F" means that the number (a float) will be rounded after the 2nd decimal (####.##), it's just a matter of finding the right format string you need.
Plot = $j.jqplot('divPerformancePlot',[Data],{
title: Title,
axes: {
xaxis: {
renderer: $j.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d, %T'
},
numberTicks: 4
},
yaxis: {
tickOptions: {
formatString: '%.2f '
}
}
},
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
cursor: {
show: true,
zoom: true
}
});
I wanna use a chart in my new ExtJS4 application.
The axes render just fine, and I get a line, too; but it does not make any sense. Here's a screenshot of my problem:
So as you can see, I got the axes just fine and the data left of the chart should be drawn; but obviously, it doesn't really do what I expected ;-)
I tried to hardcode the data, so here's my store:
Ext.define('MR.store.ResultChartStore', {
extend: 'Ext.data.Store',
model: 'MR.model.ResultPoint',
data: [
{rings: 400, date: new Date(1970, 1, 1)},
{rings: 398, date: new Date(1970, 1, 2)},
{rings: 275, date: new Date(1970, 1, 3)}
]
});
The referenced model looks like this:
Ext.define('MR.model.ResultPoint', {
extend: 'Ext.data.Model',
fields: ['rings', 'date']
});
And finally my chart looks like this:
{
xtype: 'chart',
width: 600,
height: 300,
theme: 'Green',
store: 'ResultChartStore',
axes: [
{
title: 'Ringe',
type: 'Numeric',
position: 'left',
fields: ['rings'],
minimum: 0,
maximum: 400
},
{
title: 'Datum',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd.m.Y'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'rings'
}
]
}
Can anybody spot my mistake? I just can't seem to find it, in my eyes it looks just like the examples in the docs ...
Greetz and thanks in advance
gilaras
-------------------------------------UPDATE---------------------------------------
I guess I know where the problem is, but I don't know how to solve it :-/
When I add more data to the store, the chart looks like this:
So the problem seems to be that Ext does not "know" how to connect my points...
In my opinion it finds a point, draws a line through it and repeats it for every point specified in my store.
My chart looks like this now:
{
xtype: 'chart',
width: 600,
height: 300,
theme: 'Base',
store: 'ResultChartStore',
axes: [
{
title: 'Ringe',
type: 'Numeric',
position: 'left',
fields: ['rings'],
minimum: 0,
maximum: 400,
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
title: 'Datum',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'rings',
highlight: {
size: 7,
radius: 7
},
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
}
Anyone got an idea what I may be doing wrong?
First, you're missing an important configuration in your series. The axis config binds the points in your store to the axes on the chart. The Sencha documentation on this config is misleading, however; Sencha says the config takes a string when in fact it takes either a string or an array of strings. In your case, use axis: ['left', 'bottom'].
Second (and I'm less sure about this), you might try using the fully qualified store name in your chart config. So, 'MR.store.ResultChartStore' instead of just 'ResultChartStore'. Although you appear to be getting the points just fine, I wouldn't be surprised if there was some sort of side-effect.
Third, the Time axis can be a bit buggy. If you're having trouble with it, try setting it to Category and converting the date to a string. The referenced question above does state that Category axes are bugged too, but I've personally not experienced any problems with them.