CODEWITHSUNDEEP
javascriptjqueryhtmlleafletamcharts
Casey Cao
Casey Cao

Reputation: 341

How to get value outside click function

I have a div of a map and a div of pie chart on the web page. There are several pins on the map, and I want to refresh the chart div based on different click.

Here is the click function of leaflet.js:

var country = "";

map.on('click', function(e) {
  country = "Worldwide";
  alert("Set map to worldwide");
});

markerUS.on('click', function(e) {
  country = "U.S.";
  alert('U.S');
});

in the chart.js (pie chart):

AmCharts.makeChart("chartdiv1", {
  "type": "pie",
  "angle": 12,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "depth3D": 15,
  "titleField": "category",
  "valueField": "column-1",
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "align": "center",
    "markerType": "circle"
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Number of Projects distribution of " + country
  }],
  "dataProvider": [{
      "category": "a",
      "column-1": 8
    },
    {
      "category": "b",
      "column-1": 6
    },
    {
      "category": "c",
      "column-1": 2
    },
    {
      "category": "d",
      "column-1": "3"
    },
    {
      "category": "e",
      "column-1": "4"
    },
    {
      "category": "f",
      "column-1": "2"
    }
  ]
});

inside "titles" I make country as variable based on the pin I clicked.

But I got country is undefined and the value country from leaflet.js seems didn't pass to chart.js. Why? How to correct this and realize the function?

Upvotes: 0

Views: 301

Answers (2)

Pooki Foo
Pooki Foo

Reputation: 73

As Trung said you need to call a function that refrech the chart on each click event

var country = "";

map.on('click', function(e) {
  country = "Worldwide";
  refrechChart(country);
});

markerUS.on('click', function(e) {
  country = "U.S.";
  refrechChart(country);
});

and then make the refrechChart function

function refrechChart(country) {
   AmCharts.makeChart("chartdiv1", {
  "type": "pie",
  "angle": 12,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "depth3D": 15,
  "titleField": "category",
  "valueField": "column-1",
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "align": "center",
    "markerType": "circle"
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Number of Projects distribution of " + country
  }],
  "dataProvider": [{
      "category": "a",
      "column-1": 8
    },
    {
      "category": "b",
      "column-1": 6
    },
    {
      "category": "c",
      "column-1": 2
    },
    {
      "category": "d",
      "column-1": "3"
    },
    {
      "category": "e",
      "column-1": "4"
    },
    {
      "category": "f",
      "column-1": "2"
    }
  ]
});
}

you can also pass more parameter to use in your chart like

function refrechChart(country,value1,value2) {
 //...
}

Upvotes: 1

Trung Duong
Trung Duong

Reputation: 3475

You got undefined country because its value only be initialized when user click on map or on a maker. You could try to update your code like this

map.on('click', function(e) {
  var country = "Worldwide";
  makeChart(country);       
});

markerUS.on('click', function(e) {
  var country = "U.S.";
  makeChart(country);
});

function makeChart(country) {
  AmCharts.makeChart("chartdiv1", {     
      // your chart option .... 
  });
}

Upvotes: 1

Related Questions