I am creating the chart as you see below:
So I can display the charts separately but I cannot display both of the charts on the same chart line.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues
}]
},
options: {
legend: { display: false },
scales: {
yAxes: [{ ticks: { min: 6, max: 16 } }],
}
}
});
var barColors = ["#19A2F2"];
Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
</body>
</html>
So could you please have a look? Besides I also care about css, so I would like to display the second chart with the color #19A2F2, thanks in advance.
Chart.js supports mixed charts - which involves just using one Chart instance of course.
All you need to do is take the datasets objects of your two individual charts and put those in an array assigned to the Charts' data.datasets property.
For example:
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
type: "line",
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues,
fill: false
},
{
type: "bar",
backgroundColor: "#19A2F2",
data: yValues
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 6,
max: 16
}
}],
},
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>
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
I have some problem using apex charts in angular 9, essentially I'm able to see the chart (line chart) when I mock the data as in the first screenshot, but I can't get data from REST API, I mean the chart disappears.
mocked datas
This is the method containing the chart:
drawGraph(){
this.projectService.getLineChartData(this.getID()).then((data) =>{
for(let i = 0; i<data.resourceListSize; i++){
this.chartOptions = {
series: [
{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ["#77B6EA", "#545454"],
dataLabels: {
enabled: true
},
stroke: {
curve: "smooth"
},
title: {
text: "Average High & Low Temperature",
align: "left"
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5
}
},
markers: {
size: 1
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
title: {
text: "Month"
}
},
yaxis: {
title: {
text: "Temperature"
},
min: 5,
max: 40
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5
}
};
}
})
}
Any help would be appreciated! Thank you
Step 1,
set the configuration with out data like below(minimum configuration)
this.chartOptions = {
series: [],
chart: {
height: 350,
type: "line"
},
xaxis: {}
}
Step 2:
Data from api response and set to "chartoptions" variable,
this.chartOptions.series=[{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
}, {
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
];
this.chartOptions.xaxis=
{
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
}
UPDATE(2):
I got it to work so here is the working fiddle. See below for my solution. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
UPDATE(1):
I've continued working on it and here is my updated fiddle. I think I'm overriding my variable/data values each time I loop through. Any help is greatly appreciated.
ORIGINAL POST:
I have a jsfiddle here that shows what I'm trying to do.
I have a series of data in json format that has multiple objects(i.e.,
[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]}
]
)
and am graphing with HighCharts line graphs. Instead, I'd like to define the series data to objects from multiple subtasks all on the same graph. (the variable is better shown in the jsfiddle link)
[
{"subtask":"id1", "":[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,3.5],[1,2.12],[2,0.1],etc.]}
]
},
{"subtask":"id2", "":[
{"name":"name1", "data":[[0,4.1],[1,2.23],[2,0.4],etc.]},
{"name":"name2", "data":[[0,3],[1,2.62],[2,0.15],etc.]}
]
}
]
and I'd like the graph to draw a line for each name/data for each subtask (i.e., the graph draw a line for id1.name1.data, id1.name2.data, id2.name1.data, and id2.name2.data)
My Solution:
I got it to work so here is the working fiddle. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
// what currently works
var jsonFormatThatWorks = [{
"name": "name1",
"data": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"name": "name2",
"data": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
// format I want/need to be able to access/graph
var jsonFormatIWant = [{
"p1": "12345",
"taskName": "z-echo",
"taskData": [{
"subTaskId": "z8-echo",
"someTaskStatus": "Rejected",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 90.80],
[20, 80.37],
[30, 75],
[40, 66],
[50, 33],
[60, 15],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 23],
[20, 15],
[30, 11],
[40, 8.5],
[50, 6.2],
[60, 3.44],
[70, 0.7],
[80, 0.5]
]
}
]
},
{
"subTaskId": "z9-echo",
"someTaskStatus": "Accepted",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
}
]
}]
// my chart
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
xAxis: {
title: {
text: 'Some X Label'
},
crosshair: true
},
plotOptions: {
series: {
marker: {
radius: 1
},
allowPointSelect: true
}
},
yAxis: {
labels: {
format: '{value} %'
},
floor: 0,
ceiling: 100,
title: {
text: 'Value (%)'
},
crosshair: true,
gridLineDashStyle: 'ShortDash',
gridLineColor: '#aaaaaa'
},
title: {
text: 'Sample Chart'
},
subtitle: {
text: 'Click and drag to zoom in. Hold down shift key to pan.'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesOptions
};
var chart = new Highcharts.Chart(options);
});
var seriesOptions = [],
seriesCounter = 0
var data = jsonFormatIWant[0]
var taskData = data.taskData
taskData.forEach(function(element, i) {
element.someTaskData.forEach(function(childElement, j) {
seriesOptions[seriesCounter] = {
//task: element.subTaskId,
name: element.subTaskId + "_" + element.someTaskData[j].objectId,
data: element.someTaskData[j].objectData
}
seriesCounter += 1
//console.log(seriesCounter)
childElement.objectData.forEach(function(grandChildElement, h) {})
})
})
<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>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<!-- I'd like to be able to graph each objects data for each subTask
(i.e., z8-echo and z9-echo from the data jsonFormatIWant variable beneath the chart definition)
something like: taskData[0].someTaskData and taskData[1].someTaskData -->
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,
}],
// (...)