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);
Related
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 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.
I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.
Any one can help me?
This is the gauge now:
This is what I expect:
There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:
onrendered: function() {
drawThresholds(this, thresholdOpts, opts);
}
Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/
Output obtained looks like below:
and:
I'm trying to replicate the trulia's graph with D3.js, but only the main chart (the heatmap) and the daily graph (the graph bar that changes when you hover the mouse over a specific point on the main chart).
Using this example, I've managed to build the main chart with my own data. I also have the second chart. But now I have no clue on how to update this second chart when I hover on a point on main chart.
Essentially, what you're going to have is two different charts with different data. The first chart (the heatmap) controls the other one. Each data point on the heatmap has a day and an hour attribute, which we want to use to control the second graph. To do this, we can use two functions to control the second graph, and then call both of them every time someone clicks on a point.
The first function just needs to build a blank graph for the target day.
function updateGraphDay(newDay){
//Remove current graph and build graph for newDay
}
The second is one that will highlight a certain hour on the bar chart. I'm assuming here that your bar chart is in its own SVG, barGraphSVG, and all of the bars have the class hourBar, and that the data you used to create it has an hour attribute, like the heat map data.
function updateGraphHour(newHour){
barGraphSVG.selectAll('.hourBar')
.classed('selectedBar', function(d){ return d.hour === newHour });
}
Now you just call both of these when you hover on one of the rect elements in the bar chart.
heatMap.on('hover', function(d){
updateGraphDay(d.day);
updateGraphHour(d.hour);
});
Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.
You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart: