AmCharts not displayed when adding website to local IIS

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>