Chart data are not displayed on the page preview

That’s weird. Do you get any errors in your browser console? Would you be able to point to a page in questions so I can check myself?

Hi, I don’t get any error on my browser console. Given that the website is available only on the internal network, I’ll show you how I defined the chart:
RESOURCES:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/style.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js

HTML:
<div id=”$CHART$” style=”width: 100%; height: 500px;”></div>

JAVASCRIPT:
var chart;
var chartData = [];
var chartCursor;

AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = “wp-content/plugins/amcharts-charts-and-maps/images/”;
chart.dataProvider = chartData;
chart.categoryField = “date”;
chart.dataDateFormat = “YYYY-MM-DD”;

// 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 = “DD”; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.minorGridEnabled = true;
categoryAxis.twoLineMode = true;
categoryAxis.axisColor = “#DADADA”;

// value
var valueAxis = new AmCharts.ValueAxis();
//valueAxis.position=”right”;
valueAxis.axisAlpha = 0.2;
valueAxis.dashLength = 1;
showLastLabel = true;
valueAxis.title = “Statistiche settimanali – Italia”;
chart.addValueAxis(valueAxis);

// GRAPH MALWARE
graph = new AmCharts.AmGraph();
graph.title = “Malware detections”;
graph.valueField = “malware”;
graph.bullet = “round”;
graph.bulletBorderColor = “#FFFFFF”;
graph.bulletBorderThickness = 2;
graph.bulletBorderAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = “#00205B”;
graph.negativeLineColor = “#0352b5”;
graph.balloonText = “category<br><b><span style=’font-size:14px;’>Malware: malware</span></b>”;
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);

// GRAPH1 THREATS
var graph1 = new AmCharts.AmGraph();
graph1.title = “Threat detections”;
graph1.valueField = “threats”;
graph1.bullet = “round”;
graph1.bulletBorderColor = “#FFFFFF”;
graph1.bulletBorderThickness = 2;
graph1.bulletBorderAlpha = 1;
graph1.lineThickness = 2;
graph1.lineColor = “#99b5e5”;
graph1.negativeLineColor = “#0352b5”;
graph1.balloonText = “category<br><b><span style=’font-size:14px;’>Threats: threats</span></b>”;
graph1.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph1);

// GRAPH2 NETWORK
var graph2 = new AmCharts.AmGraph();
graph2.title = “Network attacks”;
graph2.valueField = “network”;
graph2.bullet = “round”;
graph2.bulletBorderColor = “#FFFFFF”;
graph2.bulletBorderThickness = 2;
graph2.bulletBorderAlpha = 1;
graph2.lineThickness = 2;
graph2.lineColor = “#0040FF”;
graph2.negativeLineColor = “#0352b5”;
graph2.balloonText = “category<br><b><span style=’font-size:14px;’>Network: network</span></b>”;
graph2.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph2);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = “mouse”;
chart.addChartCursor(chartCursor);
chartCursor.cursorAlpha = 0.1;
chartCursor.fullWidth = true;
chartCursor.valueLineBalloonEnabled = true;
chart.addChartCursor(chartCursor);

// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
legend.useGraphSettings = true;
chart.addLegend(legend);

// WRITE
chart.write(“%CHART%”);

loadCSV(“wp-content/plugins/amcharts-charts-and-maps/ita.txt”);

});

function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject(‘Microsoft.XMLHTTP’);
}

// load
request.open(‘GET’, file, false);
request.send();
parseCSV(request.responseText);
}

function parseCSV(data) {
//replace UNIX new lines
data = data.replace(/\r\n/g, “\n”);
//replace MAC new lines
data = data.replace(/\r/g, “\n”);
//split into rows
var rows = data.split(“\n”);

// loop through all rows

for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {

// our columns are separated by comma
var column = rows[i].split(“,”);

// column is array now
// first item is date
var date = column[0];

var value = column[1];
var value1 = column[2];
var value2 = column[3];

// create object which contains all these items:
var dataObject = {
date: date,
malware: value,
threats: value1,
network: value2

};
// add object to chartData array
chartData.push(dataObject);
}
}
chart.validateData();
}

// this method is called when chart is first inited as we listen for “dataUpdated” event
function zoomChart() {
// different zoom methods can be used – zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length – 50, chartData.length – 1);
}

// changes cursor mode from pan to select
function setPanSelect() {
if (document.getElementById(“rb1″).checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;
} else {
chartCursor.pan = true;
}
chart.validateNow();
}

PREVIEW
The preview chart is displayed correctly.

WEB PAGE:
[amcharts id=”chart-1”]

When I insert the chart in the web page, it displays only the structure without data.

Gotcha. It must be a timing issue.

You are loading the external CSV file while the chart is being built with empty data. It seems that the load occurs before chart is fully initialized, hence the issue.

I strongly recommend looking into our Data Loader plugin. It will load CSV data for you and will ensure the timing is right.

Here’s more information about it to get you started:

https://www.amcharts.com/kbase/using-data-loader-plugin/

Let me know if you need a hand with this.