Newbie question. With the flot jquery library I'm trying to set the series options, but I'm getting an error: "Unexpected identifier" on the series: { line.
I'm trying to follow https://github.com/flot/flot/blob/master/API.md#plot-options. Is there just something i'm not understanding?
<!DOCTYPE html>
<html>
<head>
<title>Flot Graph Testing</title>
<script src="jquery-2.0.3.js"></script>
<script src="jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var options = {
grid: {
show: false
}
series: {
bars: {
show:true
}
}
};
var rawdata = [[0, 3], [2, 8], [4, 5], [6, 13]];
var data = [{data: rawdata }]
$.plot("#placeholder", data, options);
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Flot graph</h2>
</div>
<div id="content">
<div class="container">
<div id="placeholder" class="my-placeholder" style="width:600px;height:300px"></div>
</div>
<p>This is a flot graph</p>
</div>
</body>
</html>
You are missing a comma to separate the properties of the options object:
var options = {
grid: {
show: false
}, // <-- comma
series: {
bars: {
show:true
}
}
};
Related
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>
Hi,
this is my first post on stack so plz correct if wrong. I wish to know how do I access the properties of highstock chart in the above example. eg. if i want to set the 'selected' property of 'rangeselector' externally through code how to do it. Any help will be highly appreciated.
Thanks
You can:
Store a chart in a variable:
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Use load event:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
Use a callback function:
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Live demo: http://jsfiddle.net/BlackLabel/3L7uvm4n/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.chart
https://api.highcharts.com/highcharts/chart.events.load
In this boxplot generated by plotly.js, after selecting points, the non-selected points get an opacity of 0.2.
Is it possible to change the styling of selected and non-selected points ?
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints : [1,2,5],
boxpoints: 'all'
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<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"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
If you look at the reference, you can see that there are properties for "selected" and "unselected" markers which allows you to change their styling:
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints: [1, 2, 5],
boxpoints: 'all',
selected: {
marker: {
color: '#ff0000',
opacity: 0.8
}
},
unselected: {
marker: {
color: '#00ff00',
opacity: 0.5
}
}
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<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"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
I'm trying to build a dynamic chart that updates every second off of this API data using CanvasJS: http://www.coincap.io/history/1day/BTC
I can't get the correct values to show. Right now it is only showing the first data set (MktCap) in the X axis. I need the data from the second set (Price). Am I messing up the keys?
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var dataPoints = [];
var chart;
$.getJSON("http://www.coincap.io/history/1day/BTC", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[1][0], y: parseInt(value[1][1])});
});
chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Live Chart with dataPoints from External JSON"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
chart.render();
updateChart();
});
function updateChart() {
$.getJSON("http://www.coincap.io/history/1day/BTC", function(data) {
$.each(data, function(key, value) {
dataPoints.push({
x: parseInt(value[1][0]),
y: parseInt(value[1][1])
});
});
chart.render();
setTimeout(function(){updateChart()}, 1000);
});
}
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
The problem is in $.each(data, ... because data is an object, with the following shape:
{
"market_cap": [[0, 1], [1, 2], [2, 1], ...],
"price": [[0, 21], [1, 42], [2, 11], ...],
"volume": [[0, 10], [1, 3], [2, 2], ...],
}
When calling $.each over the object, it is iterating over the keys of the object. With you code, it is getting only two items of the array. What you would want to do is choose "price", so it will iterate over all of the items. For example:
$.each(data.price, function(key, value) {
dataPoints.push({
x: value[0],
y: value[1],
})
})
Both in the initial and updateChart functions. Please note that you don't need to use parseInt because it is already an integer. After that, you will see the correct line.
I have one html page where there are two divs. In each div I am loading different jsp files(one.jsp and two.jsp).
home.html:
<script src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/highcharts.js"></script>
<script type="text/javascript" src="resources/js/exporting.js"></script>
<script type="text/javascript" src="resources/js/export-csv.js"></script>
<script>
function loadGraphs()
{
$('#plotContainer1').load('one.jsp');
$('#plotContainer2').load('two.jsp');
}
</script>
where plotContainer1 and plotContainer2 are two divs. So that I want to load two graphs at a time.
one.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;
function drawgraph1() {
Highcharts.setOptions({
colors: ['#54CBE5', '#57B442']
});
chart = $('#container1').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: graphTitle
},
xAxis: {
tickInterval: 30,
type: 'datetime',
categories: xAxisCategories
},
yAxis: {
min : 0,
title: {
text: ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series : seriesArray
});
};
function callAjax() {
$("#container1").empty();
seriesArray = [{
name: 'line1',
data: []
}, {
name: 'line2',
data: []
}];
xAxisCategories = [];
var params = {"param1" : value};
$.getJSON("graph1datafetcher",params, function(data) {
$.each(data, function(key, val) {
var xaxisPoints=data[key];
xAxisCategories.push(Date.parse(key));
for(var i in xaxisPoints) {
seriesArray[i].data.push(xaxisPoints[i]);
}
});
console.log(" JSON: " + JSON.stringify(data));
drawgraph1();
});
}
</script>
</body>
</html>
two.jsp almost contains the same code. Now first two.jsp loads as it contains less data compared to one.jsp. When one.jsp loads in and shows up in div, the one.jsp graph shows two.jsp data and its own data too. I am logging the data in the console, the data that is coming is fine. So, the problem is somewhere the highchart persists the first data. I have been struggling with this for past 7 hours. Can someone please answer how to resolve this?
I'm trying to use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.
Anyone has an idea?
I've tried reordering the scripts a few times. I just can't figure it out. :(
Here is the html.
<html ng-app="profitly">
<head>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/Chart.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-chartjs.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="MainController" class="container-fluid">
<div class="wrapper" ng-view>
<article ng-controller="graph">
<cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>
</article>
</div>
</body>
<html>
And here is the app initialization:
var app = angular.module('profitly', ['ngRoute', 'chartjs']);
And here is the controller for this part:
app.controller('graph', function($scope) {
$scope.someData = {
labels: [
'Supply',
'May',
'Jun'
],
datasets: [
{
data: [1, 7, 15, 19, 31, 40]
},
{
data: [6, 12, 18, 24, 30, 36]
}
]
};
$scope.someOptions = {
segmentStrokeWidth: 20,
segmentStrokeColor: '#000'
};
});
Someone else on my hack team figured it out later that day.
Here is the HTML:
<article class="col-xs-6 col-md-offset-3 col-md-6 center">
<canvas id="expenses" width="200" height="100"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var expenses = document.getElementById("expenses").getContext("2d");
new Chart(expenses).Pie(pieData, pieOptions);
</script>
</article>
For more, our github repo (the view was the "cashflow.html" one) and to see how it rendered.
Probably not the best way to do it.
It looks like your missing ng-app in your HTML which would contain which angular app you will be using.
You can put it in the inside one of the divs wrapping the graph.