I currently have 2 AMCharts on the same page and a single dropdown with values 2015,2016,2017,2018 in it.
I have followed this example to dynamically update the data in the bar chart
http://www.amcharts.com/tips/dynamically-loading-chart-datasets/
I also have a Pie Chart and would like to update the data with the same drop down but I am not sure how to connect it so that it also updates at the same time.
Any suggestions ?
Just expand the function that changes the dataset of the charts with your pie chart reference.
function setDataSet( dataset_url ) {
// chart2 should be the reference to your pie chart
chart.dataProvider = chart2.dataProvider = AmCharts.loadJSON( dataset_url );
chart.validateData();
chart2.validateData();
}
EDIT:
Here is a working demo.
Related
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();
I'm actually developing one app using the javascript plugin chartjs (on the framework Symfony 3) and I realised that when we create a chart before the page it's ready, the legend it's correctly shown, but when I create other chart doing click on a button (after document.ready) the legend it's hidden.
To illustrate my problem, when I do :
// the chart is draw with the legend
drawChart();
// The chart is draw without the legend
$(document).ready(function() {
drawChart();
});
Have you ever meet this problem ? Is there a solution to solve this ?
Big thanks to all who takes time to help me !
I'm wondering why this below snippet isn't working:
$('#container').highcharts('StockChart', config);
$('#container').highcharts().destroy();
$('#container').highcharts('StockChart', config);
If you comment out the last two lines, the chart appears. But the second time I try to render a chart to the same element (third line), only the title appears. What's going on?
This snippet above tells me I can't render a chart to an element, then render a different chart in the same place, later?
In my application, I have a single element that shows a chart. There's an <select> that allows the user to change which chart they want to see. I want to render the new chart to the same element as the previous chart.
Here's a sandbox: http://jsfiddle.net/82ajq3f6/1/
It looks to me like your config.series is getting nuked when you destroy the chart. I am not sure why. To keep your chart options functioning you can do:
$('#container').highcharts('StockChart', config);
var opts = $('#container').highcharts().options;
$('#container').highcharts().destroy();
$('#container').highcharts(opts);
This question concerns working with Google Charts.
I have a dataset consisting of categories with contribution amounts, bucketed into the days of a month. I represent the entire month in a pie chart, and I represent the data for individual days in a stacked bar chart. Both charts are essentially based on the same information. If I give both charts their information in the right order, the colors are coordinated between the two (i.e. each category in one has the same color as the same category in the other).
When you hover your mouse over a pie slice, it get highlighted. I would like to have the corresponding data in the stacked bar chart also get highlighted at the same time, and vica versa.
What would be the best way to accomplish this with the Google visualization api?
Use the <chart type>#setSelection method to highlight data points. If I understand your data structure correctly, something like this should work:
google.visualization.events.addListener(pieChart, 'select', function () {
var selection = pieChart.getSelection();
if (selection.length) {
// assumes the row in the PieChart's data corresponds to the data series in the ColumnChart, which is the nth + 1 column
columnChart.setSelection([{column: selection[0].row + 1}]);
}
});
google.visualization.events.addListener(columnChart, 'select', function () {
var selection = columnChart.getSelection();
if (selection.length) {
// assumes the data series in the ColumnChart's data corresponds to the row in the PieChart, which is the nth column - 1
pieChart.setSelection([{column: selection[0].column - 1}]);
}
});