Develop Reference

Highcharts not displaying chart but no errors

I'm working on data visualization with Highcharts but since I started fetching my data from an API, it doesn't display anymore.
Data is response from the API. The information is gotten from the array (trying to mimic an API here), but this still doesn't display after a lot of tweaking and it doesn't display any errors.
It be helpful if one could also point out how to display highchart errors.
$(document).ready(function() {
Highcharts.setOptions({
lang: {
numericSymbols: null
}
});
data = [{
"chart": {
"height": 500,
"renderTo": "chart_ID",
"type": "line"
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": false
}
},
"series": [{
"data": [5000.0, 4100.0, 1000.0, 7500.0, 5100.0, 5000.0],
"name": "Amount"
}, {
"data": [179, 86, 150, 393, 188, 322],
"name": "Millage"
}],
"title": {
"text": "Jhpiego Fuel Consumption"
},
"xAxis": {
"categories": ["3 Jul", "12 Jul", "13 Jul", "14 Jul", "15 Jul", "16 Jul"]
},
"yAxis": {
"max": 1000000,
"title": {
"text": "Fuel Price"
}
}
}]
apiData = data[0];
highChartInfo = {
chart: {
renderTo: apiData.chart.renderTo,
type: apiData.chart.type,
height: 500,
displayErrors: true
},
plotOptions: {
line: {
dataLabels: {
enabled: apiData.plotOptions.line.dataLabels.enabled
},
enableMouseTracking: apiData.plotOptions.line.enableMouseTracking
}
},
title: {
text: apiData.title.text
},
xAxis: {
categories: apiData.xAxis.categories
},
yAxis: {
title: {
text: apiData.yAxis.title.text
},
max: apiData.yAxis.max
},
series: [{
name: apiData.series[0].name,
data: apiData.series[0].data
},
{
name: apiData.series[1].name,
data: apiData.series[1].data
}
],
}
console.log(highChartInfo)
$(data[0].chart.renderTo).highcharts(highChartInfo);
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart_ID" class="chart" style="height: 100%; width: 100%"></div>

Using custom dataformat in chart.js for Multi Axis Line Chart

The data I get from the server as a response is formatted as following:
[
{
"date": "2019-03-04T14:59:35.000Z",
"data1": 21.739999771118164,
"data2": 57.72999954223633
},
{
"date": "2019-03-04T14:59:42.000Z",
"data1": 21.739999771118164,
"data2": 57.72999954223633
},
{
"date": "2019-03-04T14:59:50.000Z",
"data1": 21.729999542236328,
"data2": 57.7400016784668
}
]
How can I use this dataformat to create a Multi Axis Line Chart with chart.js?

Using example Line Chart - Multi Axis you can try to change it a little bit and find simething like below:
var json = [
{
"date": "2019-03-04T14:59:35.000Z",
"data1": 21.739999771118164,
"data2": 57.72999954223633
},
{
"date": "2019-03-04T14:59:42.000Z",
"data1": 21.739999771118164,
"data2": 57.72999954223633
},
{
"date": "2019-03-04T14:59:50.000Z",
"data1": 21.729999542236328,
"data2": 57.7400016784668
}];
var labels = json.map(i => i.date);
var dataset1 = json.map(i => i.data1);
var dataset2 = json.map(i => i.data2);
let renderChart = function () {
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
"type": "line",
"data": {
"labels": labels,
"datasets": [
{
"label": "Dataset1",
"data": dataset1,
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1,
yAxisID: "y-axis-1",
}, {
"label": "Dataset2",
"data": dataset2,
"fill": false,
"borderColor": "rgb(0, 192, 255)",
"lineTension": 0.2,
yAxisID: "y-axis-2",
}]
},
"options": {
responsive: false,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Multi Axis'
},
scales: {
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
}
Above code prints:

Place tick marks between bars in Plotly.js

Is it possible in Plotly.js to place tick marks between the bars? Here i'd like the ticks to represent cut points in a continuous distribution and the bars to represent counts within the intervals between. An alternative is to make the axis labels ranges, e.g. "5-<10", "10-<25", "25-<50", etc. but it seems cleaner to show the breaks.
Below is a mockup in Paintbrush showing the desired effect, here i added tick marks and moved the number labels by dragging. Also is a Codepen link to toy data: https://codepen.io/proto/pen/bKGOXg
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
width: 500,
height: 360,
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);

So I checked the plotly documentation, please checkout the documentation available here
We have a property under the bar chart object called offset. Plotly describes this property as.
offset (number or array of numbers)
Shifts the position where the bar is drawn (in position axis units).
In "group" barmode, traces that set "offset" will be excluded and
drawn in "overlay" mode instead.
When I set the property to 0.1, I am getting the expected result. Please checkout the below example and let me know if this solves your issue!
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
offset: 0.1,
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
colorway: [
"#3399CC",
"#99BB66",
"#2266AA",
"#FFCC00",
"#888888",
"#FFAA00",
"#800080"
],
color: "purple",
plotlyType: "bar",
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
ticks: "outside",
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
transposeData: false,
showOverall: false,
width: 500,
height: 360,
showLegend: true,
reverse: {},
titles: {},
swapCategoryAndLegend: false
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>

How to put the Y-axis of a chart to the right-side of it

I created a chart in Billboard.js which looks like this:
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": columns
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
 "label": {
"text": label,
"position": "outer-center"
},
},
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
Now it looks like the classic style, X axis on the bottom and Y axis on the left. I want to move the Y axis on the right of the table.
I've tried many ways to do it but without success like these ones:
-changing its name from y to y2
-adding the same code but with y2:
"y": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
I addied show attribute inside the label like this:
"y": {
"label": {
"show": false,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
"y2": {
"label": {
"show": true,
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
Any ideas?

Try
var chart = bb.generate({
"data": {
"columns": [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2" // set additional y axis
}
},
"axis": {
"y": {
"show": false // hide default y axis
},
"y2": {
"show": true
}
},
"bindto": "#AdditionalYAxis"
});
I have tried it on their demo from github. There is an option axis where you can simply hide the axis. Hope this helps.
Working Example: https://jsfiddle.net/k3o1ws47/

I think, #Nouphal pointed exactly what to do.
The key point is set data.axes options to bound datas to y2 axis.
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:axes
I made working demo with your code(except the data value), so replace it setting with your data and will work.
var chart = bb.generate({
"data": {
"type": "line",
"x": "x",
"columns": [
// replace with your data value
['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
"axes": {
"data1": "y2",
"data2": "y2"
}
},
"point": {
"show": false
},
"legend": {
"show": false
},
"axis": {
"x": {
"localtime": false,
"type": "timeseries",
"tick": {
count: 7,
"format": "%b %d, %Y",
"rotate": 45,
"multiline": true
},
 "label": {
"text": "label",
"position": "outer-center"
},
},
"y": {
"show": false
},
"y2": {
"show": true,
"label": {
"text": "Energy (kWh)",
"position": "outer-middle"
},
},
},
"bindto": "#main-chart"
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
<div id="main-chart"></div>
</body>
</html>

Issues with amcharts

I am making stock charts with amcharts library . Here is what I have achieved
And here is what I want
You can compare both picture and see I have cylindrical and moving avg graph (dashed lines) but I am not able to add spikes which are showing at the bottom of graph in original one. (Pink and orange color). I don't know how to add those spikes in stock graph .
My data is dynamic so I can't create a js fiddle but I can provide my function here-
function load_stock_graph(graph_type, history, title, aggregate){
// DEFINE CHART PLUGINS
AmCharts.averageGraphs = 0;
AmCharts.addMovingAverage = function (dataSet, panel, field, aggregate, col ,graph) {
// update dataset
var avgField = "avg"+AmCharts.averageGraphs;
dataSet.fieldMappings.push({
fromField: avgField,
toField: avgField});
// calculate moving average
var fc = 0;
var sum = 0;
for (var i = 0; i < dataSet.dataProvider.length; i++) {
// console.log(aggregate[i].ema_0008)
var dp = dataSet.dataProvider[i];
if (dp[field] !== undefined) {
sum += dp[field];
fc++;
if (aggregate[i] !== undefined){
if(col == '08'){
dp[avgField] = aggregate[i].ema_0008;
}else if(col == '15'){
dp[avgField] = aggregate[i].ema_0015;
}else if(col == '20'){
dp[avgField] = aggregate[i].ema_0020;
}
}
}
}
// create a graph
graph.valueField = avgField;
panel.stockGraphs.push(graph);
// increment average graph count
AmCharts.averageGraphs++;
}
// CHART DATA
var chartData = [];
var chartData1 = [];
generateChartData(history);
function generateChartData(history) {
var firstDate = new Date();
firstDate.setHours(0, 0, 0, 0);
firstDate.setDate(firstDate.getDate() - 2000);
for (var i = 0; i < history.length; i++) {
var date = new Date(history[i].date);
var val = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: date,
open: history[i].open,
close: history[i].close,
high: history[i].high,
low: history[i].low,
volume: history[i].volume,
value: val
});
}
}
// CHART CONFIG
var chartConfig = {
type: "stock",
pathToImages : "/static/img/amcharts/",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "val"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date",
compared: false,
},
{
fieldMappings: [{
fromField: "value",
toField: "value"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date"
},
],
panels: [{
title: "Value",
percentHeight: 70,
stockGraphs: [{type: graph_type,
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#fff",
fillColors: "#fff",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
comparedGraphLineThickness: 2,
columnWidth: 0.7,
useDataSetColors: false,
comparable: true,
compareField: "close",
showBalloon: false,
//proCandlesticks: true
} ],
stockLegend: {
valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
},
{
title: "Volume",
percentHeight: 40,
marginTop: 1,
columnWidth: 0.6,
showCategoryAxis: false,
valueAxes: [{
usePrefixes: true
}],
stockGraphs: [ {
valueField: "volume",
openField: "open",
type: "column",
showBalloon: false,
fillAlphas: 1,
lineColor: "#fff",
fillColors: "#fff",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
useDataSetColors: false,
} ],
stockLegend: {
markerType: "none",
markerSize: 0,
labelText: "",
periodValueTextRegular: "[[value.close]]"
}
}
],
panelsSettings: {
color: "#fff",
plotAreaFillColors: "#333",
plotAreaFillAlphas: 1,
marginLeft: 60,
marginTop: 5,
marginBottom: 5
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
backgroundColor: "#333",
graphFillColor: "#666",
graphFillAlpha: 0.5,
gridColor: "#555",
gridAlpha: 1,
selectedBackgroundColor: "#444",
selectedGraphFillAlpha: 1
},
categoryAxesSettings: {
equalSpacing: true,
gridColor: "#555",
gridAlpha: 1
},
valueAxesSettings: {
gridColor: "#555",
gridAlpha: 1,
inside: false,
showLastLabel: true
},
chartCursorSettings: {
pan: true,
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
legendSettings: {
color: "#fff"
},
stockEventsSettings: {
showAt: "high"
},
balloon: {
textAlign: "left",
offsetY: 10
},
periodSelector: {
position: "bottom",
periods: [ {
period: "DD",
count: 10,
label: "10D"
}, {
period: "MM",
count: 1,
label: "1M"
}, {
period: "MM",
count: 6,
selected: true,
label: "6M"
}, {
period: "YYYY",
count: 1,
label: "1Y"
}, {
period: "YYYY",
count: 2,
label: "2Y"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
} ]
},
"export": {
"enabled": true,
"backgroundColor": "#fff",
"dataDateFormat": "YYYY-MM-DD"
}
}
// ADD INDICATORS
// ema_0008
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '08', {
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#F4F009",
title: "aggregate ema 0008",
dashLength: 3
});
// ema_0015
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '15',{
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#2C7F1D",
title: "aggregate ema 0015",
dashLength: 3
});
// ema_0020
AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '20',{
useDataSetColors: false,
color: "#ccffcc",
lineColor: "#A109E8",
title: "aggregate ema 0020",
dashLength: 3
});
// Empty chart instance so that chart loaded via ajax can work correctly
AmCharts.charts = [];
// CREATE CHART
var chart = AmCharts.makeChart("chartdiv", chartConfig);
}

Sounds like you just need to add another line graph in a separate panel.
Here's how to do it:
1) Add additional field in your data. You currently have open, high, low, close field. Let's add another one, say, "pink".
2) Update Data Set's fieldMappings property, to accommodate for the change:
[{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "val"
}, {
fromField: "pink",
toField: "pink"
}]
3) Add additional stock panel and a graph that will use the newly added data field:
{
percentHeight: 20,
showCategoryAxis: false,
stockGraphs: [{
valueField: "pink",
showBalloon: false,
lineColor: "#fb02fe",
lineThickness: 2,
useDataSetColors: false
}]
}
If you would have wanted to add the indicator to some existing panel, you would just need to define the graph in it's stockGraphs array. I.e.:
{
percentHeight: 20,
showCategoryAxis: false,
stockGraphs: [{
valueField: "pink",
showBalloon: false,
lineColor: "#fb02fe",
lineThickness: 2,
useDataSetColors: false
}, {
valueField: "red",
showBalloon: false,
lineColor: "#cc0000",
lineThickness: 2,
useDataSetColors: false
}]
}
Use this process to add as many indicators as you need.
Here's a working demo (with random values)
http://codepen.io/amcharts/pen/938b09efeabca4596c0a2cdaea60a269