I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?
Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.
var l=19;
var m=-0.6;
new Highcharts.Chart({
chart: {
renderTo: elementId,
spacingLeft: 10,
spacingRight: 10
},
title: {
text: subject
},
xAxis: {
categories: [{
name: "Year 7",
categories: [1, 2, 3, 4]
}, {
name: "Year 8",
categories: [1, 2, 3, 4]
}, {
name: "Year 9",
categories: [1, 2, 3, 4]
}, {
name: "Year 10",
categories: [1, 2, 3, 4]
}, {
name: "Year 11",
categories: [1, 2, 3, 4]
}],
labels: {
style: {
fontSize: '7.5px'
}
},
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: -1
}],
//max: l
},
yAxis: [{
labels: {
enabled: false
},
title: {
text: null
},
min: 0,
max: 1000
},
{
title: {
text: null
},
labels: {
style: {
fontSize: '7.5 px'
},
align: 'left',
x: 3,
formatter: function () {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
}
},
tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
gridLineColor: 'white',
opposite: true,
min: 0,
max: 1000
}],
series: [{
type: 'line',
data: [[m, 0], [l, 280]],
color: '#A5DEC1',
}, {
type: 'line',
data: [[m, 80], [l, 360]],
color: '#94D0A3',
},
...
strong text
Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/
In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:
var l = 19.5;
var m = -0.5;
Now modify extremes and plotLines:
plotLines: [{
color: '#5DA06E',
width: 2,
value: l
}, {
color: '#5DA06E',
width: 2,
value: m
}],
max: l - 0.5,
min: m + 0.5,
Related
I am trying to create a scatterplot with ApexCharts using Vue3. My chart will have several different categories on the x-axis and each category will have multiple y-values. However, I cannot figure out how to properly format my data to achieve this. The desired look of the chart should resemble a bunch of data points stacked vertically for each category. (not directly on top of each other, they y-values are all slightly different)
After referring to the documentation here: https://apexcharts.com/docs/series/
I've tried a few different approaches to formatting my data.
I've tried this way:
let series = [
{
name: "Name 1",
data: [10, NaN, NaN],
},
{
name: "Name 1",
data: [20, NaN, NaN],
},
{
name: "Name 2",
data: [NaN, 30, NaN],
},
{
name: "Name 2",
data: [NaN, 35, NaN],
},
{
name: "Name 3",
data: [NaN, NaN, 45],
},
{
name: "Name 3",
data: [NaN, NaN, 55],
},
];
let chartOptions = {
xaxis: {
categories: ["cat1", "cat2", "cat3"]
The result here will not allow me to add more than one value for each category.
Next, I tried like this:
let series = [
{
name: "name1",
data: [
{ x: "cat1", y: 54 },
{ x: "cat1", y: 60 },
{ x: "cat2", y: 66 },
{ x: "cat2", y: 70 },
],
},
{
name: "name2",
data: [
{ x: "cat3", y: 33 },
{ x: "cat3", y: 40 },
{ x: "cat4", y: 54 },
{ x: "cat4", y: 58 },
],
},
let chartOptions = {
xaxis: {
type: "category"
The result here was two categories on the xaxis that say "cat1" with each having one data point from name1 and name2
I haven't been able to find any examples of an Apex scatterplot that show this particular case of category data with multiple y-values and I'm just not sure what the issue is with my formatting of the data. I have been able to achieve the desired outcome, but only if I use paired numeric values or a datetime on the x-axis.
Any help would be much appreciated!
You can have multiple points for the same category if you avoid duplicates within the same series.
let options = {
series: [{
name: 'name1',
data: [
{ x: 'cat1', y: 54 },
{ x: 'cat2', y: 66 },
{ x: 'cat3', y: 33 },
{ x: 'cat4', y: 54 }
]
}, {
name: 'name2',
data: [
{ x: 'cat1', y: 60 },
{ x: 'cat2', y: 70 },
{ x: 'cat3', y: 40 },
{ x: 'cat4', y: 58 }
]
}],
chart: {
height: 350,
type: 'scatter'
},
xaxis: {
type: 'category'
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
EDIT
If you tweak your data and add explicit categories to the xaxis, you can get this:
let options = {
series: [{
name: 'name1',
data: [
[1, 54],
[1, 60],
[2, 66],
[2, 70]
]
}, {
name: 'name2',
data: [
[3, 33],
[3, 40],
[4, 54],
[4, 58]
]
}],
chart: {
height: 350,
type: 'scatter'
},
xaxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
I'm trying to create a hover effect for two bar at the same time, is there any possibility to achieve this by using any existing method or external css to achieve this kind of hover effect, on hover event present in highcharts I can only change the colour of the single bar image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="width: 100%; height: 100px"></div>
Highcharts
Highcharts.setOptions({
time: {
useUTC: false
}
});
Highcharts.chart('container',{
chart:{
type : 'xrange',
backgroundColor : '0C0D19',
renderTo:'container',
marginRight: 100,
},
colors : ['#45AD59','#6699FF'],
title : { text : '' },
credits : { enabled : false },
legend : { enabled : false },
exporting : {
buttons : {
contextButton : {
enabled : false
}
}
},
plotOptions : {
series : {
cursor : 'pointer',
}
},
tooltip : { enabled: false },
xAxis : {
type : 'datetime',
opposite : true,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickLength: 0,
tickInterval:3600*1000,
gridLineColor:'#2c2d39',
gridLineWidth:1,
min : 1545281770000,
minPadding: 0,
dateTimeLabelFormats : {
millisecond: '%I:%M %P',
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
crosshair : {
snap : false,
zIndex : 100,
label: {
enabled: true,
format: '{value:%I:%M %P}'
}
},
labels : {
align : 'left',
style : {
color : 'rgba(255, 255, 255, 0.7)',
fontSize : '12px'
}
},
},
yAxis: {
title: {
text: ''
},
plotBands: [{
from: -0.21001,
to: 0.3291,
color: '#00401f'
},{
from:0.5570,
to:1.275,
color:'#2f4776'
}],
categories: ['Reported','Tracked'],
reversed: true,
labels:{
align:'center',
style:{
color:'rgba(255, 255, 255, 0.7)',
fontSize:'12px'
},
formatter: function() {
return this.value + '<img></img>';
},
useHTML: true
},
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
pointWidth: 20,
borderWidth:0,
borderRadius:0,
data : [{
"x": 1545281770000,
"x2": 1545284950000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 0
}, {
"x": 1545285388000,
"x2": 1545291448000,
"y": 1,
"floor": 3,
"room": "3001",
"value": true,
"hoverId": 1,
}, {
"x": 1545303407000,
"x2": 1545312167000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 2,
}, {
"x": 1545312218000,
"x2": 1545312338000,
"y": 1,
"floor": 3,
"room": "3000",
"value": true,
"hoverId": 3,
}, {
"x": 1545314138000,
"x2": 1545314738000,
"y": 1,
"floor": 2,
"room": "2001",
"value": true,
"hoverId": 4,
}
,{
x:1545281701745,
x2:1545285267354,
y:0,
},
{
x:1545285327157,
x2:1545292261051,
y:0,
},{
x:1545303345999,
x2:1545314757609,
y:0,
className:'manual',
}
],
dataLabels: {
enabled: false
}
}]
})
CSS
#container .highcharts-grid.highcharts-yaxis-grid path{
display: none;
}
#container .highcharts-axis.highcharts-xaxis path{
display: none;
}
#container .highcharts-point.highcharts-point.highcharts-color-0 rect{
height: 15px;
y: 8;
}
#container .highcharts-point.highcharts-point.highcharts-color-1 rect{
y: 27;
height: 18px;
}
Here is a JSFiddle
You can make it using Highcharts.SVGRenderer which allows you to plot a rectangle and Highcharts.SVGElement.on method which allows you to add events on SVG elements (for example series group). Check demo and code posted below.
Code:
chart: {
type: 'xrange',
backgroundColor: '0C0D19',
renderTo: 'container',
marginRight: 100,
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesSvg = series.group,
seriesSvgBBox = seriesSvg.getBBox(),
width = 80,
height = seriesSvgBBox.height,
y = chart.plotTop + seriesSvgBBox.y,
x,
tooltip;
seriesSvg.on('mousemove', function(e) {
if (tooltip) {
tooltip.destroy();
}
x = e.offsetX - width / 2
tooltip = chart.renderer
.rect(x, y, width, height)
.attr({
fill: 'rgba(255, 255, 255, 0.2)'
})
.css({
'pointer-events': 'none'
})
.add()
.toFront();
});
seriesSvg.on('mouseout', function(e) {
tooltip.destroy();
tooltip = null;
});
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
How could I achieve the chart below as accurate as possible?
I'm trying to achieve the chart in the picture below with highcharts, the problem I have is that I can't achieve the gradients and the purple cut-line
this is what I have donde so far : jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
options: {
title: {
text: "Historical report"
},
heigth: 200
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
plotBands: [
{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
{
name: 'John',
data: [3, 9, null, 5, 4, 10, 12],
lineColor: "#5A66AF"
}, {
name: 'Jane',
data: [1, 10, null, 3, 3, 5, 4],
lineColor: '#47a06b'
}, {
name: 'Roberto',
data: [10, 15, null, 15, 9, 9, 4],
lineColor: '#2ba9db'
}
]
});
});
The line is achieved by the DashStyle property:
http://api.highcharts.com/highcharts#plotOptions.line.dashStyle
The gradient fill is a matter of defining the gradient stops in the fillColor property:
http://api.highcharts.com/highcharts#plotOptions.area.fillColor
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
(though, FWIW, that extreme white end to the gradient is reeeeally distracting...)
I want to have a day vs timescatter plot. I have some unix time values. I just need to plot them on X and Y axis such that the days of the week (e.g. Monday, Tuseday etc.) on the X axis and the time e.g.(2:24,13:40 etc. ) on the Y axis. I have tried using the datetime type. But I think I am missing something.
Here is what I have tried to do:
data=[["Saturday", 1390723133.57414], ["Sunday", 1390803027.3852], ["Monday", 1390862581.18321], ["Monday", 1390830748.67335], ["Wedneday", 1391015403.93726], ["Wedneday", 1391006992.20059], ["Sunday", 1390804961.8415]]
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'test'
},
xAxis: {
title: {
enabled: true,
text: 'Day of the week'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Time of the day'
},
type: 'datetime',
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: '',
color: 'rgba(223, 83, 83, .5)',
data: data
}]
});
});
});
You need parse your data to correct format, because in data array you need to have timestamps or numbers, not days / strings as you have.
i am facing quite a problem which is to create the nice graph from http://www.amcharts.com/ but i need to retrieve data from my sql database. But i don't know how to place inside. Please guide me. Below is the way how the graph displayed, but i wanted to work with data from database. Thank you.
<script type="text/javascript">
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: value
});
}
return chartData;
}
AmCharts.makeChart("chartdiv", {
type: "stock",
pathToImages: "../amcharts/images/",
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: true,
title: "Value",
eraseAll: false,
labels: [{
x: 0,
y: 100,
text: "Click on the pencil icon on top-right to start drawing",
align: "center",
size: 16
}],
stockGraphs: [{
id: "g1",
valueField: "value",
bullet: "round",
bulletColor: "#FFFFFF",
bulletBorderColor: "#00BBCC",
bulletBorderAlpha: 1,
bulletBorderThickness: 2,
bulletSize: 7,
lineThickness: 2,
lineColor: "#00BBCC",
useDataSetColors: false
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
},
drawingIconsEnabled: true
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
</script>
Can you generate this script in your code behind ( using a string builder for example ) then use this
ScriptManager.RegisterStartupScript(this, this.GetType(), "", "'" + YourStringBuild.toString() + "'", true);