I want to use Guage chart in my application. Anybody know ihow i use it?
You can use C3.js ( based on D3);
Gauge Example
can you please provide me an example for guage chart
Did you install d3.js and c3.js?
https://www.npmjs.com/package/d3
https://www.npmjs.com/package/c3
Then in your page.ts import them:
import * as d3 from "d3";
import * as c3 from "c3";
ngOnInit() {
this.chart_gauge = c3.generate({
bindto: '#chart_gauge',
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
gauge: {
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
threshold: {
values: [30, 60, 90, 100]
}
},
size: {
height: 180
}
});
}
in html:
<link href="/assets/c3.css" rel=“stylesheet”>
<h2>Gauge Chart</h2>
<svg class=“chart” id=“chart_gauge”></svg>
Or follow the example I linked in my previous post.
Html
<ion-content padding>>
<svg class=“chart” id=“chart_gauge”
.ts file
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { Observable } from ‘rxjs/Observable’;
import { Component, OnInit } from ‘@angular/core’;
import * as d3 from “d3”;
import * as c3 from “c3”;
@Component({
selector: ‘page-demo’,
templateUrl: ‘demo.html’,
})
export class DemoPage implements OnInit {
title = ‘Pie Chart’;
chart_gauge:any;
autoRefreshTime: any = 1;
autoRefreshTimer: any = 30;
subscription: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.Refresh();
this.pkmethod();
}
ngOnInit() {
}
Refresh() {
this.autoRefreshTimer = 30;
}
pkmethod(){
this.chart_gauge = c3.generate({
bindto: '#chart_gauge',
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
gauge: {
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90, 100]
}
},
size: {
height: 180
}
});
}
this is my code, i am unable to see guage chart please help
I see tag closing errors in your html.
What errors do you get?
All tags are properly closed. Does it need to import d3 and c3 in module.ts file? I did not get any error but my chart is also not showing
in your .scss file, do you have 
.chart{
height: 300px;
width: 100%;
}
No need to import into module.ts
Try c3.generate within ngOnInit
Thanku so much its working now
--------- Neat-O --------
i also want to convert this chart in pdf … How do i achieve this?
I do not know offhand.
But I did see some results with a quick google search.
hey i have same problem the chart doesn’t appear. how do you solve this ?
Try c3.generate within ngOnInit