Amchart x-axis date format - amcharts

I have a amchart with two different categories, i get the date from mysql database in "YYYY-MM-DD HH:MM:SS" format. My Problemist that the date is not displayed correct on my chart.
<script type="text/javascript">
var chart;
var graph;
var chartData4 = [
{"year":"2014-11-05 21:16:37", "v1":7.3, "v2":99.9},
{"year":"2014-11-05 21:17:36", "v1":7.3, "v2":99.9},
{"year":"2014-11-05 21:18:07", "v1":7.3, "v2":99.9},
{"year":"2014-11-05 21:30:01", "v1":7.3, "v2":99.9},
{"year":"2014-11-05 21:45:02", "v1":7.2, "v2":99.9},
{"year":"2014-11-05 22:00:01", "v1":7.2, "v2":99.9},
{"year":"2014-11-05 22:15:01", "v1":7.1, "v2":99.9},
{"year":"2014-11-05 22:30:02", "v1":7.1, "v2":99.9},
{"year":"2014-11-05 22:45:02", "v1":7.1, "v2":99.9},
{"year":"2014-11-05 23:00:02", "v1":7.1, "v2":99.9},
......
{"year":"2014-11-07 19:45:02", "v1":5.5, "v2":96.3},
{"year":"2014-11-07 20:00:02", "v1":5.5, "v2":96.3},
{"year":"2014-11-07 20:15:02", "v1":5.5, "v2":97.1},
{"year":"2014-11-07 20:30:02", "v1":5.5, "v2":96.9}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://allopensensors.com/amcharts/images/";
chart.dataProvider = chartData4;
chart.marginLeft = 10;
chart.categoryField = "year";
chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "ss";
categoryAxis.dashLength = 3;
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.1;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.id = "ax1";
valueAxis.axisAlpha = 0;
valueAxis.inside = true;
valueAxis.dashLength = 3;
valueAxis.position = "right";
valueAxis.title="Temperature in degree celsius" ;
chart.addValueAxis(valueAxis);
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.id = "ax2";
valueAxis2.axisAlpha = 0;
valueAxis2.inside = true;
valueAxis2.dashLength = 3;
valueAxis2.baseValue = -20;
valueAxis2.position = "left";
valueAxis2.title="Humidity in %";
chart.addValueAxis(valueAxis2);
// GRAPH
graph = new AmCharts.AmGraph();
graph.label="Temperature";
graph.valueaxis = "ax1";
graph.type = "smoothedLine";
graph.lineColor = "#d16fff";
graph.negativeLineColor = "#637bb6";
graph.bullet = "square";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.valueField = "v1";
graph.title = "title v1";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph);
graph2 = new AmCharts.AmGraph();
graph2.valueAxis = "ax2";
graph2.type = "smoothedLine";
graph2.lineColor = "#d1655d";
graph2.negativeLineColor = "#637bb6";
graph2.bullet = "round";
graph2.bulletSize = 8;
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.valueField = "v2";
graph2.title = "title v2";
graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]] </span></b>";
graph2.label="TESSST";
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv4");
});
</script>
See it here: http://allopensensors.com/author/andreas , the third chart,

On the other charts you have the line categoryAxis.parseDates = true; commented out, on the third chart is isn't. This will provide you with the axis to match the others.
As you have time data then the charts do look better in my opinion with the axis as they are in chart 3. I would personally remove the comment from the other charts to match this one.

Related

I have a google script that creates QR codes and Barcode. the QR Codes show up twice. Once where its suppose to and then at the end of the document

The code below generates a label that has a QR Code and barcode. Currently I am trying to get both to work. They both show up in the label but when it does the QR code will be added in the correct spot but also will add extra qr codes on the last label generated. The two qr codes at the end are itemnum qr codes and they are not suppose to be there. It normally puts them ontop of each other i moved them so people could see. The barcodes generate just fine but they don't scan
TEST SCRIPT here is a link to test it.. This is a test script and not part of a business so its easy to do. Basically what needs done is click on My Custom Menu and select reset labels. Once the labels are created you can go to the labels tab and select a few labels with serial numbers then go back to the menu and select create labels for selected items.
//####################################### Create Zebra Label #########################
function createZebraLabel(monthlySheet, newSheetName) {
var parentFolder = DriveApp.getFolderById('1mUPLw1PSi-guH19uJPCPWmogkpdckLcW');
var createdoc = DocumentApp.create('Zebra Label').getId();
doc = DocumentApp.openById(createdoc);
var id = createdoc;
var docFile = DriveApp.getFileById(doc.getId());
var target = parentFolder;
var file1 = DriveApp.getFileById(id);
var mkfile1 = file1.makeCopy(newSheetName, target).getId();
doc = DocumentApp.openById(mkfile1);
docFile.setTrashed(true);
//325
var body = doc.getBody().setPageWidth(325).setPageHeight(180).setMarginTop(.2).setMarginBottom(.2);
// var body = doc.getBody().setPageWidth(144).setPageHeight(144).setMarginTop(.2).setMarginBottom(.2);
var sourceSpreadSheet = SpreadsheetApp.openById(monthlySheet);
var ss = sourceSpreadSheet.getSheetByName('Sheet1');
var startRow = 1; // First row of data to process
var numRows = 250; // Number of rows to process
var startColumn = 1; // A=1 B=2
var numColumns = 5; // Number of columns to process
var dataRange = ss.getRange(startRow, startColumn, numRows, numColumns);
var data = dataRange.getValues();
for (var i = 1; i < data.length; ++i) {
var row = data[i];
var actualrow = i;
var itemnum = row[0]; // A column
var desc = row[1]; // B column
var serial = row[2]; // D column
var bin = row[3]; // D column
var qty = row[4];
var styleLeft = {};
styleLeft[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.LEFT;
styleLeft[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleLeft[DocumentApp.Attribute.FONT_SIZE] = 14;
styleLeft[DocumentApp.Attribute.BOLD] = true;
var styleRight = {};
styleRight[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
styleRight[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleRight[DocumentApp.Attribute.FONT_SIZE] = 14;
styleRight[DocumentApp.Attribute.BOLD] = true;
var itemBarcode = {};
itemBarcode[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.LEFT;
itemBarcode[DocumentApp.Attribute.FONT_FAMILY] = 'Libre Barcode 39 Extended Text';
itemBarcode[DocumentApp.Attribute.FONT_SIZE] = 25;
itemBarcode[DocumentApp.Attribute.BOLD] = false;
var serialBarcode = {};
serialBarcode[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
serialBarcode[DocumentApp.Attribute.FONT_FAMILY] = 'Libre Barcode 39 Extended Text';
serialBarcode[DocumentApp.Attribute.FONT_SIZE] = 20;
serialBarcode[DocumentApp.Attribute.BOLD] = false;
var nospace = {};
nospace[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
nospace[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
nospace[DocumentApp.Attribute.FONT_SIZE] = 1;
nospace[DocumentApp.Attribute.BOLD] = true;
var text = body.editAsText();
var itemqrcode = UrlFetchApp.fetch('https://chart.googleapis.com/chart?chs=70x70&cht=qr&chl=' + itemnum);
var serialqrcode = UrlFetchApp.fetch('https://chart.googleapis.com/chart?chs=70x70&cht=qr&chl=' + serial);
if (itemnum != '') {
//#################### SERIAL ###################
if (serial != '') { // SERIAL NUMBER
body.appendParagraph('').setAttributes(nospace);
var paragraph = body.appendParagraph('Item Number: ' + itemnum).setAttributes(styleLeft);
paragraph.addPositionedImage(itemqrcode.getBlob()).setLayout(DocumentApp.PositionedLayout.WRAP_TEXT)
body.appendParagraph('*' + itemnum + '*').setAttributes(itemBarcode);
body.appendParagraph('\n\n').setAttributes(nospace).appendHorizontalRule();
//description
body.appendParagraph(desc).setAttributes(styleLeft);
body.appendParagraph('').setAttributes(nospace);
//serials
body.appendParagraph('').setAttributes(nospace).appendHorizontalRule();
var paragraph = body.appendParagraph('Serial Number: ' + serial).setAttributes(styleRight);
body.appendParagraph('*' + serial + '*').setAttributes(serialBarcode);
paragraph.addPositionedImage(serialqrcode.getBlob()).setLayout(DocumentApp.PositionedLayout.WRAP_TEXT)
body.appendParagraph('').setAttributes(nospace);
} else if (serial == '') { // NO SERIAL NUMBER
var styleCenter = {};
styleCenter[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
styleCenter[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleCenter[DocumentApp.Attribute.FONT_SIZE] = 18;
styleCenter[DocumentApp.Attribute.BOLD] = true;
var itemBarcode = {};
itemBarcode[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
itemBarcode[DocumentApp.Attribute.FONT_FAMILY] = 'Libre Barcode 39 Extended Text';
itemBarcode[DocumentApp.Attribute.FONT_SIZE] = 35;
itemBarcode[DocumentApp.Attribute.BOLD] = false;
var styleLocation = {};
styleLocation[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.LEFT;
styleLocation[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleLocation[DocumentApp.Attribute.FONT_SIZE] = 12;
styleLocation[DocumentApp.Attribute.BOLD] = true;
body.appendParagraph('').setAttributes(nospace);
var paragraph = body.appendParagraph('Item Number: ' + itemnum).setAttributes(styleLeft);
body.appendParagraph('*' + itemnum + '*').setAttributes(itemBarcode);
body.appendParagraph('\n').setAttributes(nospace).appendHorizontalRule();
//description
body.appendParagraph(desc).setAttributes(styleLeft);
body.appendParagraph('').setAttributes(nospace).appendHorizontalRule();
body.appendParagraph('Location: ' + bin + ' Qty: ' + qty).setAttributes(styleLocation);
body.appendParagraph('\n').setAttributes(nospace);
}
body.appendPageBreak();
}
}
var googledoc = doc.getUrl();
FinishedGoogleDoc(googledoc);
}
Below is my solution that does work.
/
/####################################### Create Zebra Label #########################
function createZebraLabel(monthlySheet,newSheetName){
var parentFolder=DriveApp.getFolderById('1mUPLw1PSi-guH19uJPCPWmogkpdckLcW');
var createdoc = DocumentApp.create('Zebra Label').getId();
doc = DocumentApp.openById(createdoc);
var id = createdoc;
var docFile = DriveApp.getFileById(doc.getId());
var target = parentFolder;
var file1 = DriveApp.getFileById(id);
var mkfile1 = file1.makeCopy(newSheetName, target).getId();
doc = DocumentApp.openById(mkfile1);
docFile.setTrashed(true);
//325
var body = doc.getBody().setPageWidth(325).setPageHeight(180).setMarginTop(.02).setMarginBottom(.02);
// var body = doc.getBody().setPageWidth(144).setPageHeight(200).setMarginTop(.01).setMarginBottom(.01);
var sourceSpreadSheet = SpreadsheetApp.openById(monthlySheet);
var ss = sourceSpreadSheet.getSheetByName('Sheet1');
var startRow = 1; // First row of data to process
var numRows = 250; // Number of rows to process
var startColumn = 1; // A=1 B=2
var numColumns = 5; // Number of columns to process
var dataRange = ss.getRange(startRow, startColumn, numRows, numColumns);
var data = dataRange.getValues();
for (var i = 1; i < data.length; ++i) {
var row = data[i];
var actualrow=i;
var itemnum = row[0]; // A column
var desc = row[1]; // B column
var serial = row[2]; // D column
var bin = row[3]; // D column
var qty =row[4];
if (itemnum != ''){
var styleITEMNUM = {};
styleITEMNUM[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
styleITEMNUM[DocumentApp.Attribute.VERTICAL_ALIGNMENT] =DocumentApp.VerticalAlignment.CENTER;
styleITEMNUM[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleITEMNUM[DocumentApp.Attribute.FONT_SIZE] = 14;
styleITEMNUM[DocumentApp.Attribute.BOLD] = true;
var styleDESC = {};
styleDESC[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.LEFT;
styleDESC[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleDESC[DocumentApp.Attribute.FONT_SIZE] = 10;
styleDESC[DocumentApp.Attribute.BOLD] = true;
var styleSERIAL = {};
styleSERIAL[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
styleSERIAL[DocumentApp.Attribute.VERTICAL_ALIGNMENT] =DocumentApp.VerticalAlignment.CENTER;
styleSERIAL[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleSERIAL[DocumentApp.Attribute.FONT_SIZE] = 12;
styleSERIAL[DocumentApp.Attribute.BOLD] = true;
var nospace = {};
nospace[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.RIGHT;
nospace[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
nospace[DocumentApp.Attribute.FONT_SIZE] =-1;
nospace[DocumentApp.Attribute.BOLD] = true;
var text = body.editAsText();
var paraStyle = {};
paraStyle[DocumentApp.Attribute.PADDING_BOTTOM] = 0;
paraStyle[DocumentApp.Attribute.PADDING_TOP] = 0;
paraStyle[DocumentApp.Attribute.MARGIN_TOP] = 0;
paraStyle[DocumentApp.Attribute.SPACING_BEFORE] = 0;
paraStyle[DocumentApp.Attribute.SPACING_AFTER] = 0;
paraStyle[DocumentApp.Attribute.LINE_SPACING] = 0;
var itemqrcode = UrlFetchApp.fetch('https://chart.googleapis.com/chart?chs=80x80&cht=qr&chl='+itemnum);
var serialqrcode = UrlFetchApp.fetch('https://chart.googleapis.com/chart?chs=80x80&cht=qr&chl='+serial);
//#################### ITEM WITH SERIAL NUMBER ###################
if (itemnum != '' && serial != ''){ // SERIAL NUMBE
body.appendParagraph('').setAttributes(nospace);
var table = body.appendTable().setBorderWidth(0).setAttributes(paraStyle);
var tr = table.appendTableRow().setAttributes(paraStyle);
var td = tr.appendTableCell('').setWidth(80).setPaddingTop(0).setPaddingBottom(0).appendImage(itemqrcode.getBlob()).setAttributes(paraStyle);
var td = tr.appendTableCell('Item Number\n' +itemnum).setPaddingTop(0).setPaddingBottom(0).setAttributes(styleITEMNUM);
body.appendHorizontalRule().setAttributes(nospace);
body.appendParagraph(desc).setAttributes(styleDESC);
body.appendParagraph('').setAttributes(nospace).appendHorizontalRule().setAttributes(nospace);
body.appendParagraph('').setAttributes(nospace);
var table = body.appendTable().setBorderWidth(0).setAttributes(paraStyle);
var tr = table.appendTableRow().setAttributes(paraStyle);
var td = tr.appendTableCell('').setWidth(80).setPaddingTop(0).setPaddingBottom(0).appendImage(serialqrcode.getBlob()).setHeight(80);
var td = tr.appendTableCell('Serial Number\n ' +serial).setPaddingTop(0).setPaddingBottom(0).setAttributes(styleSERIAL);
}
else if (itemnum != '' && serial == ''){ // NO SERIAL NUMBER
var styleLocation = {};
styleLocation[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.LEFT;
styleLocation[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
styleLocation[DocumentApp.Attribute.FONT_SIZE] =12;
styleLocation[DocumentApp.Attribute.BOLD] = true;
body.appendParagraph('').setAttributes(nospace);
var table = body.appendTable().setBorderWidth(0).setAttributes(paraStyle);
var tr = table.appendTableRow().setAttributes(paraStyle);
var td = tr.appendTableCell('').setWidth(80).setPaddingTop(0).setPaddingBottom(0).appendImage(itemqrcode.getBlob()).setAttributes(paraStyle);
var td=tr.appendTableCell('Item Number\n' +itemnum).setAttributes(styleITEMNUM);
body.appendParagraph('\n').setAttributes(nospace).appendHorizontalRule();
body.appendParagraph(desc).setAttributes(styleDESC);
body.appendParagraph('\n').setAttributes(nospace).appendHorizontalRule();
body.appendParagraph('').setAttributes(nospace);
var table = body.appendTable().setBorderWidth(0).setAttributes(paraStyle);
var tr = table.appendTableRow().setAttributes(paraStyle);
var td=tr.appendTableCell('Location:'+bin).setWidth(200).setPaddingTop(0).setPaddingBottom(0).setAttributes(styleLocation);
var td=tr.appendTableCell('Qty: ' +qty).setAttributes(styleLocation);
}
body.appendPageBreak();
}
}
var googledoc = doc.getUrl();
FinishedGoogleDoc(googledoc);
}

Amcharts V4 mark values on series with known value

I have a amChart4 XYChart loaded from a CSV external file.
How to mark the max values on a serie, max values are known when writing the file. So just need to mark the data points with a bullet.
var maxNm = 404.24;
var maxHP = 327.7;
Se code with working chart loaded from CSV.
https://codepen.io/lasse-kofoed/pen/WNbNXxe
// Themes begin
am4core.useTheme(am4themes_material);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.responsive.enabled = true;
// Set up data source
chart.dataSource.url = "https://master.tus.io/files/a6bfda6a8051313c0c0b1d7129a75786+DB7aQwWVBca.GAK4H6FLamUT58549Asv6vLoR9kEJySMEVOsFlCSi9eqzgMYLhqXdMJDZoTE0C90HuVUUKD7KoKdFjlM0f1IRkkQ0L5X6iykr8kSsyNWTtPkcmzIFwDp";
chart.dataSource.parser = new am4core.CSVParser();
chart.dataSource.parser.options.useColumnNames = true;
// Increase contrast by taking evey second color
chart.colors.step = 2;
chart.dataSource.events.on("error", function (ev) {
console.log("Oopsy! Something went wrong");
});
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.title.text = "Power & Torque";
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Rpm";
// Create serie Nm
var nm = chart.series.push(new am4charts.LineSeries());
var maxNm = 404.24;
nm.dataFields.valueY = "Nm";
nm.dataFields.categoryX = "Rpm";
nm.yAxis = valueAxis;
nm.name = "Nm";
nm.strokeWidth = 1;
//nm.tensionX = 0.7;
nm.tooltipText = "{valueY.value} Nm";
var hp = chart.series.push(new am4charts.LineSeries());
var maxHP = 327.7;
hp.dataFields.valueY = "Hp";
hp.dataFields.categoryX = "Rpm";
hp.yAxis = valueAxis;
hp.name = "Hp";
hp.strokeWidth = 1;
//hp.tensionX = 0.7;
hp.tooltipText = "{valueY.value} Hp";
// Add legend
chart.legend = new am4charts.Legend();
// Add cursor
chart.cursor = new am4charts.XYCursor();
Updated a CodePen with the result.
https://codepen.io/lasse-kofoed/pen/eYmprPR
Found that using the event beforedatavalidated you can alter the data and set a field to false.
And then set propertyFields.disabled = true on a bullet object ( hides all bullets )
and .propertyFields.disabled to the field name that was added to the data list item ( show on bullets on values that have the field set to false )
chart.series.values[0].dataItem.values.valueY
Also found that the max and min values can be found here, but is not using that information in the example
// Add max Torque bullet
var maxTorque = nm.bullets.push(new am4charts.CircleBullet());
maxTorque.disabled = true;
maxTorque.propertyFields.disabled = "maxTorque";
maxTorque.radius = 8;
maxTorque.strokeWidth = 2;
maxTorque.stroke = am4core.color("#fff");
var maxTorqueLabel = nm.bullets.push(new am4charts.LabelBullet());
maxTorqueLabel.label.text = "Max torque\n[bold]{valueY} {name}#{categoryX}[/]";
maxTorqueLabel.disabled = true;
maxTorqueLabel.propertyFields.disabled = "maxTorque";
maxTorqueLabel.label.dy = -30;
// Add max Power bullet
var maxPower = hp.bullets.push(new am4charts.CircleBullet());
maxPower.disabled = true;
maxPower.propertyFields.disabled = "maxPower";
var maxPowerLabel = hp.bullets.push(new am4charts.LabelBullet());
maxPowerLabel.label.text = "Max power\n[bold]{valueY} {name}#{categoryX}[/]";
maxPowerLabel.disabled = true;
maxPowerLabel.propertyFields.disabled = "maxPower";
maxPowerLabel.label.dy = -30;
chart.events.on("beforedatavalidated", function(ev) {
var maxT = chart.data.find(x => x.Rpm === "5221");
var maxP = chart.data.find(x=> x.Rpm === "5888");
if(typeof maxT !== "undefined")
{
maxT.maxTorque = false;
}
if(typeof maxP !== "undefined")
{
maxP.maxPower = false;
}
});

how to remove lines from amcharts map Dynamically

I want to remove Lines from amcharts maps dynamically. I can add lines dynamically but not able to remove it dynamically
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldLow;
chart.projection = new am4maps.projections.Miller();
var markerPoints = [];
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.fill = chart.colors.getIndex(0).lighten(0.5);
polygonSeries.mapPolygons.template.nonScalingStroke = true;
polygonSeries.exclude = ["AQ"];
var points = chart.series.push(new am4maps.MapImageSeries());
points.mapImages.template.nonScaling = true;
var marker = points.mapImages.template.createChild(am4core.Circle);
marker.radius = 1;
marker.fill = am4core.color("yellow");
marker.strokeWidth = 0;
marker.stroke = am4core.color("yellow");
marker.tooltipText = '{title}';
points.mapImages.template.propertyFields.latitude = "latitude";
points.mapImages.template.propertyFields.longitude = "longitude";
function addPoint(coords, title) { // this is function to add points on map
var marker = points.mapImages.create();
marker.latitude = coords.latitude;
marker.longitude = coords.longitude;
return marker;
}
var paris = addPoint({ "latitude": 48.8567, "longitude": 2.3510 }, "Paris");
var toronto = addPoint({ "latitude": 43.8163, "longitude": -79.4287 }, "Toronto");
var lineSeries = chart.series.push(new am4maps.MapArcSeries());
lineSeries.mapLines.template.line.strokeWidth = 2;
lineSeries.mapLines.template.line.strokeOpamarker = 0.5;
lineSeries.mapLines.template.line.stroke = marker.fill;
lineSeries.mapLines.template.line.nonScalingStroke = true;
lineSeries.mapLines.template.line.strokeDasharray = "1,5";
function addLine(from, to) {
var line = lineSeries.mapLines.create();
line.imagesToConnect = [from, to];
line.line.controlPointDistance = -0.3;
return line;
}
addLine(paris, toronto);
setInterval(function(){
addLine(somePoint,somePoint);
removeLine()//how to implement this one
},1000);
I want to implement a function or line of code that remove those lines which has already drawn inside setInterval ..
for bullets var bulletAttack = bullet.createChild(am4core.Sprite); I use:
bullet.hide();
bullet.kill();
maybe it will help you.
try below command before adding new line and it will fix your issue.
lineSeries.mapLines.removeIndex(0)

Amchart with two lines

i have an amchart with two lines:
<script type="text/javascript">
var chart;
var graph;
var chartData2 = [
{"year":"2014-10-04 23:30:03", "v1":9.1, "v2":0},
{"year":"2014-10-04 23:45:02", "v1":8.8, "v2":86.2},
...
{"year":"2014-10-05 23:30:02", "v1":8.7, "v2":98.7},
{"year":"2014-10-05 23:45:02", "v1":8.5, "v2":98.7},
{"year":"2014-10-06 00:00:01", "v1":8.4, "v2":98.5},
{"year":"2014-10-06 00:15:02", "v1":8.5, "v2":98.3},
{"year":"2014-10-06 00:30:01", "v1":8.4, "v2":97.9}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.dataProvider = chartData2;
chart.marginLeft = 10;
chart.categoryField = "year";
chart.dataDateFormat = "JJ:NN:SS";
//chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "100";
categoryAxis.dashLength = 3;
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.1;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.id = "ax1";
valueAxis.axisAlpha = 0;
valueAxis.inside = true;
valueAxis.dashLength = 3;
valueAxis.position = "right";
chart.addValueAxis(valueAxis);
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.id = "ax2";
valueAxis2.axisAlpha = 0;
valueAxis2.inside = true;
valueAxis2.dashLength = 3;
valueAxis2.baseValue = -20;
valueAxis2.position = "left";
chart.addValueAxis(valueAxis2);
// GRAPH
graph = new AmCharts.AmGraph();
graph.valueaxis = "ax1";
graph.type = "smoothedLine";
graph.lineColor = "#d1655d";
graph.negativeLineColor = "#637bb6";
graph.bullet = "square";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.valueField = "v1";
graph.title = "title v1";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph);
graph2 = new AmCharts.AmGraph();
graph2.valueAxis = "ax2";
graph2.type = "smoothedLine";
graph2.lineColor = "#d1655d";
graph2.negativeLineColor = "#637bb6";
graph2.bullet = "round";
graph2.bulletSize = 8;
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderAlpha = 1;
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.valueField = "v2";
graph2.title = "title v2";
graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph2);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv2");
});
I can see the x-and y-axis, but no lines with values. Can anyone please help me?
Two problems:
dataDateFormat is incorrect, should be: chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
minPeriod is incorrect, should be: categoryAxis.minPeriod = "ss";

How to show polynomial tread line in Am-Line chart

How can i show a polynomial tread line in Am-line chart. I'm getting a straight trend line here, i need a polynomial trend line. My javascript code is shown below. Please someone help me to solve this issue.
function GenChartData() {
var data1 = [0.234761158, 0.23816127, 0.263960124, 0.282558558, 0.300607979, 0.318197719, 0.316059534, 0.319133276, 0.322505238, 0.323926338, 0.323720379, 0.3203703, 0.318837626, 0.318380371, 0.321465339, 0.316398839, 0.310238176, 0.301206892, 0.278454166, 0.268778255, 0.250299958, 0.23754735, 0.216277621, 0.182483871, 0.152057602, 0.129372542, 0.079524595, 0.044074801, 0.007279248, -0.021369877, -0.022801251, -0.043247196, -0.060677351, -0.055932729, -0.055847788, -0.032625365, -0.027289726, -0.022615401, -0.010850169, 0.015833104, 0.043923065, 0.055500831, 0.048043121, 0.054154849, 0.064038257, 0.049914887, 0.046542406, 0.03154397, 0.033614909, 0.030570225, 0.035606699, 0.001179461, -0.028934007, -0.019034206, 2.30344E-05];
var dates = ["12/31/2001", "1/31/2002", "2/28/2002", "3/31/2002", "4/30/2002", "5/31/2002", "6/30/2002", "7/31/2002", "8/31/2002", "9/30/2002", "10/31/2002", "11/30/2002", "12/31/2002", "1/31/2003", "2/28/2003", "3/31/2003", "4/30/2003", "5/31/2003", "6/30/2003", "7/31/2003", "8/31/2003", "9/30/2003", "10/31/2003", "11/30/2003", "12/31/2003", "1/31/2004", "2/29/2004", "3/31/2004", "4/30/2004", "5/31/2004", "6/30/2004", "7/31/2004", "8/31/2004", "9/30/2004", "10/31/2004", "11/30/2004", "12/31/2004", "1/31/2005", "2/28/2005", "3/31/2005", "4/30/2005", "5/31/2005", "6/30/2005", "7/31/2005", "8/31/2005", "9/30/2005", "10/31/2005", "11/30/2005", "12/31/2005", "1/31/2006", "2/28/2006", "3/31/2006", "4/30/2006", "5/31/2006", "6/30/2006"];
for (var i = 0; i < dates.length; i++) {
chartData.push({
date: new Date(dates[i]),
data1: data1[i]});
}
}
AmCharts.ready(function () {
// SERIAL CHART
GenChartData();
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "JS/AmFiles/amcharts/images/";
chart.marginTop = 0;
chart.marginRight = 10;
chart.autoMarginOffset = 5;
//chart.backgroundColor = "#CCCCC";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
// listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
categoryAxis.labelFrequency = 1;
categoryAxis.equalSpacing = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0.2;
valueAxis.dashLength = 1;
chart.addValueAxis(valueAxis);
graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.lineColor = "#180ad1";
graph.negativeLineColor = "#180ad1";
graph.bullet = "round";
graph.bulletSize = 5;
graph.lineThickness = 2;
graph.valueField = "data1";
chart.addGraph(graph);
// CURSOR
chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// TREND LINES
// first trend line
var trendLine = new AmCharts.TrendLine();
trendLine.initialDate = new Date(chartData[0].date); // 12 is hour - to start trend line in the middle of the day
trendLine.finalDate = new Date(chartData[chartData.length-1].date);
trendLine.initialValue = 0.234761158;
trendLine.finalValue = 2.30344E-05;
trendLine.lineColor = "#CC0000";
chart.addTrendLine(trendLine);
// WRITE
chart.write("chartdiv");
});
Thanks for your help
You would need to basically have another graphline on there rather than a trendline.
You can look at this example - http://www.amcharts.com/javascript-charts/line-with-different-bullet-sizes/
to see how to equip multiple data graphs.

Resources