As shown in this image link above. Can any body please tell me how can I add this bold horizontal line below google column chart where Sales Date and Narration are written in the image above.
Following is my draw chart function.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sales Date');
data.addColumn('number', 'Anomaly');
data.addColumn('number', 'NIV');
data.addColumn('number', 'GIV');
for (var i = 0; i < graphData.length; i++) {
data.addRow([graphData[i].date, graphData[i].anomaly, graphData[i].NIV, graphData[i].GIV]);
}
// Set chart options
var options = {
'title': 'Details of anomaly',
'width': 700,
'height': 300,
'isStacked': true,
'fontSize': 10,
'legend': { position: 'bottom', maxLines: 1 },
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Related
I have an x-range chart, and I need to add custom components (SVG icons) at the start of each data point ("x" prop value). Something like this (red circles are where custom components should be):
My idea is to place a custom component with position absolute, but I can't figure out how to transform timestamp values of the X axis to pixels. Or maybe there is a better solution?
Codesandbox demo
There are multiple ways to achieve what you want:
A. You can get a chart reference and use Axis.toPixels method to calculate the required coordinates:
export default function Chart() {
const chartComponentRef = useRef(null);
const [x1, setX1] = useState(0);
useEffect(() => {
if (chartComponentRef) {
const chart = chartComponentRef.current.chart;
const xAxis = chart?.xAxis[0];
const x1 = xAxis?.toPixels(Date.UTC(2022, 7, 10));
setX1(x1);
}
}, [chartComponentRef]);
return (
<div style={{ position: "relative" }}>
<HighchartsReact
ref={chartComponentRef}
highcharts={Highcharts}
options={staticOptions}
/>
<div style={{ position: "absolute", bottom: 70, left: x1 }}>ICON</div>
</div>
);
}
Live demo: https://codesandbox.io/s/highcharts-react-custom-componentt-ysjfh8?file=/src/Chart.js
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
B. You can also get coordinates from a point:
useEffect(() => {
if (chartComponentRef) {
const chart = chartComponentRef.current.chart;
const point = chart.series[0].points[2];
setX1(chart.plotLeft + point.plotX);
}
}, [chartComponentRef]);
Live demo: https://codesandbox.io/s/highcharts-react-custom-componentt-f7nveg?file=/src/Chart.js
C. Use Highcharts API to render and update the custom icons:
const staticOptions = {
chart: {
type: "xrange",
height: 200,
events: {
render: function () {
const chart = this;
const r = 10;
const distance = 25;
chart.series[0].points.forEach((point, index) => {
if (!point.customIcon) {
point.customIcon = chart.renderer
.circle()
.attr({
fill: "transparent",
stroke: "red",
"stroke-width": 2
})
.add();
}
point.customIcon.attr({
x: point.plotX + chart.plotLeft + r,
y:
point.plotY +
chart.plotTop +
(index % 2 ? distance : -distance),
r
});
});
}
}
},
...
};
Live demo: https://codesandbox.io/s/highcharts-react-custom-componentt-f-87eof0?file=/src/Chart.js
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
I am trying to download MUI table in React using JSPDF and JSPDF Autotable library ,but the rows inside the accordion is getting downloaded in single row.
How can I download the inner rows in the table in PDF format?
My code is as below:
import React, { Component } from 'react';
import { jsPDF } from "jspdf";
import 'jspdf-autotable';
import './DownloadPdf.scss';
class DownloadPdf extends Component {
pdfGenerate=(props)=>{
const unit = "px";
const size = "A4"; // Use A1, A2, A3 or A4
const orientation = "portrait"; // portrait or landscape
const doc = new jsPDF (orientation, unit, size);
doc.text(30, 80, "Amortization Schedule")
doc.autoTable({
html: "#amortization-table",
includeHiddenHtml: true
headStyles: {
fontStyle: "normal",
font: "Helvetica",
fillColor: "#333",
textColor: "#fff",
fontSize: 12,
},
startY: 100,
columnStyles: {0: {cellWidth: 'auto', minCellHeight: 20},1: {cellWidth: 'auto'},2: {cellWidth: 'auto'},3: {cellWidth: 'auto'},4: {cellWidth: 'auto'}},
showHead: "everyPage",
didDrawPage: function (data) {
// Header
doc.addImage(img, 'png', 10, 10, 150, 45)
// Footer
var str = "Page " + doc.internal.getNumberOfPages();
doc.setFontSize(10);
// jsPDF 1.4+ uses getWidth, <1.4 uses .width
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height
? pageSize.height
: pageSize.getHeight();
doc.text(str, data.settings.margin.left, pageHeight - 10);
}
})
doc.save('test.pdf')
}
render() {
return (
<div className="pdf-container">
<span className="pdf-icon"></span>
<a onClick = {this.pdfGenerate}>Download PDF</a>
</div>
);
}
}
export default DownloadPdf;
///
I am trying to use the
Sample Collapsible Table
render(){
let conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load:function(){
var series = this.series[0];
setInterval(() =>{
var x = new Date().getTime() // current time
y = this.props.y
series.addPoint([x,y], true, true);
}, 900);
}
}
},
title: {
text: 'Live random data'
}}}
I am not able to access this.props.y inside the load function and not even any constructor variable.
I have tried using arrow functions instead of function and then the graph display nothing.
Thanks for the help in advance
this in your arrow function is bound to the chart object, not the component.
You can cache this in the variable in the render and then use it in the timeout.
render(){
const component = this
let conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load:function(){
var series = this.series[0];
setInterval(() =>{
var x = new Date().getTime() // current time
y = component.props.y
series.addPoint([x,y], true, true);
}, 900);
}
}
},
title: {
text: 'Live random data'
}}}
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
$(document).ready(function () {
google.setOnLoadCallback(drawChartCountry);
$("a[href='#tab11']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawChartCountry
});
});
$("a[href='#tab21']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawChartDevice
});
});
$("a[href='#tab31']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawChartVersion
});
});
function drawChartCountry() {
$.post('/AppDashboard/GetCountryChart', {},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'Country');
tdata.addColumn('number', 'No.of Users');
for (var i = 0; i < data.length; i++) {
tdata.addRow([data[i].Name, data[i].Value]);
}
var options = {
title: "",
is3D: true,
//pieSliceText: 'label',
pieStartAngle: 100,
'width': 450,
'height': 350
};
var chart = new google.visualization.PieChart(document.getElementById('chart_country'));
chart.draw(tdata, options);
});
}
function drawChartDevice() {
$.post('/AppDashboard/GetDeviceChart', {},
function (data) {
var devicedata = new google.visualization.DataTable();
devicedata.addColumn('string', 'Device');
devicedata.addColumn('number', 'No.of Users');
for (var i = 0; i < data.length; i++) {
devicedata.addRow([data[i].Name, data[i].Value]);
}
var options = {
title: "",
is3D: true,
pieStartAngle: 100,
'width': 450,
'height': 350
};
var chart = new google.visualization.PieChart(document.getElementById('chart-device'));
chart.draw(devicedata, options);
});
}
function drawChartVersion() {
$.post('/AppDashboard/GetVersionChart', {},
function (data) {
var versiondata = new google.visualization.DataTable();
versiondata.addColumn('string', 'Version');
versiondata.addColumn('number', 'No.of Users');
for (var i = 0; i < data.length; i++) {
versiondata.addRow([data[i].Name, data[i].Value]);
}
var options = {
title: "",
is3D: true,
//pieSliceText: 'label',
pieStartAngle: 100,
'width': 450,
'height': 350
};
var chart = new google.visualization.PieChart(document.getElementById('chart-version'));
chart.draw(versiondata, options);
});
}
});
I have set google chart inside a widget but the sad part is responsive is not working.When i resize it to mobile size the chart data exceeds my widget.Kindly help me with this and if you need more info lemme know,thanks in advance :)
I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.
any idea how to Redraw the map on click on a button.
I did the similar thing on my project.
You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.
Here's the full code.
function callback($this) {
var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
img.add();
img.css({
'cursor': 'pointer'
});
img.attr({
'title': 'Pop out chart'
});
img.on('click', function () {
var params = {
chart: {
spacingLeft: 100,
spacingRight: 100,
renderTo: 'myChart'
},
title: {
text: 'title'
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
}
new Highcharts.Chart(params, function (chart) {});
})
}
new Highcharts.Chart(charts.params, callback);
// where charts.params is object which contains options for chart