I have implemented that example: http://www.highcharts.com/demo/combo without pie chart. I want to add it dynamically after a time later. How can I add a chart into a combo chart dynamically at HighCharts?
If you look the demo you will see that the pie chart isn't a chart, it's just a serie.
So, to add a serie you have to use addSeries passing thrue parameter all the pie serie, like the following.
chart.addSeries({
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
},
{
name: 'John',
y: 23,
color: '#AA4643' // John's color
},
{
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
});
DEMO
You can use charts.push as shown in this url http://calibrate.be/labs/exporting-highcharts-js-pdf-docx-tcpdf-and-phpword
Let me know if you can't have this to work.
EDIT: You will need to define charts as var charts = []; as global variable. And this has not been tested by me.
Related
I was looking at this codebase https://jsfiddle.net/mushigh/zvq46kg8/ which gave me insight on how to develop a scrollbar. When attemptng to do it myself though it doesnt work correctly.
The fiddle shows the following set up for the chart:
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min: 0,
max: 5
},
scrollbar: {
enabled: true
},
series: [{
type: 'pie',
name: 'Total consumption',
zIndex: 9,
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [300, 10],
size: 50,
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
I was trying to implement this with angular-highcharts through and while it looks like everything works, the horizontal bars are not hidden when outside of the view port.
It looks like this though:
You can see there are some bars which show when they should not. (This is in comparison to the above jsfiddle).
I created a repo in order to create reproducibility. You should just need to npm intall and then ng serve. The repo is located at: https://github.com/fallenreaper/highchart-angular-scrolling.git
Everything should be in place and you should be able to serve the app, go to localhost and see the issue. I didnt update it YET but i can revert the dataset to the one given in the jsfiddle as well.
Is this a glitch with Angular HighCharts, or is here something else going on?
Here is my reproduction of the demo which you have shared in the Angular environment.
Demo: https://codesandbox.io/s/angular-ldxch
Please notice that this example uses the Highstock, not Highcharts - scrollbar is not implemented in Highcharts.
Highcharts use the scrollablePlotArea instead: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
When my graph renders, everything is great EXCEPT the legend only shows the colors black. The grouped bar chart graph is displaying how I would expect. All of the data and colors are wonderful, but the legend is not right.
I am loading a plotly graph into a salesforce Visualforce page as follows:
<apex:panelGroup styleClass="charts" layout="block">
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
</apex:panelGroup>
<script>
var trace1 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [20, 14, 23],
marker: {
color: ['#f8b98d', '#f8b98d', '#f8b98d']
},
name: 'Annual Quota',
type: 'bar',
orientation: 'h'
};
var trace2 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [12, 18, 29],
marker: {
color: ['#f58b3f', '#f58b3f', '#f58b3f']
},
name: 'Current Market Size',
type: 'bar',
orientation: 'h'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
</script>
I had a similar problem to this - custom colours on stacked bars looked great, but the legend swatches all black.
I couldn't find an official solution, so manually set the colours in the legend after the chart was generated using Plotly's built in d3, e.g:
var legendBoxes = document.getElementById("div-id-for-plot").getElementsByClassName("legendbar");
Plotly.d3.select(legendBoxes[0]).style("fill", "put your colour definition here");
(this example just styles a single box)
If we take this exemple : http://www.highcharts.com/demo/combo
How can I shared legend between pie and column? I want to aviable/disable one serie when I click on legend for column AND pie in same time !
Bind legendItemClick event and there hide connected slices in the pie chart. Demo: http://jsfiddle.net/x8ygvwbx/1/
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
var vis = this.visibility,
name = this.name,
pie = this.chart.get("my-pie"), // set pie's ID
index = pie.options.legendNames.indexOf(name); // get index of names
pie.points[index].setVisible(vis); //change visibility
}
}
}
},
And example for pie options:
{
id: "my-pie", // ID
type: 'pie',
name: 'Total consumption',
legendNames: ["Jane", "John", "Joe"], //NAMES
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}]
}
How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.
You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}
#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.
var data = google.visualization.arrayToDataTable(stats_data);
var options = {
width: 1400,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
bars: 'vertical',
colors:['#999','#346ac9', '#279423', '#fc9826'],
};
var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));
I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.
I also tried this in my options:
series: [
{color: '#999'},
{color: '#346ac9'},
{color: '#279423'},
{color: '#fc9826'}
]
How do I get each of the series to have a different color?
At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.
Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.
Example code:
const data = [
['Sector', 'High', 'Medium', 'Low' ],
['Agriculture', 18, 9, 29],
['Education', 2, 14, 10],
['Healthcare', 4, 6, 41],
['Manufacturing', 36, 10, 3]
];
const colors = [
{ color: 'indianred' }, //high
{ color: 'khaki' }, //medium
{ color: 'seagreen' }, //low
];
const drawChart = () => {
const options = {
chart: { title: 'Risk by sector' },
legend: { position: 'top' }, //not yet supported
bars: 'horizontal',
stacked: true,
series: colors
};
const chartData = google.visualization.arrayToDataTable(data);
const elem = $('figure#health-chart')[0];
const chart = new google.charts.Bar(elem);
chart.draw(chartData, options);
};
google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);
Resulting chart:
Fiddle with the code:
https://jsfiddle.net/p8bnfe2h
Configuration options
series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.
Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options
I was able to get the colors working here
When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.
You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google.com/jsapi to autoload all the things.