I want show empty/dummy bar chart when no data using amcharts version 4 as shown in below link using amcharts version 3.
Example with amcharts version 3
I have tried something like below, but getting error.
reChartData = am4core.create("exeChart", am4charts.XYChart);
var categoryAxis = reChartData.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "";
var valueAxis = reChartData.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
var dataPoint = {
dummyValue: 0
};
reChartData.data = dataPoint;
var series = reChartData.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "";
Error:
Error: Data fields for series "id-98" are not properly defined.
at e.validateData (charts.js:20)
at t.update (core.js:19)
at core.js:19
#GMStevents and #TonyMontana, can you please share your thoughts as you already discussed on similar issue here ?
Firstly, the error you get is because you are not defining your series dataFields. You need to specify the names of dataFields for your series. For example:
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
Secondly, the XYChart.data is an array. You cannot assign an object.
Then to show a message on the chart when there is no data, create a container on the chart and add a label, like so:
if (!reChartData.data || reChartData.data.length === 0){
const noDataMessagecontainer = reChartData.chartContainer.createChild(am4core.Container);
noDataMessagecontainer.align = 'center';
noDataMessagecontainer.isMeasured = false;
noDataMessagecontainer.x = am4core.percent(50);
noDataMessagecontainer.horizontalCenter = 'middle';
noDataMessagecontainer.y = am4core.percent(50);
noDataMessagecontainer.verticalCenter = 'middle';
noDataMessagecontainer.layout = 'vertical';
const messageLabel = noDataMessagecontainer.createChild(am4core.Label);
messageLabel.text = 'There is no data to show on this chart.';
messageLabel.textAlign = 'middle';
messageLabel.maxWidth = 300;
messageLabel.wrap = true;
}
See sample here
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);
}
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)
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 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.