i am using morris line chart in my application,
Here everything is complete but on x axis i wrote 1 then it display 1910 but i want there current month and date not year. means i want date in place of list of year.
Here is my code:
Morris.Line({
element: 'line-example',
data: [
{ time: '1', a: 0, b: 0 },
{ time: '2', a: 0, b: 0 },
{ time: '3', a: 0, b: 0 },
{ time: '4', a: 0, b: 0 },
{ time: '5', a: 0, b: 0 },
{ time: '6', a: 0, b: 0 },
{ time: '7', a: 0, b: 0 },
{ time: '8', a: 0, b: 0 },
{ time: '9', a: 0, b: 0 },
{ time: '10', a: 0, b: 0 },
{ time: '11', a: 0, b: 0 },
{ time: '12', a: 0, b: 0 },
{ time: '13', a: 0, b: 0 },
{ time: '14', a: 0, b: 0 },
{ time: '15', a: 0, b: 0 },
{ time: '16', a: 0, b: 0 },
{ time: '17', a: 0, b: 0 },
{ time: '18', a: 0, b: 0 },
{ time: '19', a: 0, b: 0 },
{ time: '20', a: 0, b: 0 },
{ time: '21', a: 0, b: 1 },
{ time: '22', a: 0, b: 0 },
{ time: '23', a: 1, b: 0 },
{ time: '24', a: 0, b: 0 },
{ time: '25', a: 0, b: 0 },
{ time: '26', a: 0, b: 0 },
{ time: '27', a: 0, b: 0 },
{ time: '28', a: 0, b: 0 },
{ time: '29', a: 0, b: 0 },
{ time: '30', a: 0, b: 0 },
{ time: '31', a: 0, b: 0 },
],
xkey: 'time',
ykeys: ['a', 'b'],
labels: ['Subscriptions', 'Unsubscriptions'],
lineColors:['#0176CC','#FF9701'],
});
Related
I want to make create a slider animation with multiple traces in plotly js like the image below but it shows only trace 1.
when I click on the play button it only shows the first trace lines without any warning or error in the console.
I used version plotly-2-12.1.
enter image description here
let myArr = new Array(35).fill(0).map((d, i) => i + 1);
`Plotly.plot("graph", {
trace1: {
x: myArr,
y: [0, -5, 2, 5, 15, 1, 2, 5, 15, , 20, 5, 17],
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "Asas",
name: "rex",
marker: {
color: "rgb(128, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
trace2: {
x: myArr,
y: [0, 10, 20, 5, 17, 80, 3, , 20, 5, 17],
text: "Asas",
name: "rex",
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "as",
marker: {
color: "rgb(0, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
data: [trace1, trace2],
layout: {
xaxis: { autorange: false, range: [1, 35] },
yaxis: { autorange: false, range: [0, 100] },
updatemenus: [
{
type: "buttons",
xanchor: "left",
yanchor: "top",
direction: "right",
x: 0,
y: 0,
pad: { t: 60 },
showactive: false,
buttons: [
{
label: "Play",
method: "animate",
args: [
null,
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
fromcurrent: true,
},
],
},
{
label: "Pause",
method: "animate",
args: [
[null],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
},
],
},
],
sliders: [
{
currentvalue: {
prefix: "t = ",
xanchor: "right",
},
pad: { l: 130, t: 30 },
transition: {
duration: 500,
},
steps: myArr.map((t) => ({
label: t,
method: "animate",
args: [
[t],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
})),
},
],
},
frames: myArr.map((t) => ({
name: t,
data: [{ "transforms[0].value": t }],
})),
});`
enter image description here
I'm trying to display total monthly sales and daily stock level. This way you could easily see that you didn't have any sales a particular month because you had low stock. Monthly sales is a bar chart that should be in the center of each month (in between the ticks).
In order to get it close to the middle my data is using the 15th of each month as the date to center it. I would want to know if there is a better way to achieve this?
JSFiddle to play around with: https://jsfiddle.net/8Lydhpqc/3/
const dailyStock = [
{ x: "2017-08-02", y: 1 },
{ x: "2017-08-25", y: 3 },
{ x: "2017-09-10", y: 7 },
{ x: "2017-09-28", y: 0 },
{ x: "2017-10-02", y: 3 },
{ x: "2017-10-24", y: 2 },
{ x: "2017-11-01", y: 1 },
{ x: "2017-11-30", y: 0 },
];
//using the 15th of each month to center it
const monthlyTotal = [
{ x: "2017-08-15", y: 1 },
{ x: "2017-09-15", y: 10 },
{ x: "2017-10-15", y: 5 },
{ x: "2017-11-15", y: 5 },
];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
label: "sales",
data: data,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
Welcome to Stackoverflow!
It seems that there is a way better than using the 15th of the month.
You need to add another axis for the bar that is a category type axis. Also its pretty critical that you have "offset: true" on that axis as well. Otherwise it will not center.
In the code below I named that category "bar" and the existing one "line"
I also created a fiddle: https://jsfiddle.net/jyf8ax3e/
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
barPercentage: .7,
xAxisID: "bar",
label: "sales",
data: monthlyTotal,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
width: 55,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
id: "line",
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
{
id: "bar",
offset: true,
type: "category",
distribution: "series",
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
I want my y-axis to have labels 0%, 25%, 50%, 75%, 100%
I would have expected a gridCount of 4 or 5 to do it, but it refuses. I've tried labelFrequency set to 25 but that doesn't work either.
window.AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [
{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}
],
'valueAxes': [
{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
unit: '%',
autoGridCount: false,
minimum:0,
maximum:100,
gridCount: 5
}
],
'dataProvider': [
{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})
Unfortunately there isn't a way to outright set your own axis divisions through the value axis properties. To workaround this, you can disable the value axis labels and grids and set up your own grid and labels using guides:
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
Demo below:
AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}],
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
'dataProvider': [{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
Here is my dataset
var dataset = [{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 },
{ x: 3, y: 1222 }, { x: 4, y: 1611 },
{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 },
{ x: 3, y: 1322 }, { x: 4, y: 1711 },]
I'm not sure where to specify the name of each dataset, How should this be modified to allow for a Group Name to be passed and what changes should be made in my D3.JS code ?
Fiddle https://jsfiddle.net/qvrL3ey5/
Using http://jsfiddle.net/2N2rt/15/ I was able to resolve this issue.
Example
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, -100, 7, 1, 1, 111]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 107]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 130]}
];
I want to create a bar chart with time duration on the bottom axis. It' working for decimal numbers, like 300.5 seconds, or 50.3 hours, but i would like to have the following format:
Hours:Minutes:Seconds. I tried some thing with datalabelformat: datetime, but with no success.
The data would be for example:
Member1 - 10:05:18
Member2 - 12:52:20
Member3 - 18:10:30
Member4 - 19:20:10
Member5 - 19:30:45
Anybody got an idea how to realize that?
Thanks in advance!
You need to set min value and tickInterval, then set dateTimeLabels.
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
Example:
http://jsfiddle.net/TynTT/1/
I came here searching for a solution to my problem. Not sure if this is exactly what you want, and I cannot put in a comment due to low reputation. But this is how I was able to solve it.
This provides result in hh:mm. You can modify it to include seconds.
http://jsfiddle.net/TynTT/11/
It has the y axis in hh:mm format and also displays datalabels as hh:mm.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
type: 'time',
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
}
},
series: [{
data: [1000000, 26500000, 17000050, 79000000, 56000000, 124000000],
dataLabels: {
enabled: true,
formatter: function () {
var time = this.y / 1000;
var hours1=parseInt(time/3600);
var mins1=parseInt((parseInt(time%3600))/60);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
},
}]
});
});
I improved above configs by reusing the HC methods:
durationbar: {
chart: {
type: 'column'
},
yAxis: {
type: 'datetime',
showFirstLabel: false,
dateTimeLabelFormats: {
millisecond: '%H:%M:%S'
},
units: [[
'millisecond',
[1000]
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]],
},
tooltip: {
formatter: null,
pointFormat: '{point.name}: <b>{point.dataLabel.text.textStr}</b><br/>'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter() {
return this.series.chart.time.dateFormat('%H:%M:%S', this.y)
}
}
}
}
},
screenshot