CODEWITHSUNDEEP
amcharts
Michael Nguyen
Michael Nguyen

Reputation: 1752

set title for Clustered Bar Chart [AmCharts] does not work

I want to set title and cant do it with Clustered Bar (Serial) Chart. I use the "title" as described at (http://docs.amcharts.com/3/javascriptmaps/Title). It works for a Pie Chart, but not for Clustered Bar (Serial) Chart. I include the sample code in jsfiddle

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "titles": [{
        "text": "Hours Plot",
        "size": 15
     }],
    "legend": {
        "useGraphSettings": true
      },
    "categoryField": "discipline",
    "rotate": true,
    "startDuration": 0,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Budget Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Budget Hours",
            "type": "column",
            "valueField": "budgetHours"
        },
        {
            "balloonText": "Earned Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Earned Hours",
            "type": "column",
            "valueField": "earnedHours"
        },
        {
            "balloonText": "Actual Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-3",
            "lineAlpha": 0.2,
            "title": "Actual Hours",
            "type": "column",
            "valueField": "actualHours"
        },
        {
            "balloonText": "Forecast Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-4",
            "lineAlpha": 0.2,
            "title": "Forecast Hours",
            "type": "column",
            "valueField": "forecastHours"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": [
        {
            "discipline": "Completion",
            "budgetHours": 23.5,
            "earnedHours": 18.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Insulation",
            "budgetHours": 26.2,
            "earnedHours": 22.8,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Electrical",
            "budgetHours": 30.1,
            "earnedHours": 23.9,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Mechanical",
            "budgetHours": 29.5,
            "earnedHours": 25.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Piping",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours": 11
        },
        {
            "discipline": "Civil",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours" : 11
        }
    ],
    "export": {
        "enabled": true
     }
});

http://jsfiddle.net/q0eLc28j/1/

Upvotes: 0

Views: 621

Answers (1)

martynasma
martynasma

Reputation: 8595

You have two title arrays in your chart config. One is what you expect, and the other empty one. The latter overrides the first one, hence no titles.

Just remove the empty "titles": [], one.

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "titles": [{
        "text": "Hours Plot",
        "size": 15
     }],
    "legend": {
        "useGraphSettings": true
      },
    "categoryField": "discipline",
    "rotate": true,
    "startDuration": 0,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Budget Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Budget Hours",
            "type": "column",
            "valueField": "budgetHours"
        },
        {
            "balloonText": "Earned Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Earned Hours",
            "type": "column",
            "valueField": "earnedHours"
        },
        {
            "balloonText": "Actual Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-3",
            "lineAlpha": 0.2,
            "title": "Actual Hours",
            "type": "column",
            "valueField": "actualHours"
        },
        {
            "balloonText": "Forecast Hours:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-4",
            "lineAlpha": 0.2,
            "title": "Forecast Hours",
            "type": "column",
            "valueField": "forecastHours"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    // the following line needs to be removed
    // "titles": [],
    "dataProvider": [
        {
            "discipline": "Completion",
            "budgetHours": 23.5,
            "earnedHours": 18.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Insulation",
            "budgetHours": 26.2,
            "earnedHours": 22.8,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Electrical",
            "budgetHours": 30.1,
            "earnedHours": 23.9,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Mechanical",
            "budgetHours": 29.5,
            "earnedHours": 25.1,
            "actualHours": 10,
            "forecastHours" : 11
        },
        {
            "discipline": "Piping",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours": 11
        },
        {
            "discipline": "Civil",
            "budgetHours": 24.6,
            "earnedHours": 25,
            "actualHours": 10,
            "forecastHours" : 11
        }
    ],
    "export": {
        "enabled": true
     }
});

Updated fiddle:http://jsfiddle.net/q0eLc28j/3/

Upvotes: 2

Related Questions