Related
I need to reduce amount of x-axis labels because now you can see what is going on:
Is it possible to adjust the step on the x-axis? I didn't find it in the documentation. In my case, it automatically counts by 200, I would like to control this.
This is my data:
data = [
{
name: 'Email Invite',
value: 6200,
tooltip: 'Total raised by Email Invite: $6200'
},
{
name: 'Text Invite',
value: 1000,
},
{
name: 'Extra Features',
value: 1800,
},
{
name: 'Snap Store',
value: 2400,
},
{
name: 'Social Media',
value: 4100,
},
]
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'bar-chart',
"config": {
"style": {
"cell": {
stroke: "#E2E8F0"
}
}
},
data: {
"values": this.data
},
"mark": {"type": "bar", "cornerRadiusTopLeft": 8, "cornerRadiusTopRight": 8},
encoding: {
x: {
field: 'b',
type: 'quantitative',
axis: {
labels: true,
labelAngle: 0,
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 10,
},
scale: {
paddingInner: 0.2,
paddingOuter: 0.1
},
sort: { field: 'c' }
},
y: {
field: 'a',
type: 'nominal',
axis: {
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 16,
labelOffset: 3,
}
},
color: {field: 'c', scale: {range: [`#000`]}, legend: null},
tooltip: {field: 'd', type: 'ordinal'}
},
width: "container",
height: 250
};
Thanks in advance!
This is controlled by tick attributes.
You can set a "tickCount", "tickMinStep" or even the values themselves via "values".
https://vega.github.io/vega-lite/docs/axis.html#ticks
I am trying to reduce the space between bars, and I am pretty sure it has to be within this piece of code. I removed the code that displays the legend and yAxes assuming I would not need to edit those parts.
barchart = new Chart(myChart, {
type:'bar',
data:{
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data:{{ data.y_vals }},
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'#000',
barPercentage: 1.0,
categoryPercentage: 1.0
}]
},
options:{
// legend is here
},
scales: {
// yAxes is here
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
You can set the category and bar percentages to 1:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'blue',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
EDIT:
Make sure you have at least chart.js version 2.9 installed since any version below its not implemented yet
Currently I have my HighChart Line Graph as follows:
<script language="javascript" type="text/javascript">
var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];
// Chart data
var seriesData = [{
name: 'Total Accounts',
data: [5, 9, 12, 15, 17, 22, 28, 30, 34, 36, 38, 46]
}, {
name: 'Total Songs',
data: [2, 3, 4, 5, 8, 12, 17, 23, 30, 34, 44]
}, {
name: 'Total Recordings',
data: [15, 19, 22, 29, 32, 34, 36, 40, 42, 44, 45]
}, {
name: 'Total Writers',
data: [11, 13, 15, 18, 24, 28, 30, 34, 38, 40, 42, 45]
}];
var dashboardChart = $('#dashboard_chart');
if (dashboardChart.length) {
dashboardChart.highcharts({
credits: false,
colors: highColors,
chart: {
backgroundColor: 'white',
className: '',
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift',
marginTop: 45,
marginRight: 1,
},
title: {
text: null
},
xAxis: {
gridLineColor: '#EEE',
lineColor: '#EEE',
tickColor: '#EEE',
categories: ['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
min: 0,
tickInterval: 5,
gridLineColor: '#EEE',
title: {
text: 'Total'
}
},
plotOptions: {
spline: {
lineWidth: 3,
},
area: {
fillOpacity: 0.2
}
},
exporting: {
enabled: false
},
legend: {
enabled: true,
floating: false,
align: 'right',
verticalAlign: 'top',
x: -5
},
series: seriesData
});
}
</script>
Here is how its displayed in my HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="dashboard_chart" style="height: 500px; width:100%;"></div>
</div>
</div>
The main issue is that the graph does not fit the whole container for the tablet in both portrait and landscape. Does anyone have any suggestions? As to how I could make it responsive without adding in-line styles?
You can set options for responsive charts in high charts initialization. It allows you to specify different widths and height and you can specify different values such as hiding labels or showing something.
dashboardChart.highcharts({
options:values,
options:values,
....
....
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
})
Here's the link to their official docs : https://www.highcharts.com/demo/responsive
Pretty new to this stuff, so any help is greatly appreciated. To start off with, here is my JSON file's contents:
[
{
"drg": "NONSPECIFIC CEREBROVASCULAR DISORDERS W MCC",
"approved": 124,
"denied": 38
},
{
"drg": "SEIZURES WO MCC",
"approved": 138,
"denied": 26
},
{
"drg": "CHRONIC OBSTRUCTIVE PULMONARY DISEASE W CC",
"approved": 352,
"denied": 61
},
{
"drg": "CHEST PAIN",
"approved": 246,
"denied": 44
},
{
"drg": "TRANSIENT ISCHEMIA",
"approved": 205,
"denied": 37
},
{
"drg": "OTHER DISORDERS OF NERVOUS SYSTEM W CC",
"approved": 133,
"denied": 23
},
{
"drg": "DIABETES W MCC",
"approved": 151,
"denied": 27
},
{
"drg": "CARDIAC ARRHYTHMIA CONDUCTION DISORDERS W CC",
"approved": 336,
"denied": 55
},
{
"drg": "HYPERTENSION WO MCC",
"approved": 177,
"denied": 29
},
{
"drg": "POISONING TOXIC EFFECTS OF DRUGS WO MCC",
"approved": 144,
"denied": 24
}
]
My stacked bar chart, which worked fine with a CSV file, keeps ignoring the "denied" value. I suspect the issue has something to do with my formatting of the "processed_json.push()" portion of my code. It renders the approved value stacked on top of itself. Here is the script file:
<script>
$(document).ready(function() {
var processed_json = new Array();
$.getJSON('/dashboard-test-data/denied-percentage-2015-chart.json', function(data) {
for (i = 0; i < data.length; i++) {
processed_json.push([data[i].drg, data[i].approved, data[i].denied]);
}
$('#denied-percentage-2015-chart').highcharts({
chart: {
type: 'bar'
},
credits: {
text: 'Vortext Analytics',
href: 'http://www.vortextanalytics.com'
},
title: {
text: 'Top 10 DRG by Denial Percentage 2015'
},
xAxis: {
type: 'category',
},
navigation: {
menuStyle: {
border: '1px solid #ddd',
boxShadow: 'none',
},
menuItemStyle: {
padding: '5px 1.5rem',
},
menuItemHoverStyle: {
backgroundColor: '#f7f7f9',
color: '#666'
},
buttonOptions: {
height: 40,
width: 46,
symbolX: 23,
symbolY: 22,
x: 10,
y: -15,
symbolSize: 13,
}
},
yAxis: {
min: 0,
title: {
text: 'Total Records'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
}
},
legend: {
align: 'left',
x: 0,
verticalAlign: 'bottom',
y: 22,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
reversed: true,
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y:,0f} of {point.stackTotal:,0f} <b>({point.percentage:.1f}%)</b><br />',
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textOutline: 'none',
fontWeight: 'normal',
fontSize: '9px'
}
},
pointWidth: 20,
}
},
series: [{
name: 'approved',
color: '#55B4E4',
data: processed_json,
}, {
name: 'denied',
color: '#005079',
data: processed_json,
}],
});
});
});
</script>
Here is what the end product should produce (screen grab from my csv version):
Correct
And here is what I'm getting from the JSON file: incorrect
Any assistance or guidance is greatly appreciated. Thanks.
Have a look at highchart's stacked bar chart example. For each series, data contains the array of values for that series.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
In your case, instead of creating the processed_json array of objects, you should create separate arrays containing each series' values.
Change the loop this way:
var xAxis = []
, approvedCount = []
, deniedCount = []
for (i = 0; i < data.length; i++) {
xAxis.push(data[i].drg);
approvedCount.push(data[i].approved);
deniedCount.push(data[i].denied);
Then adapt the chart's instantiation accordingly:
// (...)
xAxis: {
categories: xAxis
},
// (...)
series: [{
name: 'approved',
color: '#55B4E4',
data: approvedCount,
}, {
name: 'denied',
color: '#005079',
data: deniedCount,
}],
// (...)
Here I have the following JSON data , using this I have to create the Chart View.
Ext.data.JsonP.callback12({"totalCount":0,"success":true,"message":"Successfully retrieved data for report #1",
"content": {
"fields":["name","2014","2013","2012"],
"data":[{"name":"1","2012":208.95,"2013":229.92,"2014":0},
{"name":"2","2013":265.92,"2014":0,"2012":0},
{"name":"3","2012":227.98,"2013":558.13,"2014":0},
{"name":"4","2012":390,"2013":282.09,"2014":0},
{"name":"5","2013":461.1},
{"name":"6","2012":396.8,"2013":427.2,"2014":0},
{"name":"7","2012":305.48,"2013":110.76,"2014":0},
{"name":"8","2012":379.35,"2013":428.46,"2014":0},
{"name":"9","2012":206.5,"2013":535.35,"2014":0},
{"name":"10","2012":376,"2013":168.51,"2014":0},
{"name":"11","2012":275.28,"2013":231.93,"2014":0},
{"name":"12","2012":195.75,"2013":340.94,"2014":0}]}})
With the above JSON I am trying draw a chart, now the problem is,the chart works fine if I give rootProperty: 'content.data' in my store and add static fields (fields : [2014,2013,2012]) in my view. But I want my fields to be added dynamically from the store giving rootProperty: 'content', so that I can use both fields and data in charts(axes and series). I am adding my Chart View.Please help on how to add the above fields and data to my chart.
View
Ext.define('Sample.view.ChartsView', {
extend: 'Ext.Panel',
xtype: 'myreportsview',
requires: ['Ext.chart.axis.Numeric', 'Ext.data.JsonStore', 'Ext.chart.CartesianChart'],
config: {
title: 'Reports',
iconCls: 'icon-stats',
layout: 'fit',
fullscreen: true,
items: [
{
xtype: 'chart',
style: 'background:#fff',
store: 'YearlyReports',
animate: true,
theme: 'category1',
legend: {
position: 'bottom'
},
axes: [
{
type: 'numeric',
position: 'left',
fields: ['2012', '2013', '2014'], -- these fields should be added from store
title: 'Purchases',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
}
},
style: {
axisLine: false,
estStepSize: 20,
stroke: '#ddd',
'stroke-width': 0.5
},
},
{
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
style: {
estStepSize: 1,
stroke: '#999'
}
}
],
series: [
{
type: 'line',
xField: 'name',
yField: '2012',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
smooth: true,
stroke: '#94ae0a',
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: '#94ae0a',
fill: '#94ae0a',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
},
{
type: 'line',
smooth: true,
xField: 'name',
yField: '2013',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
stroke: '#a61120',
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: '#a61120',
fill: '#a61120',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
},
{
type: 'line',
smooth: true,
xField: 'name',
yField: '2014',
highlightCfg: {
scale: 7
},
axis: 'left',
style: {
fill: "#115fa6",
stroke: "#115fa6",
fillOpacity: 0.6,
miterLimit: 3,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
stroke: '#0d1f96',
fill: '#115fa6',
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
}
}
]
}
]
}
});
This might be useful to those who want to add chart dynamically. created store ('YearlyReports') with above data.
chart in panel
{
xtype: 'chart',
id: 'yearlyChart',
style: 'background:#fff',
store: {},
animate: true,
theme: 'category1',
legend: {
position: 'bottom'
}
wrote following painted function in config-listeners
listeners: {
painted: function() {
var store = Ext.getStore('YearlyReports').getAt(0).data,
chart = Ext.getCmp('yearlyChart'),
seriesArray = new Array(),
axesArray = new Array(),
fields = new Array(),
lineColors = ['#115fa6','#94ae0a','#a61120'],
markerColors = ['#94ae0a', '#a61120', '#115fa6'];
for(var j=1;j<store.fields.length;j++) {
fields.push(store.fields[j]);
seriesArray.push(
new Ext.chart.series.Line({
type: 'line',
yField: [store.fields[j]],
xField: 'name',
stacked: false,
style: {
smooth: true,
stroke: lineColors[j-1],
lineWidth: 3,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3
},
marker: {
type: 'circle',
stroke: markerColors[j-1],
fill: markerColors[j-1],
lineWidth: 2,
radius: 4,
shadowColor: 'rgba(0,0,0,0.7)',
shadowBlur: 10,
shadowOffsetX: 3,
shadowOffsetY: 3,
fx: {
duration: 300
}
}
}));
}
axesArray.push(
new Ext.chart.axis.Numeric({
type: 'numeric',
position: 'left',
fields: fields,
title: 'Purchases',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
}
},
style: {
axisLine: false,
estStepSize: 20,
stroke: '#ddd',
'stroke-width': 0.5
},
})
);
axesArray.push(
new Ext.chart.axis.Category({
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
style: {
estStepSize: 1,
stroke: '#999'
}
})
);
var data = {"data" : store.data};
chart.setStore(data);
chart.setAxes(axesArray);
chart.setSeries(seriesArray);
}
},