CODEWITHSUNDEEP
javascriptamcharts
C. Gary
C. Gary

Reputation: 123

How to reference a variable in an array of JavaScript objects when executing event listener clickGraphItem using amCharts

I currently have an array of JavaScript objects called chartData with country and visits as variables. I'm leveraging amCharts to graph the data in a column chart and using an event handler to trigger an alert message of both the country (event.item.category) and visits (event.item.values.value), depending on the column that is clicked and everything works fine (see handleClick function below). Per the below code, I added an additional variable to my chartData JavaScript objects called id. How do I access my new variable id in my handleClick event function.

amCharts JavaScript Code

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 440px; background-color:#eeeeee;"></div>

var chart;

var chartData = 
[{
    country: "USA",
    visits: 4025,
    id: 1},
{
    country: "China",
    visits: 1882,
    id: 2},
{
    country: "Japan",
    visits: 1809,
    id: 3},
{
    country: "Germany",
    visits: 1322,
    id: 4},
{
    country: "UK",
    visits: 1122,
    id: 5}];


function handleClick(event)
{
    alert(event.item.category + ": " + event.item.values.value);
}


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.startDuration = 1;


    // add click listener
    chart.addListener("clickGraphItem", handleClick);


    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 90;
    categoryAxis.gridPosition = "start";


    var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.balloonText = "[[category]]: [[value]]";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);

    chart.write("chartdiv");
});

JsFiddle http://jsfiddle.net/amcharts2/cV8GG/

Upvotes: 0

Views: 143

Answers (1)

Recent Name
Recent Name

Reputation: 71

You can see the id in event.item.dataContext

function handleClick(event)
{
    console.log(event.item.dataContext.id);
    alert(event.item.category + ": " + event.item.values.value);
}

Upvotes: 3

Related Questions