CODEWITHSUNDEEP
javascriptamcharts
whatAboutJohn
whatAboutJohn

Reputation: 773

AmCharts - Help creating a trending bar

I'm trying to follow the docs on how to add a trending line on my serial type bar graph.

AmCharts.makeChart('chartdiv', {
      type: 'serial',
      addClassNames: true,
      theme: 'light',
      dataProvider: data,
      startDuration: 1,
      categoryField: 'month',
      graphs: [
        {
          valueField: 'complaints',
          type: 'column',
          fillAlphas: 0.8,
          balloonText: "# of complaints on [[category]]: <b>[[value]]</b>"
        },
        {
          valueField: 'expectation',
          type: 'line',
          // bullet: 'round',
          lineColor: 'green',
          balloonText: "Expected less than <b>[[value]]</b> for [[category]]",
          dashLengthField: "dashLengthLine"
        }
      ],
      categoryAxis: {
        autoGridCount: false,
        gridCount: data.length,
        gridPosition: "start",
        // labelRotation: 90
      },
      export: {
        enabled: true
      },

      trendLines: [{
            initialValue: 6,
            finalValue: 8
        }]
    });

The trendingLines is not doing much there. I've tried in many ways to declare it, but no luck. Here's some of the data I'm working with:

[{
    "expectation": 2,
    "tendValue": 1,
    "month": "January",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "February",
    "complaints": 2
  }, {
    "expectation": 2,
    "month": "March",
    "complaints": 0
  }, {
    "expectation": 2,
    "month": "April",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "May",
    "complaints": 0
  }, {
    "expectation": 2,
    "month": "June",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "July",
    "complaints": 2
  }, {
    "expectation": 2,
    "month": "August ",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "September",
    "complaints": 3
  }, {
    "expectation": 2,
    "month": "October",
    "complaints": 1
  }, {
    "expectation": 2,
    "month": "November",
    "complaints": 2
  }, {
    "expectation": 2,
    "tendValue": 3,
    "month": "December",
    "complaints": 3
  } ]

Upvotes: 0

Views: 54

Answers (1)

gerric
gerric

Reputation: 2297

What you're missing out is the declaration of a start and an end point. You only tell the trendline its values.

Minimum code for a trendline should be sth. like this:

{
    "finalDate": "2012-01-22 12",
    "finalValue": 10,
    "initialDate": "2012-01-17 12",
    "initialValue": 16
}

or in your case using initialCategory and finalCategory. Take a look at the class reference for more info on trendline parameters or look at this nice little demo.

Upvotes: 1

Related Questions