I am using nvd3.js to create a pie chart.
I would like to export this chart to Excel.
For export I am using FileSaver.js
My HTML looks like:
<body ng-controller="MainCtrl">
<button ng-click="exportData()">click</button>
<div id="charts">
<nvd3 options="options" data="data"></nvd3>
</div>
</body>
My code looks like:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.exportData = function () {
alert("function call");
var blob = new Blob([document.getElementById('charts').innerHTML ], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 10,
right: 35,
bottom: 5,
left: 0
}
},
}
};
$scope.data = [
{
key: "suraj",
y: 5
},
{
key: "darshan",
y: 2
},
{
key: "kapil",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
});
Thanks for your help!
Related
chart
const data = {
labels: Array(coordinates.length).fill("l"),
datasets: buildDataset(),
options: {
animation: false,
scales: {
// ???????
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
},
maintainAspectRatio: false,
scales: {
myScale: {
position: 'left',
}
},
elements: {
point:{
radius: 0
}
}
}
}
return (
<Chart>
<Line
data={data}
width={50}
height={20}
options={data.options}>
</Line>
</Chart>
)
// ~~~~~
let obj = {
label: stops[0].miles == 0 ? index : index + 1,
data: points,
backgroundColor: colors[index],
tension: 0.4,
fill: true
}
These charts are built from an array of obj objects. The points variable that data refers is an array of object like: [{x: 0, y: 10257}, {x: 1, y: 10245}]
How do I get my line chart to display these different datasets side by side? I assume it has something to do with the scales parameter but wasn't able to find anything that worked in the docs.
Thanks!
For the object notation to work chart.js needs values to plot them against (not the index in the array) so you cant just provide an array containing only the value l.
You can either provide a labels array containing increasing numbers to which you match it or remove it and set your x scale to linear.
Labels example:
var options = {
type: 'line',
data: {
labels: [0, 1, 2, 3],
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 4
}, {
x: 1,
y: 6
}, {
x: 2,
y: 2
}],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 2,
y: 2
}, {
x: 3,
y: 3
}],
borderColor: 'blue'
}
]
},
options: {
scales: {}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
Linear example:
var options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 4
}, {
x: 1,
y: 6
}, {
x: 2,
y: 2
}],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 2,
y: 2
}, {
x: 3,
y: 3
}],
borderColor: 'blue'
}
]
},
options: {
scales: {
x: {
type: 'linear'
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I could see there are plugins available for d3 charts and highcharts to get used in Sencha ExtJS. But i couldnt find Any for canvasjs. Is there a way to integrate CanvasJS with Sencha Ext JS.
CanvasJS only needs a div to render their stuff into.
One super simple way could be like that:
Ext.create('Ext.Component', {
layout: 'fit',
width: 500,
height: 500,
renderTo: Ext.getBody(),
border: 1,
style: {
backgroundColor: '#EEEEEE',
borderStyle: 'solid',
borderWidth: '1px'
},
listeners: {
afterrender: function (cmp) {
Ext.Loader.loadScript({
url: 'https://canvasjs.com/assets/script/canvasjs.min.js',
onLoad: function () {
console.log('ok, lets create the chart..');
cmp.createChart();
},
onError: function () {
console.log('canvasJS not loaded');
}
});
}
},
createChart: function () {
var htmlIdOfCmp = this.id;
var chart = new CanvasJS.Chart(htmlIdOfCmp, {
animationEnabled: true,
theme: "light2",
title: {
text: "Simple Line Chart"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: [{
y: 450
}, {
y: 414
}, {
y: 520,
indexLabel: "highest",
markerColor: "red",
markerType: "triangle"
}, {
y: 460
}, {
y: 450
}, {
y: 500
}, {
y: 480
}, {
y: 480
}, {
y: 410,
indexLabel: "lowest",
markerColor: "DarkSlateGrey",
markerType: "cross"
}, {
y: 500
}, {
y: 480
}, {
y: 510
}]
}]
});
chart.render();
}
});
https://fiddle.sencha.com/#view/editor&fiddle/2k59
This is an example for ExtJS6.
I am using Angular-nvD3 in my Charts and I would like to change the background of this chart like the picture example. Can anyone help me please?
Here its the HTML code:
<div class="col-md-6">
<nvd3 options="optionsrigidez" data="datarigidez" class="with-3d-shadow with-transitions"></nvd3>
</div>
And here its the angular params:
1. Options:
$scope.optionsrigidez = {
chart: {
type: 'lineChart',
height: 250,
reduceXTicks: true, // if false a tick will show for every data point
margin: {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function (d) { return d.x; },
y: function (d) { return d.y; },
useInteractiveGuideline: true,
dispatch: {
stateChange: function (e) { console.log("stateChange"); },
changeState: function (e) { console.log("changeState"); },
tooltipShow: function (e) { console.log("tooltipShow"); },
tooltipHide: function (e) { console.log("tooltipHide"); }
},
yDomain: [0.0, 100.0],
showLegend: false,
xAxis: {
axisLabel: 'Data da análise',
tickFormat: function (d) {
return daysOfReport[d];
},
rotateLabels: -1
},
yAxis: {
axisLabel: 'kV',
tickFormat: function (d) {
return d3.format('.01f')(d);
},
axisLabelDistance: -10
},
callback: function (chart) {
//console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Rigidez Dielétrica - Calota'
},
caption: {
enable: true,
html: '<b>Gráfico 3.</b> É uma medida da capacidade do óleo resistir à solicitação elétrica. Revela também a presença de impurezas polares como a água e outros oxigenados e sólidos (NBR 6869). Fonte: <a href="http://www.filtroil.ind.br/analise-de-oleo-isolante">Filtroil.<a/>',
css: {
'text-align': 'justify',
'margin': '10px 13px 0px 7px'
}
}
};
Data:
function rigidez_function() {
var rigidez = [];
for (var i = 0; i < $scope.RelatorioOleo_analisesFQ.length; i++) {
rigidez.push({ x: i, y: $scope.RelatorioOleo_analisesFQ[i].calota });
}
//Line chart data should be sent as an array of series objects.
return [
{
values: rigidez, //values - represents the array of {x,y} data points
key: 'Rigidez Dielétrica', //key - the name of the series.
color: '#5A5A5A', //color - optional: choose your own line color.
strokeWidth: 2,
//classed: 'dashed'
}
];
};
$scope.datarigidez = rigidez_function();
Probably a bit late, but yes you can!
You have to create a MultiChart and draw the colored zones as 'stacked areas'. I've created a plunk here: http://plnkr.co/hW3Anw
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
...
testdata[1].type = "area"
testdata[1].yAxis = 1
testdata[1].values = [{x: 0, y: -0.5}, {x: 55, y: -0.5}]
testdata[2].type = "area"
testdata[2].yAxis = 1
testdata[2].values = [{x: 0, y: -5}, {x: 55, y: -5}]
...
I am using nvd3 chart in AngularJS. I am getting the data like series of [{"09/01/2015", 5},...]. i.e. [{mm/dd/yyyy, decimal}]. After checking NVD3 tutorial looks like date needs to be in epoch format, which is not possible for my case. I dont see any reference for that. How can make a line chart with Y axis some decimal values and X axis month-year or complete date without converting to epoch format.
Any reference or tutorial also would be a great help. Thanks in advance...
My Code:
var appCntrl = angular.module("AppCntrl",['nvd3']);
appCntrl.controller("QPBDController", function($scope){
$scope.score = {
"data":[7.97,8.93,6.53,4.87,4.98,4.56],
"term":["09/01/2015","10/01/2015","11/01/2015","12/01/2015","01/01/2016","02/01/2016"]
};
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: true,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
tickFormat: function(d) {return d3.time.format("%b %d, %Y")(d);}
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -10
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
},
subtitle: {
enable: true,
text: 'Subtitle for simple line chart.',
css: {
'text-align': 'center',
'margin': '10px 13px 0px 7px'
}
},
caption: {
enable: true,
html: '<b>Figure 1.</b> .',
css: {
'text-align': 'justify',
'margin': '10px 13px 0px 7px'
}
}
};
$scope.data = sinAndCos();
var str = ["s"];
/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < $scope.score.term.length; i++) {
sin.push({x: $scope.score.term[i], y: $scope.score.data[i]});
sin2.push({x: $scope.score.term[i], y: $scope.score.data[i]});
cos.push({x: $scope.score.term[i], y: $scope.score.data[i]});
}
console.log(sin);
//Line chart data should be sent as an array of series objects.
return [
{
values: sin, //values - represents the array of {x,y} data points
key: 'Sine Wave', //key - the name of the series.
color: '#ff7f0e', //color - optional: choose your own line color.
strokeWidth: 2,
classed: 'dashed'
},
{
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
},
{
values: sin2,
key: 'Another sine wave',
color: '#7777ff',
area: true //area - set to true if you want this line to turn into a filled area chart.
}
];
};
});
index.html:
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="node_modules/d3/d3.min.js"></script>
<script src="node_modules/nvd3/build/nv.d3.min.js"></script>
<script src="node_modules/angular-nvd3/dist/angular-nvd3.min.js"></script>
<link href="node_modules/nvd3/build/nv.d3.min.css" rel="stylesheet">
<script src="bizkpi.js"></script>
<script src="js/controllers.js"></script>
<nvd3 options="options" data="data"></nvd3>
The above code shows an error in console like below and nothing comes up in GUI
TypeError: n.getMonth is not a function
at Yn.A.b (d3.min.js:1)
at t (d3.min.js:1)
at SVGTextElement.$scope.options.chart.xAxis.tickFormat (controllers.js:29)
at SVGTextElement.arguments.length.each.function.n.textContent (d3.min.js:3)
at d3.min.js:3
at Y (d3.min.js:1)
at Array.Co.each (d3.min.js:3)
at Array.Co.text (d3.min.js:3)
at SVGGElement.<anonymous> (d3.min.js:5)
you will have to format the date as follows:
vm.chart.options.chart.xAxis.tickFormat = function(d) {return d3.time.format("%b %d, %Y")(d);};
in your options.chart you should have :
lines: {
xScale: d3.time.scale(),
},
I think you should set the ticks and tickValues as well for example..
vm.chart.options.chart.xAxis.ticks = d3.time.monday;
vm.chart.options.chart.xAxis.tickValues = function(d) {return d3.time.monday.range(from, to, 2);};
};
I'm using multichart with line and scatterplot. The line chart works fine but the scatterplot data does not plot correctly for the x-axis data.
Can someone please provide a working example other than the one on github? Here is the selections:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
duration: 500,
xAxis: {
ticks: 10,
tickFormat: function (d) {
return d3.format(',10d')(d);
}
},
yAxis1: {
ticks: 10,
tickFormat: function (d) {
return d3.format('10d')(d);
}
}
}
};
function generateData() {
var data1 = [{ x: 0, y: 25 }, { x: 25, y: 25 }, { x: 25, y: 0 }];
var data2 = [{ x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }];
var data3 = [{ x: 0, y: 75 }, { x: 75, y: 75 }, { x: 75, y: 0 }];
var data4 = [{ x: 0, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 0 }];
var scatter = [{ x: 10, y: 30, size: Math.random(), shape: 'circle' }, { x: 20, y: 50, size: Math.random(), shape: 'circle' }, { x: 30, y: 80, size: Math.random(), shape: 'circle' }];
var testdata = [];
testdata.push({ key: 'Stream1', values: data1 });
testdata.push({ key: 'Stream2', values: data2 });
testdata.push({ key: 'Stream3', values: data3 });
testdata.push({ key: 'Stream4', values: data4 });
testdata.push({ key: 'Stream5', values: scatter });
testdata[0].type = 'line';
testdata[0].yAxis = 1;
testdata[1].type = 'line';
testdata[1].yAxis = 1;
testdata[2].type = 'line';
testdata[2].yAxis = 1;
testdata[3].type = 'line';
testdata[3].yAxis = 1;
testdata[4].type = 'scatter';
testdata[4].yAxis = 1;
return testdata;
}
I also encounter this problem, and my workaround is to add a dummy scatter series with the start and end point only, and the series color is transparent.
For example:
line series: 1,2,3,4,5...100
scatter 1: 5, 67, 83
dummy scatter: 1, 100
Then the x-domain of the scatter will scale with the line series