Search the Community

Showing results for tags 'events'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Company Forums
    • Company News
  • Product Forums
    • FusionCharts XT
    • FusionWidgets XT
    • PowerCharts XT
    • FusionMaps XT
    • Collabion Charts for SharePoint
    • jQuery Plugin for FusionCharts
    • AngularJS plugin
    • ReactJS plugin
  • General Forums
    • FusionCharts Jobs and Consultation
    • FusionLounge

Found 8 results

  1. I am trying to prevent the drill down in a tree map. Is there a way to remove all the (click) event handlers? Thanks.
  2. I am trying to prevent my treemap from drilling down. There does not seem a default method but am trying this and it does not seem to work, any idea? this.$refs.chart.chartObj.on('dataPlotClick', (e) => { e.preventDefault() })
  3. I have a 2D bar chart. Each bar on the bar chart has an annotation. Each annotation is positioned directly on top of each horizontal bar. I also have tool tips configured on each bar. If I rollover/rollout the mouse on an annotation, it prevents any rollover/rollout events firing on the underlying bar. The tool tip disappears. The mouse event is processed by the annotation only. Is there a way I can pass the rollover/rollout event through to the data plot, so that the tool tips still work? Thanks.
  4. I am creating fusion charts in .net by passing json data Its working fine. Chart MyFirstChart = new Chart(chartType, chartName, "100%", height.ToString(), "json", jsonData.ToString()); data is collected from a data table from sql server and converted to json string My data table has the following data : Date No of students Percentage Name of Department I would like to add an event that if a data plot is clicked more details are shown by showing data from a different data table, which contains more details of that Department I added the event MyFirstChart.AddEvent("dataPlotClick" , "dataPlotClick"); // render chart return MyFirstChart.Render(); and called this event in a java script <script> dataPlotClick = function (eventObj, dataObj) { console.log(eventObj); var header = document.getElementById('header'); header.style.display = 'block'; var tempDiv = document.createElement('div'); var attrsTable = document.getElementById('attrs-table'); var titleDiv, valueDiv; for (var prop in dataObj) { titleDiv = document.createElement('div'); titleDiv.className = 'title'; titleDiv.innerHTML = prop; valueDiv = document.createElement('div'); valueDiv.className = 'value'; valueDiv.innerHTML = dataObj[prop]; tempDiv.appendChild(titleDiv); tempDiv.appendChild(valueDiv); } attrsTable.innerHTML = ''; attrsTable.appendChild(tempDiv);}; </script> the click on data plot works fine but id gets the data of the current data table , and I would like to get the more detailed data table and show in a table view in the asp page. Is there a way to do that ?
  5. I'm trying to log the dataPlotClick event for stacked area 2d chart. But in iOS, the event is not triggering for any events. I've not tried yet in Android. But I've to make it work for both Platforms. Any help will be appreciated. my Code this.state = { type: 'column2d', width: '99%', height: '95%', dataFormat: 'json', dataSource: undefined, containerBackgroundColor: '#FFFFFF', calendarReturnsData: undefined, dataEmptyMessage: 'Insufficient data available', baseChartMessageFontSize: '16', baseChartMessageColor: '#454545', detailsBtnStateHolder: true, events: { dataplotclick: (e, a) => { Alert.alert(`You clicked on ${e.data.categoryLabel}`); } } }; In render method, I'm destructuring all the variables and assigning it to Fushion Chart. <FusionCharts type={type} width={width} height={height} dataFormat={dataFormat} dataSource={dataSource} containerBackgroundColor={containerBackgroundColor} dataEmptyMessage={dataEmptyMessage} baseChartMessageFontSize={baseChartMessageFontSize} baseChartMessageColor={baseChartMessageColor} events={events} libraryPath={ Platform.OS === 'ios' ? fusionChartiOSPath : fusionChartAndroidPath } />
  6. Map events not working on some maps

    Hi, Am trying to work through the events tutorial because that is what we need and I have a problem and can't seem to get it. Using your tutorial here http://www.fusioncharts.com/dev/map-guide/listening-to-map-events.htmlmy world map works fine. Teh box in the bottom shows the population of the continent on mouseover When I use a map of a continent I get null where the population should be. IN other words when I mouseover a country I get "Population nullM" instead of a number. In addition the coutinent shows uniform blue. SO I must be doing something wrong, but the only thing I change is the map name, and the two letter codes. You can see the scripts on the bottom. Even tried it with your numeircal code instead of country code, but no good. I am mystified. Any help you can give is appreciated. GOOD CODE <script> FusionCharts.ready(function() { var populationMap = new FusionCharts({ type: 'maps/world', renderAt: 'mapdiv', width: '600', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Global Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "showToolTip": "0" }, "colorrange": { "color": [{ "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" }] }, "data": [{ "id": "NA", "value": "515" }, { "id": "SA", "value": "373" }, { "id": "AS", "value": "3875" }, { "id": "EU", "value": "727" }, { "id": "AF", "value": "885" }, { "id": "AU", "value": "32" }], }, "events": { "entityRollover": function(evt, data) { document.getElementById('message').value = "" + data.label + "\n" + "Population: " + data.value + "M"; }, "entityRollout": function(evt, data) { document.getElementById('message').value = "Total World Population - 6.3 Billion"; }, "entityClick": function(evt, data) { alert("You have clicked on " + data.label + "."); }, } }).render(); }); </script> BAD CODE <script> FusionCharts.ready(function() { var populationMap = new FusionCharts({ type: 'maps/africa', renderAt: 'mapdiv', width: '600', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "Africa Population", "theme": "fint", "formatNumberScale": "0", "numberSuffix": "M", "showLabels": "1", "showToolTip": "0" }, "colorrange": { "color": [{ "minvalue": "0", "maxvalue": "100", "code": "#D0DFA3", "displayValue": "< 100M" }, { "minvalue": "100", "maxvalue": "500", "code": "#B0BF92", "displayValue": "100-500M" }, { "minvalue": "500", "maxvalue": "1000", "code": "#91AF64", "displayValue": "500M-1B" }, { "minvalue": "1000", "maxvalue": "5000", "code": "#A9FF8D", "displayValue": "> 1B" }] }, "data": [{ "id": "ZA", "value": "515" }, { "id": "EG", "value": "373" }, { "id": "BW", "value": "3875" }, { "id": "BJ", "value": "727" }, { "id": "KE", "value": "885" }, { "id": "DZ", "value": "32" }], }, "events": { "entityRollover": function(evt, data) { document.getElementById('message').value = "" + data.label + "\n" + "Population: " + data.value + "M"; }, "entityRollout": function(evt, data) { document.getElementById('message').value = "Total World Population - 6.3 Billion"; }, "entityClick": function(evt, data) { alert("You have clicked on " + data.label + "."); }, } }).render(); }); </script>
  7. Hi, I have a number of piecharts whose sources are in seperate xml files and loaded via the FusionCharts method. I.e. var myChart = new FusionCharts( {swfUrl:"Pie2D.swf", id : "FusionCharts_1", width: 450, height: 300, renderAt: "chartdiv", dataSource : "data/Overv_T1_Executed_payments_en.xml", dataFormat: 'xmlurl' }) I also have a Javascript JSON object "piechartSettings" containing some settings that I wish to apply to each and every pie chart. var piechartSettings = { baseFontSize : 11, baseFont:'Verdana', bgColor: 'Transparent', bgAlpha: 0, showBorder:0, use3dlighting: "0", showshadow: "0", manageLabelOverflow: 1, showLegend: 1, showLabels:0, chartType:"pie", chartDim:"2D" } How can I update the chart data with this JSON object BEFORE the chart renders, so that all my charts have the same look and fell without having to resort to adding these parameters to each and every single xml file. I have tried setChartAttribute method, both before and after the render() method, but this does not result in anything. I have also tried it using the "Loaded" event, but this stilml results in a short flash rendering of the previous chart style: myChart.addEventListener('Loaded',function(eventObject,argumentsObject ){ myChart.setChartAttribute(piechartSettings) }) Does anyone have any experience doing this? A simple and effective way of controlling all charts look and feels with a single object? Thanks in advance, Björn (Belgium)
  8. Source Code

    Hi, I would like to make a change so that charts fire an event when a column is clicked. This is similar to having javascript:functionName(values) in JSON or XML, but will fire an event. How would you suggest to work on this? Code is minified... Is there an option to see the source code? Thanks, Iulian