I tried to create a chart but i get no display in my html page whereas DOM element seems to be well loaded.
Here is the code of My JS function to create the chart :
this.updateUsageChart = function updateUsageChart() {
var jsonData = {
categories : ['01/12/2015', '02/12/2015', '03/12/2015', '04/12/2015', '05/12/2015', '06/12/2015', '07/12/2015', '08/12/2015', '09/12/2015', '10/12/2015'],
series : [
{
name: 'MAX',
data: [170, 170, 170, 170, 170, 170, 170, 170, 170, 170]
}, {
name: 'MIN',
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
}, {
name: 'test1',
data: [30, 40, 35, 40, 35, 200, 112, 210, 140, 190]
}, {
name: 'test2',
data: [30, 40, 35, 40, 35, 170, 112, 170, 140, 170]
}
]
}
var categories = jsonData.categories ; // Array of String
var series = jsonData.series;
$('#usageChart').highcharts({
title: {
text: 'Test',
x: -20 //center
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
}
I included library in my index.html file :
<script src="../../lib/jquery/jquery.js"></script>
<script src="../../lib/highcharts/highcharts.js"></script>
<script src="../../lib/highcharts/exporting.js"></script>
Related
Does anyone know how to change the font size of a value in a Gauge chart from Plotly.js? I wanted to make the font smaller (the number “20” below), in a way that didn’t stay above the title of the chart. I looked through Plotly.js reference, but couldn't find anything.
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);
Link to codepen: https://codepen.io/amandasantosf/pen/qBaNbGK
This can be due using the "number" field, as seen here https://plotly.com/javascript/reference/indicator/#indicator-number-font-size
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
number: { font: { size: 20 }},
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);
The plotline should spread across the graph but the plot band should of smaller width.
1) Initially without width being set.
2) When y axis width is set to 20
3) I want something like this where both the plot band and the plotline co exists
this is the fiddle code link to what I have tried so far.
Can someone please help me out thank you very much in advance.
https://jsfiddle.net/mncfy80p/
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width:250,
},
title : {
text:''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true
},
pointPadding: 0
}
},
xAxis: {
visible:false,
},
yAxis: {
title: {
text: ''
},
min : 0,
max : 100,
tickInterval : 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
plotBands: [
{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 3,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
],
},
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
color:'red',
dataLabels: {
formatter(){
return '<span style="font-size:11px;">A</span>';
},
y:-20
}
}, {
y: 72,
color:'green',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">B</span>';
},
y:-15
}
}, {
y: 83,
color:'blue',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">C</span>';
},
y:-15
}
}],
showInLegend: false
}]
});
The simplest solution is to create another y-axis and move plot bands to it:
yAxis: [{
...,
plotLines: [...],
}, {
...,
plotBands: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/agq6ebjd/
API Reference: https://api.highcharts.com/highcharts/yAxis
I want to create a dumbbell chart using highcharts.
I used x-range chart for this
here is the link: https://jsfiddle.net/thushara07/nLkxa0wr/15/
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
// partialFill: 0.25
}, {
x: 44,
x2:45,
y: 1
}, {
x:30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'left',
enabled: true
}
}]
expected output: I want to show markers for each line created as shown
(https://images.app.goo.gl/LAKQBdsaKBH2hjS59
)
It can be done by adding additional scatter series that is linked to x-range:
Code:
Highcharts.chart('container', {
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
type: 'xrange',
pointWidth: 5,
id: 'main',
data: [{
x: 32,
x2: 33,
y: 0
}, {
x: 44,
x2: 45,
y: 1
}, {
x: 30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'center',
enabled: true
}
}, {
type: 'scatter',
linkedTo: 'main',
marker: {
radius: 5
},
data: [{
x: 32,
y: 0,
color: 'red'
}, {
x: 33,
y: 0,
color: 'grey'
}, {
x: 44,
y: 1,
color: 'red'
}, {
x: 45,
y: 1,
color: 'grey'
}, {
x: 30,
y: 2,
color: 'red'
}, {
x: 32,
y: 2,
color: 'grey'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/4qj89cog/
API reference:
https://api.highcharts.com/highcharts/series.scatter
https://api.highcharts.com/highcharts/series.scatter.linkedTo
I'm trying to implement vue-chart-js in my VueJS 2.0 application, I went through the documentation and I'm using the component like:
<div class="row">
<vue-chart type="bar" :options="options" :data="chartData" style="width: 100%;height: 310px;"></vue-chart>
</div>
In data() I'm defining:
//for chart
options: {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
//stacked: true,
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
display: true,
//stacked: true,
ticks: {
beginAtZero: true,
barPercentage: 0.2,
autoSkip: false,
},
}]
},
I did some static data set to get my chart working so my chartData looks like this:
if(type==="week"){
this.chartData.labels=['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
this.chartData.datasets= [
{
label:'Investor',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
else if(type==="month"){
this.chartData.labels=['1st Month', '2nd Month', '3rd Month', '4th Month', '5th Month', '6th Month']
this.chartData.datasets= [
{
label:'Investor',
data: [90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
Now I pointed the same to the api calls so I did something like this:
axios.get('api/interaction/chart?timeFormat='+type, {headers: getHeader()}).then(response => {
if(response.status === 200)
{
this.chartData = response.data.chartData
console.log(this.chartData)
}
})
In response or in console.log I'm having the format something like this:
{
"labels":["1st Week","2nd Week","3rd Week","4th Week","5th Week","6th Week"],
"datasets":[
{"label":"Investor","data":[0,0,0,0,0,0],"backgroundColor":"rgb(26, 179, 148)","borderColor":"rgb(26, 179, 148,1)"},
{"label":"Research","data":[0,0,0,0,0,0],"backgroundColor":"rgb(138, 209, 194)","borderColor":"rgb(26, 179, 148,1)"}
]
}
I'm getting an error of:
Invalid prop: type check failed for prop "data". Expected Object, Array, got String.
found in---> <VueChart>
I tried using JSON.parse(response.data.chartData) but this also not helping me out. Guide me on this.
Thanks
I have a group chart
I want to show images on top of each
So there are only two images, so the value in xaxis subcategories if the value is negative i want to show image2 and if value is positive show image1
I have seen this answer but cant figure out this in group chart
highchart: add images to top of chart on every column
My group chart Fiddle
http://jsfiddle.net/KWPsv/90/
My Code:
Highcharts.setOptions({
colors: [
'#5a9bd4',
'#faa75b',
'#7ac36a',
'#9e67ab',
'#f15a60',
'#ce7058',
'#d77fb4'
]
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
legend: {},
tooltip: {
shared: true,
formatter: function() {
var s = [],
xAxis = this.points[0].series.xAxis,
categoryIndex = xAxis.categories.indexOf(this.x),
title = this.x,
subTitle = xAxis.options.subtitles[categoryIndex];
s.push(title + '<br>');
s.push(subTitle + '<br>');
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
point.y + '<span>');
});
return s.join(' and ');
},
},
plotOptions: {
series: {
shadow: false,
borderWidth: 0,
pointPadding: 0
}
},
xAxis: {
subtitles: ['2', '-1', '4', '-3', '7'],
categories: ['MainTask 1', 'MainTask2', 'MainTask3', 'MainTask4', 'MainTask5'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#333'
}
}
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
title: {
text: 'Y Axis Title',
rotation: 0,
margin: 50,
style: {
color: '#333'
}
}
},
series: [{
y: 0,
mydata: 10,
name: 'Designation 1',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 20,
name: 'Designation 2',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 30,
name: 'Designation 3',
data: [32, 64, 7, 12, 16],
}, {
mydata: 13,
name: 'Designation 4',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 23,
name: 'Designation 5',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 22,
name: 'Designation 6',
data: [32, 64, 7, 12, 16]
}]
});
Simply use Renderer.image to add an image on a chart. You can do that for example on load event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Renderer.image
Example:
http://jsfiddle.net/kudxL3kh/