howto integrate amcharts in #meteorJS - javascript

I want to use amcharts in my meteor project, how can I integrate amcharts in meteor project?
I added mrt:amcharts package to my project.
Copied amcharts free version folder to my public folder. But it is not appearing.
My code is following.
chart.html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="/amcharts/amcharts.js" type="text/javascript"></script>
<script src="/amcharts/serial.js" type="text/javascript"></script>
<script src="/amcharts/amstock.js" type="text/javascript"></script>
<link rel="stylesheet" href="/amcharts/style.css" type="text/css">
</head>
<template name="chart">
<p>chart is here</p>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</template>
chart.js
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
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 a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a3 = Math.round(Math.random() * (100 + i)) + 200;
var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
chartData1.push({
date: newDate,
value: a1,
volume: b1
});
chartData2.push({
date: newDate,
value: a2,
volume: b2
});
chartData3.push({
date: newDate,
value: a3,
volume: b3
});
chartData4.push({
date: newDate,
value: a4,
volume: b4
});
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData2,
categoryField: "date"
},
{
title: "third data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData3,
categoryField: "date"
},
{
title: "fourth data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData4,
categoryField: "date"
}
],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
compareField: "value",
balloonText: "[[title]]:<b>[[value]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.value.close]]%",
periodValueTextRegular: "[[value.close]]"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1,
valueLineBalloonEnabled:true,
valueLineEnabled:true,
valueLineAlpha:0.5
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});

try this: mrt add amcharts
Also, within your chart initialization, if referencing any images (e.g. 'export.png'), please prepend the path with the package path. E.g.
"exportConfig":{
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": '/packages/amcharts/lib/images/export.png',
"format": 'png'
}]
}

Related

dropdown for Year not showing unless I click on each cell

I am using jqwidgets JS library and having one issue in displaying the dropdown under Year column. As can be seen in the code below, the Year column is not displaying the jqxDropdownList unless I click on it. For example, when I clicked on the first cell of Year column, it showed me the list as shown below:
Can anyone tell me what am I doing wrong here? Please find my code below:
var data = new Array();
var firstNames = [
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = [
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var productNames = [
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = [
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < 10; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["available"] = !!(i % 2);
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
$("#jqxgrid").jqxGrid({
theme: 'energyblue',
width: 500,
autoheight: true,
editable: true,
source: dataAdapter,
columns: [{
text: 'Available',
datafield: 'available',
width: 100,
columntype: 'checkbox'
}, {
text: 'First Name',
datafield: 'firstname',
width: 100
}, {
text: 'Last Name',
datafield: 'lastname',
width: 100
}, {
text: 'Product',
datafield: 'productname',
width: 180
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
width: 90,
cellsalign: 'right',
cellsformat: 'c2'
},
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
}
},
{
text: 'Total',
datafield: 'total',
width: 100,
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
//console.log(rows);
var selectedRows = rows.filter(x => x.available)
console.log(selectedRows)
//alert(rows);
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />
Testing cellsrenderer function based on the Muzaffer Galata'sanswer:
var data = new Array();
var firstNames = [
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = [
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var productNames = [
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = [
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < 10; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["available"] = !!(i % 2);
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
+ value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
$("#jqxgrid").jqxGrid({
theme: 'energyblue',
width: 500,
autoheight: true,
editable: true,
source: dataAdapter,
columns: [{
text: 'Available',
datafield: 'available',
width: 100,
columntype: 'checkbox'
}, {
text: 'First Name',
datafield: 'firstname',
width: 100
}, {
text: 'Last Name',
datafield: 'lastname',
width: 100
}, {
text: 'Product',
datafield: 'productname',
width: 180
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
width: 90,
cellsalign: 'right',
cellsformat: 'c2'
},
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
},
cellsrenderer: cellsRendererForCombo,
},
{
text: 'Total',
datafield: 'total',
width: 100,
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
//console.log(rows);
var selectedRows = rows.filter(x => x.available)
console.log(selectedRows)
//alert(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />
You may use cellsrenderer option:
var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
+ value + '<img src="../../Scripts/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
........
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
},
cellsrenderer: cellsRendererForCombo,
},
.......
try to use renderer function to give it UI you want
renderer: function(instance, td, row, col, prop, value, cellProperties) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
$(td).jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
// or $(td).find("span").jqxDropDownList({......
return td;
}

How to add HTML to the panel title in amchart

How to add HTML to the panel title in amchart. I tried adding HTML for title but its rendering as HTML code only.
Here is the DEMO.
Here is the JavaScript code:
var chartData1 = [];
var chartData2 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
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 a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
chartData1.push({
date: newDate,
value: a1
});
chartData2.push({
date: newDate,
value: a2
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value2"
}],
dataProvider: chartData2,
categoryField: "date",
compared: true
}
],
panels: [{
showCategoryAxis: false,
title: "<span>Hello</span>",
recalculateToPercents: "never",
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true
}],
stockLegend: {
}
}, {
showCategoryAxis: true,
title: "Data set #2",
recalculateToPercents: "never",
stockGraphs: [{
id: "g2",
valueField: "value2",
compareField: "value2",
comparable: true,
visibleInLegend: false
}],
stockLegend: {
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
cursorColor: '#000000',
cursorAlpha:0.1
},
periodSelector: {
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
It only supports text. Depending on what you need, you can try styling it directly using css by setting addClassNames to true in your chart using the generated CSS classes. For example, to change the color of the first panel's legend title:
.amcharts-stock-panel-div-stockPanel0 .amcharts-legend-title {
fill: #ee0000;
}
Demo

How to reduce the hover line width in Amchart

How to reduce the hover line width in Amchart. Here is a screen shot of the live chart..
Here is a DEMO of the code in action.
Here is how the JavaScript code looks:
var chartData1 = [];
var chartData2 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
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 a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
chartData1.push({
date: newDate,
value: a1
});
chartData2.push({
date: newDate,
value: a2
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value2"
}],
dataProvider: chartData2,
categoryField: "date",
compared: true
}
],
panels: [{
showCategoryAxis: false,
title: "Data set #1",
recalculateToPercents: "never",
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true
}],
stockLegend: {
}
}, {
showCategoryAxis: true,
title: "Data set #2",
recalculateToPercents: "never",
stockGraphs: [{
id: "g2",
valueField: "value2",
compareField: "value2",
comparable: true,
visibleInLegend: false
}],
stockLegend: {
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
periodSelector: {
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
Your demo doesn't show the wide cursor but it seems that you figured it out - you have to remove fullWidth: true in your chartCursorSettings to make the cursor a normal narrow line rather than a wide one.

How to reload data in candle chart? AmChart library

I'm developing application based on REST architecture and CRUD assumptions using Java, Spring, Hibernate, and AmCharts Library.
But in my project I have a problem with reloading data in a candle chart (stock chart) from AmCharts.
My JavaScript code:
var request;
firstDeploy();
function firstDeploy() {
request = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=tBTCUSD&timeFrame=1D';
}
var candleChart = AmCharts.makeChart("chartdiv", {
type: "stock",
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: "value"
}],
color: "#7f8da9",
dataLoader: {
url: request,
format: 'json'
},
title: "tBTCUSD",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 70,
valueAxes: [{
id:"v1",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
type: "candlestick",
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#7f8da9",
fillColors: "#7f8da9",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
useDataSetColors: false,
comparable: true,
compareField: "value",
showBalloon: false
}],
stockLegend: {
valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
},
{
title: "Volume",
percentHeight: 30,
marginTop: 1,
showCategoryAxis: true,
valueAxes: [{
id:"v2",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
markerType: "none",
markerSize: 0,
labelText: "",
periodValueTextRegular: "[[value.close]]"
}
}
],
chartCursorSettings: {
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
updateOnReleaseOnly:false
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
$(options)
function options() {
var handler = handleDropdown(handleResults)
handler('#time-frame-list', 'time')
handler('#currency-pair-list', 'currency')
}
function handleResults(results) {
var mainRequest = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=t';
var resultsArray = JSON.stringify(results);
var currencyPair = resultsArray.substr(25,6);
var timeFrame = resultsArray.substr(9,2);
request = mainRequest + currencyPair + '&timeFrame=' + timeFrame;
candleChart.dataLoader.url = request;
candleChart.dataLoader.loadData();
console.log(request);
}
function handleDropdown(handler) {
var options = {}
return function(selector, key) {
options[key] = $(selector).val()
$(selector).change(function(event) {
options[key] = this.options[event.target.selectedIndex].value
handler(options)
})
}
}
My HTML code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>amStock Example</title>
<link rel="stylesheet" href="style.css">
<script src="amcharts.js" type="text/javascript"></script>
<script src="serial.js" type="text/javascript"></script>
<script src="amstock.js" type="text/javascript"></script>
<script src="dataloader.min.js" type="text/javascript"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="cryptoscript.js" type="text/javascript"></script>
</head>
<body style="background-color:#FFFFFF">
<center>
<div class="chart-background">
<div class="drop-down-menus">
<div class="time-frame-dropdown">
<select id="time-frame-list">
<option value="1D" selected>1D</option>
<option value="1h">1H</option>
</select>
</div>
<div class="currency-pair-dropdown">
<select id="currency-pair-list">
<option value="BTCUSD" selected>BTCUSD</option>
<option value="ETHUSD">ETHUSD</option>
</select>
</div>
</div>
</div>
<div id="chartdiv" class="chart-candle" style="width:50%; height:600px;"></div>
</div>
</center>
</body>
</html>
My RestController:
#RestController
#RequestMapping("v1/crypto")
public class CandleRestController {
#Autowired
private DbService service;
#Autowired
private CandleMapper candleMapper;
#RequestMapping(method = RequestMethod.GET, value = "getCandles")
public CandleDtoCharts[] getCandleList(#RequestParam String currencyPair, #RequestParam String timeFrame) {
System.out.println(currencyPair + " " + timeFrame);
return candleMapper.mapToCandleDtoChartsList(service.getCandlesByCurrencyPairAndTimeFrame(currencyPair, timeFrame));
}
}
I know that my RestController is receiving all the time the same "request" (url) after choosing other currency pair/or time frame and I don't know why?
You have to update the dataLoader url inside the dataSet. You're updating it at the chart level, which doesn't work in the stock chart.
candleChart.dataLoader.url = request; //this doesn't work in a stock chart
candleChart.dataSets[0].dataLoader.url = request; //this does.

Displaying multiple Highcharts from single json

In this fiddle : http://jsfiddle.net/LLExL/5018/
I'm displaying a chart with dates on X axis and counts on Y axis.
I'm attempting to generalize this a little by displaying multiple charts using a single snippet of json. So have defined this modified json file :
[
{
"header": "test1",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
},
{
"header": "test2",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
}
]
Does Highcharts support this type of functionality out of box ? If so how it be achieved ? Each header element above is chart header.
fiddle code :
html :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 350px; height: 300px;"></div>
javascript :
var pointStart = new Date().getTime();
var jsonString = '[ {"date":"2015-01-02","count":"36"} , {"date":"2015-01-03","count":"29"} ]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart : { type : 'line' },
title: {
text: 'test' // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#container').highcharts();
chart.addSeries({
data: data
});
});
Update :
http://jsfiddle.net/LLExL/5081/
Code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container0" style="width: 350px; height: 300px;"></div>
<div id="container1" style="width: 350px; height: 300px;"></div>
jQuery(document).ready(function() {
var jsonString2 = '[ { "header": "test1", "children": [ { "date": "2015-01-02", "count": "36" }, { "date": "2015-01-03", "count": "29" } ] }, { "header": "test2", "children": [ { "date": "2015-01-02", "count": "16" }, { "date": "2015-01-03", "count": "15" } ] } ]'
var myData = JSON.parse(jsonString2);
$.each(myData, function(i, obj) {
create(JSON.stringify(obj) , 'container'+i)
});
var jsonString = '{ "header": "tester", "children": [ { "date": "2015-01-02", "count": "76" }, { "date": "2015-01-03", "count": "29" } ] }'
// for (i = 1; i <= 2; i++) {
// create(jsonString , 'container'+i)
// }
function create(jsonString , containerName) {
var pointStart = new Date().getTime();
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData.children, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
$('#'+containerName).highcharts({
chart : { type : 'line' },
title: {
text: myData.header // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#'+containerName).highcharts();
chart.addSeries({
data: data
});
}
});
You can prepare parser, which puts a new div and create chart parsing data. The options can be common object, but using $.extend() is needed avoid using the same reference.
Parser:
var $chartGrid = $('#chart-grid'),
title = [],
serie,
date,
name;
$.each(json, function(i, item) {
name = 'container-' + i;
$chartGrid.append('<div id="'+name+'" class="chart"></div>');
serie = [{
data: []
}];
$.each(item.children, function(j, points) {
date = points.date.split('-'); //Date.parse doens't work in FF and IE
serie[0].data.push({
x: Date.UTC(date[0],date[1],date[2]),
y: parseFloat(points.count)
});
});
options.title.text = item.header;
options.series = serie;
$('#' + name).highcharts($.extend({}, options));
});
Example: http://jsfiddle.net/LLExL/5085/
try this out http://jsfiddle.net/Paulson/LLExL/5082/
var pointStart = new Date().getTime();
var jsonString = '[{"header":"test1","children":[{"date":"2015-01-02","count":"36"},{"date":"2015-01-03","count":"29"}]},{"header":"test2","children":[{"date":"2015-01-02","count":"29"},{"date":"2015-01-03","count":"36"}]}]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj1) {
var newData = [];
$.each(obj1['children'], function(i, obj2) {
var d = new Date(obj2.date)
newData.push([Date.parse(d), parseInt(obj2.count)])
});
data.push(newData);
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[0]
}]
});
$('#container2').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[1]
}]
});
});

Categories