AmCharts not displayed when adding website to local IIS - asp.net

Question

I created asp.net webform project including amcharts using visual studio. Everything works when I run project. But when I publish it on a local IIS (current version is 7 - windows 7 64 bit) it is not displayed. I googled a bit but not found a solution yet. (One of them was Setting up IIS for correctly handling SVG files, but it also didn't help.) Is anybody faced this problem?

Answer 1

I use Chrome. When I run project it works. But not works after deploying to IIS.
Here is code I reduced additional parts.
Visual basic.Net code that gets data from SQL and creates string of JS function
Protected Sub btn1_Click(sender As Object, e As EventArgs) Handles btn1.Click
comm.CommandText = "Select DateMeasr, data1, data2 from dbo.Measurements where DateMeasr>'2017-06-13 12:04:30' and DateMeasr<'2017-06-13 17:00:00' Order by DateMeasr"
If conn.State <> ConnectionState.Open Then conn.Open()
da.Fill(dtC)
If dtC.Rows.Count > 0 Then
DataCollect()
End If
End Sub
Protected Sub DataCollect()
Dim sb As New StringBuilder
Dim strtime As DateTime
sb.Append("<script type=""text/javascript"">")
sb.Append("function generateChartData() {")
For i = 0 To dtC.Rows.Count - 1
strtime = CDate(dtC.Rows(i).Item(0))
sb.Append("var newDate = new Date(" + strtime.Year.ToString + ", " + (strtime.Month - 1).ToString + ", " + strtime.Day.ToString + ", " + strtime.Hour.ToString + ", " + strtime.Minute.ToString + ", " + strtime.Second.ToString + ");")
sb.Append("var data1 = " + dtC.Rows(i).Item(1).ToString + ";")
sb.Append("var data2 = " + dtC.Rows(i).Item(2).ToString + ";")
sb.Append("chartData1.push({")
sb.Append("date: newDate,")
sb.Append("data1: data1,")
sb.Append("data2: data2")
sb.Append("});")
Next
sb.Append("}")
sb.Append("</script>")
ScriptManager.RegisterStartupScript(btn1, btn1.GetType, "teststring", sb.ToString, False)
End Sub
Javascript function to create Amchart
<script type="text/javascript">
var chart1;
var chartData1 = [];
AmCharts.ready(function () {
chart1 = new AmCharts.AmSerialChart();
chart1.dataProvider = chartData1;
chart1.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";
chart1.categoryField = "date";
chart1.rotate = true;
chart1.autoMargins = false;
chart1.marginLeft = 85;
chart1.marginTop = 200;
chart1.pathToImages = "https://www.amcharts.com/lib/3/images/";
chart1.synchronizeGrid = true; // this makes all axes grid to be at the same intervals
// AXES
// category
var categoryAxis1 = chart1.categoryAxis;
categoryAxis1.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis1.minPeriod = "ss";
categoryAxis1.minorGridEnabled = true;
categoryAxis1.axisColor = "#DADADA";
categoryAxis1.twoLineMode = true;
categoryAxis1.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// first value axis (on the left)
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.offset = 175;
valueAxis1.position = "right";
valueAxis1.axisColor = "#04a016";
valueAxis1.axisThickness = 2;
chart1.addValueAxis(valueAxis1);
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.offset = 125;
valueAxis2.position = "right";
valueAxis2.axisColor = "#ea0e19";
valueAxis2.axisThickness = 2;
chart1.addValueAxis(valueAxis2);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.lineColor = valueAxis1.axisColor;
graph1.title = "data1graph";
graph1.valueField = "data1";
graph1.hideBulletsCount = 30;
graph1.bulletBorderThickness = 1;
graph1.lineThickness = 2;
chart1.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
graph2.lineColor = valueAxis2.axisColor;
graph2.title = "data2graph";
graph2.valueField = "data2";
graph2.hideBulletsCount = 30;
graph2.bulletBorderThickness = 1;
graph2.lineThickness = 2;
chart1.addGraph(graph2);
// CURSOR
var chartCursor1 = new AmCharts.ChartCursor();
chartCursor1.cursorAlpha = 0.1;
chartCursor1.fullWidth = true;
chartCursor1.valueLineBalloonEnabled = true;
chart1.addChartCursor(chartCursor1);
// SCROLLBAR
var chartScrollbar1 = new AmCharts.ChartScrollbar();
chart1.addChartScrollbar(chartScrollbar1);
// LEGEND
var legend1 = new AmCharts.AmLegend();
legend1.markerLabelGap = 3;
legend1.spacing = 1;
legend1.position = "absolute";
legend1.position = "top";
chart1.addLegend(legend1);
});
function clicktodrawchart()
{
generateChartData();
chart1.write("chartdiv1");
}
</script>
Asp.net tags for buttons and div that show chart
<div>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<HeaderTemplate>
Charts<br />
</HeaderTemplate>
<ContentTemplate>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="btn1" Text="Get data from DB" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<input id="btnforchart" value="Click to draw charts" type="button" style="color: black; font-size:15px; padding:4px;" onclick="clicktodrawchart()" />
<div id="chartdiv1" style="width: 400px; height: 1000px; position: absolute; top: 260px; left: 40px; border: 2px solid #9ccfed;"></div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>