Have put together a simple chart in Highcharts which is compiling from data supplied:
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime'
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
fill: 'white'
},
select: {
style: {
color: 'white'
}
}
}
},
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Data',
data: [
[1325376000,102.2],
[1328054400,104.5],
[1330560000,106.7],
[1333238400,109.8],
[1335830400,122.1],
[1338508800,124.3],
]
}]
});
});
However, the date data (e.g. 1325376000) renders simply as hours on the x-axis on the chart and the dates show in the top appear as 1970... can you tell me where I have gone wrong? Many thanks.
Highcharts expects its dates in milliseconds. I think you are supplying seconds?
You have i.e 1325376000 which is timestamp, (date in 1970). Do you use UNIX timestamps or other? Which date should be? You can use i.e Date.UTC() to prepare appropaite date http://www.w3schools.com/jsref/jsref_utc.asp
Related
I am working on a large scale application and it would be very helpful to place the labels on either pie charts or doughnut charts outside of the chart itself.
This plugin, outerLabels is exactly what I am looking for but I am having trouble getting it to output anything.
I have been unable to find a way to get this done using Chart.js and that is what I am stuck working with for now.
I have imported the plugin both like
import {} from 'chartjs-plugin-outerlabels';
and also like import 'chartjs-plugin-outerlabels';
Here is an example of how I am setting the chart options:
function getPieChartOptions(chartTitle: string) {
const options: ChartOptions = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
}
}
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
}
},
datalabels: {
color: 'white',
formatter: commas.format,
}
},
};
return options;
}
Here is an example of a doughnut chart within the project itself:
If anybody can help getting this plugin to work, or has another solution to this problem it would be greatly appreciated!
This works for me without the datalabels field (as it requires installing chartjs-plugin-datalabels.js library).
So basically the ChartOptions setting is similar to the one you provided.
import 'chartjs-plugin-outerlabels';
getPieChartOptions(chartTitle: string) {
const options: ChartOptions<'doughnut'> = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
},
},
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
},
},
tooltip: {
enabled: false,
},
},
};
return options;
}
And this is how to render the chart to the canvas element.
#ViewChild('MyChart', { static: true }) chart: ElementRef<HTMLCanvasElement>;
ngAfterViewInit() {
const ctx = this.chart.nativeElement.getContext('2d');
new Chart<'doughnut'>(ctx, {
type: 'doughnut',
data: {
labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
datasets: [
{
data: [300, 500, 100],
},
],
},
options: this.getPieChartOptions('doughnut'),
} as ChartConfiguration<'doughnut'>).draw;
}
Demo # StackBlitz
Does anybody knows how to "transpose" a waterfall graph in data studio?
By default, this graph shows vertical bars, but I want them to be horizontal, I think this should be easy.
I just want to turn it around, so that the bars are horizontal
Additionally, can I give a different color to each bar?
Thanks
I used to do this and i used HighchartsReact. => Result
<HighchartsReact
highcharts={Highcharts}
options={{
chart: {
type: 'waterfall',
inverted: true,
},
exporting: {
enabled: false,
},
title: {
text: '',
},
xAxis: {
type: 'category',
},
yAxis: {
title: {
text: '',
style: {
fontWeight: 'bold',
},
},
},
tooltip: {
pointFormat: '<b>{point.y:,.3f}</b>',
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: dataWaterfall,
dataLabels: {
enabled: true,
formatter: function() {
return Number(this.y).toFixed(3);
},
style: {
fontWeight: 'bold',
},
},
pointPadding: 0,
}],
}}
/>
I'm facing an issue. I'm building an EXTJ 6.2 modern app with Sencha architect 4.1. I'm using the grid component in my panel with a server loaded store. I'd like to color rows according to the data I have.
In classic, this is doable with
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, p, store) {
//some if statement here
}
I tried this in modern but it doesn't work. Does anyone know of another way or a hack that I could do color the rows? Or at best at least change the one-color background.
I'd really like to avoid using the list component if possible.
In modern you can use itemConfig to configure Ext.grid.Row.
Add the code bellow to a Sencha Fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
itemConfig: {
listeners: {
painted: function (row) {
var record = row.getRecord();
var color = record.get('color');
row.setStyle('background: '+color)
//if (color == 'red')
//row.setStyle('background: red');
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120
},
{
text: 'Color',
dataIndex: 'color',
flex: 1
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
the itemConfig part is what will do the trick.
After #Gwynge's comment i've created another example setting the color to each cell using the renderer config:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
},
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Color',
dataIndex: 'color',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
I hope this will help.
To color a row, the following code couldn't work in my project
itemConfig: {
listeners: {
painted: function(row) {
var record = row.getRecord();
}
}
}
row.getRecord doesn't work (getRecord() is not recognized as function)
I succeed to color a row from a cell
columns: [{
text: 'Name',
dataIndex: 'name',
width: 150,
sortable: true,
renderer: function(v, record, dataIndex, cell) {
var row = cell.up();
row.setStyle('background: ' + record.get('color') + ';');
return v;
}
}]
I found that neither of the solutions suggested in the accepted answer worked well for me. The solution using a painted event handler only works on first load. If the data is updated then the styling doesn't change so the rows are still coloured as per the original data. The renderer solution is unwieldy if you have a large number of columns or want to have multiple renderers.
For anyone else in the same boat, here's my solution:
itemConfig: {
viewModel: true,
bind: {
cls: '{record.IsEnabled === false ? "disabled" : ""}'
}
}
Here is a bar chart showing dates. I'm trying to stylize it and to save space (but also because it is useless).
Do you know how we remove the green square and the text "data by year" please?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
You can see the result in https://jsfiddle.net/uvat8u05/9/
Thank you !
You can disable the legend:
legend:{
enabled: false
},
Updated fiddle:
https://jsfiddle.net/uvat8u05/12/
I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8'
},
title: {
text: "Space Used by Users",
fontFamily: 'Helvetica'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.sizeText}',
style: {
fontSize: '11px'
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.sizeText}</b>'
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Usage',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
{
name: 'Shared Usage',
y: scope.item.sharedUsage,
sizeText: scope.item.sharedUsageSizeText
}
]
}]
});
How to change the font to default bootstrap?
You are only setting the font for the chart title. The below code sets the font globally for the pie chart.
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Helvetica'
}
}
});