I am working on highchart column chart. But I got stuck in series adding part. This is my code
function renderChart(series_data){
$("#container").height(400);
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 80
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,chartcount]);
});
chart.addSeries({
name : cat_name,
data : parseFloat(toSeries)
});
});
}
If I am adding constant series data like
chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});
some graph is displaying. But while coming to dynamic data it doesn't show up. Also I am using Date.UTC function to display the
I sending the json data through the variable, series_data to the function renderChart that is the result of another ajax function . The sample json result is this.
{"Ferrari April
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"1.00"},{"date":"2013-06-15","month":"June-2013","count":"1.00"},{"date":"2013-06-16","month":"June-2013","count":"1.00"}],"Ferrari
May
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"2.00"},{"date":"2013-06-09","month":"June-2013","count":"3.00"}],"Ferrari
March
2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari
June
2013":[{"date":"2013-06-10","month":"June-2013","count":"1.00"},{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month":"June-2013","count":"3.00"},{"date":"2013-06-14","month":"June-2013","count":"2.00"},{"date":"2013-06-16","month":"June-2013","count":"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"2.00"}],"Ferrari
February
2013":[{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}
The problem comes in the Date.UTC part i guess . Because when I do a console.log() it is showing NaN .
Please help to fix this issue.
I am excepting a result like this.
Demo Jsfiddle
var series_data = {"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"}],"Ferrari January 2013":[{"date":"2013-06-02","month":"June-2013","count":"1.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-02","month":"June-2013","count":"2.00"},{"date":"2013-06-03","month":"June-2013","count":"2.00"},{"date":"2013-06-04","month":"June-2013","count":"1.00"},{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"}]};
renderChart(series_data)
function renderChart(series_data){
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 40
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
}
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,parseInt(chartcount)]); // Parse your data here!
});
chart.addSeries({
name : cat_name,
data : toSeries
});
});
}
Hope it works!
You are setting the chart before putting data inside it. First data series and then call Highcharts.Chart. Then your program will run for dynamic data also.
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
Live Demo
Related
I have a heatmap that has a legend scale on the right side with label on top. I would like to know if it's possible to move the label "number of MMF share classes" below the legend scale in the same vertical position as the y-axis label on left?
https://jsfiddle.net/samwhite/5d6kL32o/2/
xAxis: {
// categories: this.value,
title: {
text: 'Date'
},
labels: {
autoRotation: [-10],
formatter: function () {
var dt = xcats[this.value];
var date = new Date(dt);
var month = date.getUTCMonth() + 1;
var year = date.getUTCFullYear()
return `${year}`
}
},
tickInterval: 45
},
yAxis: {
title: {
text: 'Price ($)'
},
labels: {
formatter: function () {
return `$${(this.value / 10000).toFixed(4)}`;
}
},
min: ymin*10000,
max: ymax*10000,
plotLines: [{
value: 10000,
color: 'darkred',
dashStyle: 'shortdash',
width: 0.2,
zIndex: 5
}]
},
tooltip: {
pointFormatter: function () {
return `NAV per share: <strong>${(this.y / 10000)}</strong>
<br/>Date: <strong>${xcats[this.x]}</strong>
<br/>Number of Share Classes: <strong>${this.value}</strong>`
}
},
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
y: 80,
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'linear',
reversed: false,
layout: 'vertical',
stops: [
[0, '#c8daf9'],[1.0, '#537dca']
]
}],
An option could be use the code posted on this thread:
Quote:
Highcharts is not providing this option for legend title. You can
achieve your goal by translating your title in callback function:
function (chart) {
var title = chart.legend.title;
title.translate(x, y);
}
I've modified your code as follows:
Example:
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
//y: 80, // <- comment this line.
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
Then:
// After the "highcharts" settings, add:
, function(chart) {
var title = chart.legend.title;
title.translate(0, 370);
}
Here is the modified jsfiddle.
I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).
I have tried different solutions but none worked so far. Below is the code I have made for my chart1.
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
text: 'CHART1 SUBTITLE',
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: []
}],
tooltip: {
}
},
};
Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.
$('chart').ready(function() {
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart1.series[0].data = json['SERIES 1']['data'];
chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
});
You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
JS:
var chart1 = {
subtitle: {
text: 'CHART1 SUBTITLE',
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: [1, 2, 3, 4, 5]
}]
},
chart2 = {
subtitle: {
text: 'CHART2 SUBTITLE',
},
series: [{
name: 'CHART2 SERIESNAME',
color: '#0034ef',
data: [5, 1, 2, 6, 2]
}]
},
chart3 = {
subtitle: {
text: 'CHART3 SUBTITLE',
},
series: [{
name: 'CHART3 SERIESNAME',
color: '#23ee45',
data: [3, 5, 2, 3, 1]
}]
},
chartDefaultOptions;
chartDefaultOptions = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
}
};
Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));
Demo:
https://jsfiddle.net/BlackLabel/7utogs95/
I have a weird question:
The series1 variable is an array of date-times, which are too long. Because of this, the chart cannot display correctly. However, if I change series1 to make it contain the values of series2. It will work correctly. Can you let me know what I should do?
Also, how can I get each value in series1 shown as a date? suppose it is a variable from flask {{series1}}. thank you.
$(function () {
var series1 = [1489298400000L, 1492923600000L, 1492318800000L, 1480226400000L, 1494133200000L, 1490504400000L, 1488088800000L, 1475384400000L, 1493528400000L, 1491109200000L, 1480831200000L, 1471755600000L]
var series2 = [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1]
var series3 = [102, 95, 110, 111, 81, 104, 99, 92, 90, 100, 103, 98]
var myChart =
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
credits: {
text: 'Songhuiming',
href: 'http://www.songhuiming.com'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: series1,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: series2,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: series3,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
About suffix "L" on the end you can read here.
What you need at first to make all items in series1 array be a string, because as it now, you will have an error. Then remove "L" and convert to dates
let series = ['1489298400000L', '1492923600000L', '1492318800000L', '1480226400000L', '1494133200000L', '1490504400000L', '1488088800000L', '1475384400000L', '1493528400000L', '1491109200000L', '1480831200000L', '1471755600000L'];
let series1 = series.map((item) => {
let date = new Date(parseInt(item.replace("L", ""))));
return `${date.getMonth()} ${date.getFullYear()}`;
});
I'm getting started with the Highcharts JS library and I'm having some trouble with starting my chart at a specific date and time. The chart is a stream gage chart so my X values are a date/time (in EPOCH format) and the y values are a gage height.
I want my chart to cover 3 days starting at midnight, 2 days prior to today's date. I'm trying to use 'pointStart' to establish the beginning of my chart's x values but it's not quite working. I'm getting my three day timespan but the starting point isn't the desired midnight.
What am I doing wrong? Here's my full highcharts code:
$(function () {
$('#gChart').highcharts({
chart: {
type: 'spline',
margin: [20,40,50,60]
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
title: {
text: 'Date',
style: {
color: 'black',
fontWeight: 'bold'
}
},
type: 'datetime',
gridLineWidth: 1,
lineWidth: 1,
lineColor: 'black',
labels: {
formatter: function () {
var curVal = this.value;
var dt = new Date();
theDate = new Date(eval(eval(curVal + 28800) * 1000));
if (theDate.toString('h tt') == "0 AM") {
var t = theDate.toString('M/d/yyyy');
} else {
var t = theDate.toString('htt');
}
return t;
},
style: {
color: 'black'
}
},
startOnTick: true,
endOnTick: true,
gridLineColor: '#222',
tickInterval: 86400,
minRange: 259200,
minorGridLineColor: 'red',
startOnTick: true,
plotlines: [{
color: 'black',
label: {
text: 'Last Update',
align: 'Right',
style: {
color: 'black',
fontWeight: 'bold',
}
},
value: theData[theData.length-1].x,
width: 1
}]
},
yAxis: {
title: {
text: 'Stage (Ft)',
style: {
color: 'black',
fontWeight: 'bold'
}
},
lineWidth: 1,
lineColor: 'black',
min: chartProps["lowGraph"],
max: chartProps["highGraph"],
minorGridLineWidth: 0,
gridLineWidth: 1,
alternateGridColor: null,
startOnTick: true,
plotLines: [{ // Flood Stage 2
value: chartProps["floodPhase2"],
dashStyle: 'Dash',
color: '#FFDC14', //Yellow
width: '4',
label: {
text: 'FLOOD STAGE 2',
align: 'center',
style: {
color: '#FFDC14', //Yelow
fontWeight: 'bold',
fontSize: '10pt'
}
}
}, { // Flood Stage 3
value: chartProps["floodPhase3"],
dashStyle: 'Dash',
color: '#FFA500',
width: '4',
label: {
text: 'FLOOD STAGE 3',
align: 'center',
style: {
color: '#FFA500',
fontWeight: 'bold',
fontSize: '10pt'
}
}
}, { // Flood Stage 4
value: chartProps["floodPhase4"],
dashStyle: 'Dash',
color: 'red',
width: '4',
label: {
text: 'FLOOD STAGE 4',
align: 'center',
style: {
color: 'red',
fontWeight: 'bold',
fontSize: '10pt'
}
}
}]
},
tooltip: {
valueSuffix: ' ft',
formatter: function() {
var curVal = this.x;
var dt = new Date();
theDate = new Date(eval(eval(curVal + 28800) * 1000));
var d = theDate.toString('M/d/yyyy');
if (theDate.toString('h') == "0") {
var t = "12:" + theDate.toString('mm tt');
} else {
var t = theDate.toString('h:mm tt');
}
theString = d + ' # ' + t + '<br><b>Gage Height: ' + this.y + ' Ft</b>';
return theString;
}
},
plotOptions: {
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false
},
pointInterval: 900, // 5 minutes
pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-2,0,0,0,0)
}
},
series: [{
name: 'Gage Height',
data: theData
}]
,
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
As it turns out, I had multiple things going on which prevented the chart from appearing the way I wanted. First, when you specify a dateTime type for an axis of your chart, Highcharts assumes that the date information is in millisecond Epoch format. The data I have was in second format so that was one thing I needed to correct.
The second issue was that my data's source ignores daylight savings (hence the hour shift). Once I accounted for these two issues, my chart's axis finally appeared as they should.
I'm using HighStock.js to build the graph of a stock ticker, and i need to display 2 days data into a graph , and i don't have data when stock market closes , so i'm getting straight line from Nov 27 11:20 to Nov 28 5:19 . I should not get any line when stock closes, that line should be trimmed along with x-axis. I'm having prices in the interval of every 20 mins for 2 days. Below is my code,
$.each(names, function(i, name) {
if(i==0)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data0, ',') ?>],
};
}
else if(i==1)
{
date3:[<?php echo $date1 ?>];
seriesOptions[i] = {
name: name,
data: [<?php echo join($data1, ',') ?>],
};
}
else if(i==2)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data2, ',') ?>]
};
}
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
function createChart() {
var date_new1 ;
var date_new2 ;
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
dataLabels: {
enabled: true
},
yAxis: {
title: {
text: 'PRICE',
},
},
xAxis: {
title: {
text: 'PERIOD',
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
navigator: {
enabled: false,
},
rangeSelector: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: seriesOptions
});
}
});
The feature to automatically collapse weekends is not completely implemented yet. It is scheduled for the next release of highstock (the one after 1.0.2). Here is the corresponding feature request: on uservoice