I am trying to create a mixed chart with the angular plugin instead of plain javascript. For that, I am using this library http://jtblin.github.io/angular-chart.js/
In plain javascript it is created with something similar to this:
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
},
{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show: true,
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show:true,
}
}
]
}
}
});
It can be seen here: http://plnkr.co/edit/TvY5tz?p=preview
I have tried tons of ways to do the same thing with angular-chart but I have been unable to do so. Has anyone been able to create any mixed chart type with the library? If so, please share any example.
Thanks in advance.
Not possible right now, there is an open issue to track this: https://github.com/jtblin/angular-chart.js/issues/336
It is now possible with 1.0.0-alpha8, See here on github
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
I am displaying line chart using chart js in angular. In x-axis I am showing date which is dynamic which is coming from api. I tried "type:'linear'" but still it is not working.
I want that dates which I am displaying should be uniform.
my component.html
<canvas id="myChart"></chart>
my component.ts file
ngOnInit(){
this.chart = document.getElementById('myChart')
this.loadchart();
}
loadchart(){
new Chart(this.chart, {
type: 'line',
data: {
datasets: [{
data: this.carArray,
label: 'No. of car',
backgroundColor: 'rgba(255, 99, 132, 1)',
fill:true
},
{
data: this.priceArray,
label: 'price',
backgroundColor: 'rgba(255, 99, 132, 1)',
fill:true
}],
labels: this.dateArray,
},
options: {
elements:{
point: {
radius:1
},
},
plugins: {
legend: {
display:true
}
},
responsive: true,
scales: {
y: {
grid: {
borderDash:[1,2],
},
brginAtZero: true
},
x: {
ticks:{
color: 'blue'
},
grid: {
tickColor: 'red',
borderDash:[1,2],
},
brginAtZero: true
}
}
}
})
}
I want to display uniform dates on x axis.
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 using echart to create bar I have this question:
I want to have fixed height and width to only show 5 rows when its more than 5 it have vertical scroll I tried to do it in html but the numbers/ xAxis it disappear and only appears when the user pull the scroll down so I need to make it in echart
option = {
barWidth: '30%',
barCategoryGap :'10%',
title: {
text: 'test',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '7%',
right: '4%',
bottom: '40%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Web', 'Web', 'web', 'web', 'web','web', 'web', 'web']
},
series: [
{
name: 'test',
type: 'bar',
data: [ 100, 80,30,50, 70, 100, 80,30]
},
]
};
I know this is an old question, check datazoom option.
https://echarts.apache.org/examples/en/editor.html?c=area-simple
https://echarts.apache.org/examples/en/#chart-type-dataZoom
To make the chart scrollable, add this to your chart option configuration.
You can get the scrollbar to appear on the right with this configuration.
dataZoom: [
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
start: 25,
end: 100,
handleSize: 20,
},
]
Using this configuration, you can use the mouse cursor to move the chart.
dataZoom:[ {
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 95,
end: 100,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true
}]
By using this yAxisIndex key, you can place the scrollbar on the y-axis, and by using this xAxisIndex key, you can place scrollbar on the x-axis and Other properties can be configured based on that.
I'm trying to implement a simple grid using jqGrid, my first read example of my own.
Here is my JSON code:
$(document).ready(function() {
$("#editgrid").jqGrid({
url: '<%= ResolveUrl("~/User/index") %>',
datatype: "json",
myType: 'GET',
colNames: ['UserId', 'Surname', 'Forename', 'Pax', 'Mobile', 'Active', 'Email'],
colModel: [
{ name: 'UserId', index: 'UserId', width: 80, editable: true, editoptions: { size: 10} },
{ name: 'Surname', index: 'Surname', width: 90, editable: true, editoptions: { size: 25} },
{ name: 'Forename', index: 'Forename', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Pax', index: 'Pax', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Mobile', index: 'Mobile', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Active', index: 'Active', width: 55, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
{ name: 'Email', index: 'Email', width: 100, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "20"} }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'Surname',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "detail.aspx"
});
$("#bedata").click(function() {
var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
if (gr != null) jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
else alert("Please Select Row");
});
});
I have the following HTML :
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
But when I run all this I get client code breaking within jquery-1.5.2.js (Microsoft JScript runtime error: Object doesn't support this property or method) where I can do nothing about this, this is probably of no use but here is the error below, stops at the finally part :
// resolve with given context and args
resolveWith: function( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );
}
}
finally {
fired = [ context, args ];
firing = 0;
}
}
return this;
},
Must be something simple making this crash out on me, any ideas anyone?