i am making a dynamic chart bar in js - javascript

this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic
(function($) {
// "use strict";
var dlabChartlist = function()
{
var screenWidth = $(window).width();
let draw = Chart.controllers.line.__super__.draw;
var chartBar = function()
{
var options =
{
series: [
{
name: 'Project',
data: [50, 58, 70, 40, 10, 70, 20],
// radius: 12,
},
// {
// name: 'Cycling',
// data: [80, 40, 55, 20, 45, 30, 80]
// },
],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '57%',
endingShape: "rounded",
borderRadius: 12,
},
},
states: {
hover: {
filter: 'none',
}
},
colors:['#FFA26D'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 10,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 4,
curve: 'smooth',
lineCap: 'round',
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
position: 'bottom',
categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'white',
type: "vertical",
shadeIntensity: 0.2,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 50],
colorStops: []
}
},
tooltip: {
y: {
formatter: function (val) {
return val + " Days"
}
}
},
};
var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
chartBar1.render();
}
And this is where im showing index.html where i m showing this chart
<div class="tab-pane fade active show" id="monthly">
<div id="chartBar" class="chartBar"></div>
</div>
I don't have enough knowledge about js and i want this chart bar dynamic.....
and i m using mysql
how can i convert it into dynamic chart

Related

Custom gauge chart not working when resize

I need customize gauge highchart as
I customized it as jsfiddle code.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 2,
tickWidth: 10,
tickInterval: 10,
lineColor: '#fff',
minorTickInterval: null,
labels: {
enabled: false
},
minorTickPosition: 'inside',
tickPosition: 'inside',
tickPixelInterval: 10,
tickLength: '50',
tickColor: '#fff',
zIndex: 6,
minorTickWidth: 0,
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
rounded: false
},
gauge: {
dial: {
radius: '40',
backgroundColor: '#1d96e0',
baseWidth: 20,
topWidth: 1,
baseLength: '5%', // of radius
rearLength: '0%'
},
pivot: {
radius: '10',
backgroundColor: '#1d96e0'
}
},
series: {
dataLabels: {
enabled: true
}
}
},
};
https://jsfiddle.net/viethien/9L4xcho3/5/
But when I resize gauge chart, it display not good as
I am concern about calculate width of gauge panel to fit style.
Thanks
You can dynamically calculate and set tickLength property for the axis:
var allowChartUpdate = true;
var gaugeOptions = {
chart: {
type: 'solidgauge',
events: {
render: function() {
var tickLength = this.pane[0].group.getBBox().width / 4
if (allowChartUpdate) {
allowChartUpdate = false;
this.yAxis[0].update({
tickLength: tickLength
});
allowChartUpdate = true;
}
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/vbctd9ef/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update

How to add variable-pie chart to react project?

This is my code.How to render highcharts in react page. Included highcharts.js & variable-pie.js files. Is this code right ?? Once we load the chart, we didn't get any error. And we are only using two highchart library only. without using any other highchart react packages. Is this code is enough to display or render highcharts for reactjs?
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: 'variablepie',
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4,
)
.attr({
fill: 'rgba(0,0,0,0)',
stroke: '#2ec277',
left: -100,
'stroke-width': 1,
})
.add();
},
},
},
colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],
title: {
text: null,
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: '17pt Trebuchet MS, Verdana, sans-serif',
color: '#333333',
},
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: false,
},
showInLegend: true,
size: 185,
},
},
series: [
{
minPointSize: 10,
innerSize: '27%',
zMin: 0,
name: 'Job Match',
data: [
{
name: 'Job Title Match 99%',
y: 100,
z: 99,
},
{
name: 'Industry Match 98%',
y: 100,
z: 98,
},
],
},
],
};
return options;
}
return (
<div
className="chart-toggle-display"
id="pie-chart-profile"
style={style}
/>
)
I recommend you to use highcharts-react-official wrapper: https://github.com/highcharts/highcharts-react#readme
It will allow you to simply use Highcharts with React. Example: https://codesandbox.io/s/ovx6kqokqq
However, here you can find a working example without the wrapper: https://codesandbox.io/s/v6rrn7n745
import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import variablePie from "highcharts/modules/variable-pie.js";
variablePie(Highcharts);
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart("pie-chart-profile", options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: "variablepie",
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4
)
.attr({
fill: "rgba(0,0,0,0)",
stroke: "#2ec277",
left: -100,
"stroke-width": 1
})
.add();
}
}
},
colors: ["#2ec277", "#2db799", "#b7e886", "#6d5494", "#0077b4"],
title: {
text: null
},
legend: {
align: "right",
verticalAlign: "top",
layout: "vertical",
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: "17pt Trebuchet MS, Verdana, sans-serif",
color: "#333333"
}
},
plotOptions: {
series: {
stacking: "normal",
dataLabels: {
enabled: false
},
showInLegend: true,
size: 185
}
},
series: [
{
minPointSize: 10,
innerSize: "27%",
zMin: 0,
name: "Job Match",
data: [
{
name: "Job Title Match 99%",
y: 100,
z: 99
},
{
name: "Industry Match 98%",
y: 100,
z: 98
}
]
}
]
};
return options;
}
render() {
return <div className="chart-toggle-display" id="pie-chart-profile" />;
}
}
render(<App />, document.getElementById("root"));
I believe #pie-chart-profile should already be there in render() i.e the last return inside render()
componentDidMount() {
const options = this.highchartsOptions();
this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
const options = {
chart: {
// renderTo: 'container',
type: 'variablepie',
margin: [0, 0, 0, 0],
// marginLeft: -100,
events: {
load: function() {
this.renderer
.circle(
this.chartWidth / 2,
this.plotHeight / 2 + this.plotTop,
this.plotHeight / 4,
)
.attr({
fill: 'rgba(0,0,0,0)',
stroke: '#2ec277',
left: -100,
'stroke-width': 1,
})
.add();
},
},
},
colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],
title: {
text: null,
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 100,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
font: '17pt Trebuchet MS, Verdana, sans-serif',
color: '#333333',
},
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: false,
},
showInLegend: true,
size: 185,
},
},
series: [
{
minPointSize: 10,
innerSize: '27%',
zMin: 0,
name: 'Job Match',
data: [
{
name: 'Job Title Match 99%',
y: 100,
z: 99,
},
{
name: 'Industry Match 98%',
y: 100,
z: 98,
},
],
},
],
};
return options;
}
render() {
return (
<div
className="chart-toggle-display"
id="pie-chart-profile"
style={style}
/>
)
}

Stack column graph stack labels Highcharts

I am trying to implement stacked bar graph using Highcharts . The problem I am facing is : When the series data for a stack is all null , I want to display 0 as stack label ,but nothing is displayed as stack label .
And setting "minPointLength" to some value , the stack labels are getting overlapped with the stack graph . The distance between stack labels and the stack should vary dynamically but its not happening.
Here's my JSfiddle
https://jsfiddle.net/anandabhishe/6fuffmpt/10/
$(function() {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom: 50,
marginTop: 150,
height: 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y: 40,
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.5'
},
formatter: function() {
return '$' + this.value;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter:function() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
}
},
legend: {
enabled: false,
width: 600,
floating: false,
x: 50,
align: 'left',
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular',
opacity: '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
minPointLength: 20,
pointWidth: 30
}
},
series: [{
name: 'FTE-OpEx ',
data: [null, 30, 40, 70],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [null, 20, 30, 20],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'HW/SW',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'Other',
data: [null, 40, 40, 20],
pointWidth: 30
}]
});
});

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}
You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts - Custom format for dateTimeLabelFormats (1st hour, 2nd hour....)

I am using Highcharts with Area graph.
How can I customize xAxis label as hourly basis with suffix as 1st, 2nd, 3rd etc...?
Online Demo
Current format:
01th hour, 02th hour, 03th hour ....
This has to be changed as below:
1st hour, 2nd hour, 3rd hour....
I have tried to convert as above by using ordinal method, but not working though...
May be placing the ordinal script is wrong?
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
Full Code:
$(function (n) {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#000",
}
},
labels: {
style:{ color: '#000' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#000",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('#areaChartTwoWay-time').highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Hours', },
type: 'datetime',
min:Date.UTC(2016,04,16,1,0,0,0),
minRange: 12 * 3600 * 500,
dateTimeLabelFormats: {
hour: '%Hth hour',
},
},
yAxis: {
tickInterval: 30,
title: { text: 'Total views', },
offset:0,
},
series: [{
name: 'Unique open',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [88, 68, 79, 39, 48, 69, 69, 18, 40, 62, 91, 61, 39],
legendIndex:1,
pointInterval: 3600 * 500,
pointStart:Date.UTC(2016,04,16,1,0,0,0),
}, {
name: 'Forwards',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [3, 8, 15, 12, 61, 32, 43, 18, 9, 12, 22, 18, 12],
legendIndex:0,
pointInterval: 3600 * 500,
pointStart:Date.UTC(2016,04,16,1,0,0,0),
}]
}));
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
You could call another function to get the ordinal. A quick google found this method:
function getGetOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
This takes a number and returns a string, which is made up of the number with he correct ordinal appended.
This won't work with dateTimeLabelFormats though. For your use, you could use a simple label formatter.
I've updated your online demo here also:
http://jsfiddle.net/6nz0sod1/2/
Hope this helps
Source: https://ecommerce.shopify.com/c/ecommerce-design/t/ordinal-number-in-javascript-1st-2nd-3rd-4th-29259

Categories