I am trying to create a date based data serial type chart, strongly based in example "Date Based Data" available in amChart's website. The code is almost the same except that I'm replacing dataProvider variable names and date format.
The problem is that it's throwing jQuery error:
Uncaught TypeError: Cannot read property 'replace' of undefined
at Object.d.formatDate (amcharts.js:397)
at b.dispatchTimeZoomEvent (serial.js:45)
at b.timeZoom (serial.js:36)
at b.zoom (serial.js:34)
at b.drawChart (serial.js:31)
at b.onDataUpdated (serial.js:25)
at b.initChart (serial.js:25)
at b.measureMargins (serial.js:7)
at b.onDataUpdated (serial.js:26)
at b.initChart (serial.js:25)
And so it's not rendering the graph.
Any idea in what I could be doing wrong? Here's a fiddle with the code: https://jsfiddle.net/qtzmq9z7/
var chartData = [{"regtime": "2016-12-06T09:16:17Z", "power": -0.4},
...
{"regtime": "2016-12-06T13:28:43Z", "power": -0.4}];
var chart1 = AmCharts.makeChart("general-chart", {
...
"dataDateFormat": "YYYY-MM-DDTHH:NN:SSZ",
"categoryField": "regtime",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod": "SS"
},
...
});
PS: It looks like there is some weird bug with jsfiddle and amCharts, causing the graph to increase its height infinitely, but that is not happening outside jsfiddle, so just ignore that problem.
minPeriod uses "ss" for seconds. Notice it has to be lower-cased.
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod": "ss"
}
Please check the updated example https://jsfiddle.net/qtzmq9z7/1/
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I have an AmChart that I want to appear in an md-dialog. It's passed a JSON dataProvider and yet nothing appears.
dialog.tmpl.html:
<md-dialog aria-label="Project Zone Chart">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Project Zone Chart</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<p><div id="projZoneChart" style="width: 100%; height: auto;"></div></p>
</md-dialog-content>
</md-dialog>
controller.js:
var projZoneChartOps = {
type: "serial",
valueAxes: [{
minorGridAlpha: 0.08,
minorGridEnabled: true,
position: "top",
gridAlpha: 0,
precision: 0
}],
startDuration: 1,
graphs: [{
type: "column",
fillAlphas: 1,
lineAlpha: 0,
valueField: "value",
colorField: "color",
lineAlpha: 0
}],
rotate: true,
categoryField: "metric",
categoryAxis: {
gridPosition: "start",
parseDates: false,
gridAlpha: 0
}
};
createChart($scope.chartdata, projZoneChartOps);
function createChart(chartData, chartOps){
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
However nothing appears in the dialog at all. Is there a problem with my chartOps?
Note: the chartData variable is a JSON object with two fields, startOfWeek (supposed to be the x-axis) and metric (supposed to be the y-axis)
There are a few issues/comments:
1) Why aren't you assigning the data to the chartOps object before calling makeChart?
chartOps.dataProvider = chartData;
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
This will actually make the chart start off with your data. The way you're doing it will require that you call validateData() on your chart object after manually setting the dataProvider, which is unnecessary overhead compared to including it directly in makeChart.
$scope.projZoneChart = AmCharts.makeChart("projZoneChart", chartOps);
$scope.projZoneChart.dataProvider = chartData;
$scope.projZoneChart.validateData(); //required if you're doing it this way but unneccessary overhead compared to simply including it inside of makeChart directly as you're essentially remaking the chart after you create it for the sake of rendering your data.
2) Make sure your *field properties match. startOfWeek isn't mentioned in your chart config at all, even though you're saying it's in your JSON data. Your valueField is set to "value" - you might want to set it to "startOfWeek" instead unless you're modifying your JSON object somewhere else.
3) Displaying charts inside a modal or other dynamic/hidden elements typically require that you call the chart object's invalidateSize method when the modal/tab/etc containing the chart is visible so that it will render correctly. You'll want to check for whatever event md-dialog offers to determine when it is visible before calling $scope.projZoneChart.invalidateSize().
Is there a way to implement new milestones via data feed from database? I checked the example below but couldn't figure out
https://www.amcharts.com/kbase/time-line-chart-date-based-milestones/
I use "dataLoader" to feed the values into graphs I can just create a new column in my table for the milestones question is how to update it?
The milestones in that example are guides, so they don't normally get updated in any process that modifies the chart's dataProvider. You can use the complete callback to create/update your chart guides:
AmCharts.makeChart("chartdiv", {
// ...
dataLoader: {
url: "...",
complete: function(chart) {
//add/modify guide objects through chart.valueAxes[0].guides or
//directly to the chart object through chart.guides
chart.valueAxes[0].guides = [{
"value": new Date(2016, 2, 5),
"label": "MILESTONE #1",
"position": "top",
"fontSize": 15,
"tickLength": 15
},
// .. etc
];
chart.validateData(); //redraw chart
}
},
// ...
});
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">
I need some help related with jqPlot pie-chart value. Using the following data-set:
['XX01',77.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]
and this jqPlot option script:
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
the result is not showing all the available values. see the snapshot.
Can somebody help me about this? Waiting for any solution here... thanks!
Thank you for the response, Nandu.
I just figured it out yesterday, there is plugin's option for the data label, it is called dataLabelThreshold - jqPlot documentation. By default the value is 3, which mean that for any value below 3 won't be displayed. So the solutions just as simple as define the new threshold.
See this FIDDLE
$.jqplot('pieChart', [[['XX01',7.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]]],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
});
I think it is due to your data.I changed the first data from 77.28 to 7.28.It works fine.