Lines Graph are rendering as straight Lines in AM Charts

Question

I am trying to draw Line Graph but these are rendering as a straight line in the bottom of graph area.I have added columns graphs too in it. they are showing properly but Lines Graph are not showing correct just a straight line. I have added the screenshot in the end. Please help.

This is my graph header

var header_graph = [{"balloonText":"[[title]] of [[category]]:[[value]]",
                       "fillAlphas":"1",
                       "id":"ProductA",
                       "title":"Produc A ",
                       "type":"SmoothedLine",
                       "valueField":"column2"}]; 

This is my graph data values

var data_graph  = [{"category":"Jan",  
                    "column1":"85", "column2":"24", "column3":"343", 
                    "column4":"85",  "column5":"31", "column6":"267", 
                    "column7":"85",  "column8":"19", "column9":"439"},......]

This is the whole script to generate the chart

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "depth3D": 2,
    "startDuration": 1,
    "theme": "light",
    "precision": 2,
    "valueAxes": [{
        "id": "v1",
        "title": "",
        "position": "left",
        "autoGridCount": false,
    }, {
        "id": "v2",
        "title": "",
        "gridAlpha": 0,
        "position": "right",
        "autoGridCount": false
    }],
    "graphs": header_graph ,
    "chartScrollbar": {
        "graph": "column2",
        "oppositeAxis": false,
        "offset": 30,
        "scrollbarHeight": 50,
        "backgroundAlpha": 0,
        "selectedBackgroundAlpha": 0.1,
        "selectedBackgroundColor": "#888888",
        "graphFillAlpha": 0,
        "graphLineAlpha": 0.5,
        "selectedGraphFillAlpha": 0,
        "selectedGraphLineAlpha": 1,
        "autoGridCount": true,
        "color": "#AAAAAA"
    },
    "chartCursor": {
        "pan": true,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha": 0,
        "valueLineAlpha": 0.2
    },
    "categoryField": "category",
    "categoryAxis": {
        "parseDates": false,
        "dashLength": 1,
        "minorGridEnabled": true,
        "gridPosition": "start"
    },
    "legend": {
        "useGraphSettings": true,
        "position": "bottom"
    },
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "export": {
        "enabled": false
    },
    "dataProvider":  data_graph

});

Answer 1

The chart is drawing your line at scale with respect to your chart's range of values and it looks like your values for the line are very small compared to the rest of your columns. It will look like a straight line near the bottom as a result of this.

You can use a valueScrollbar and let your users zoom in on the valueAxis/Y-axis so they can see the line better. It takes the same properties as a chartScrollbar as you can see in this demo from AmCharts:

  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },

Outside of that or making your valueAxis maximum smaller, there's not much else you can do.

(Off topic, you should make your values numbers, not strings.)

Edit

You can dynamically set the chart's maximum and minimum using addInitHandler to have the chart determine these value upon chart initialization like so:

//get the maximum and minimum values from the dataProvider
AmCharts.addInitHandler(function(chart) {
  var maximum = Number.MIN_VALUE;
  var minimum = Number.MAX_VALUE;
  chart.dataProvider.forEach(function(data) {
    //for each dataProvider element, check the properties that correspond to the chart graphs' valueFields.
    chart.graphs.forEach(function(graph) {
      if (data[graph.valueField] != null) {
        maximum = Math.max(maximum, data[graph.valueField]);
        minimum = Math.min(minimum, data[graph.valueField]);
      }
    });
  });
  chart.valueAxes[0].maximum = maximum;
  chart.valueAxes[0].minimum = minimum;
  chart.valueAxes[0].strictMinMax = true;
}, ["serial"]);

Demo