I have a Highcharts line chart and I would like to add a range selector to it. To do this, I read that you have to use Highstock, so I am trying to re-make the chart but it won't load the csv data. There is no error message or anything in the console, the lines just don't show up. Is there a different format/syntax I have to use? Here is the relevant code:
$(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
title: {
text: 'My chart'
},
data: {
csv: document.getElementById('csv').innerHTML
},
});
});
Thanks in advance!
Loading data in Highchart and Highstock works the same. Notice, that data requires the data module to be loaded additionally. Your options seem good, so it can be the issue.
Highcharts data documentation:
It requires the modules/data.js file to be loaded.
Check the demo:
https://jsfiddle.net/wchmiel/afy6m3tb/
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
<h3>Raw data</h3>
<pre id="data">Date,series A, series B, series C, series D, series E, series F
3/01/2001,100,100,100,100,100,100
4/01/2001,100.0723,100.0766,100.1225,100.1446,100.1687,100.1325
5/01/2001,100.0399,99.9775,100.0809,100.3502,100.1117,100.5127
6/01/2001,100.3103,100.3867,100.2974,100.5214,100.4256,100.6885
7/01/2001,101.3379,102.0689,100.686,100.6031,100.9522,100.7648
</pre>
JS:
window.chart = Highcharts.stockChart('container', {
data: {
csv: document.getElementById('data').innerHTML
}
});
Related
I am trying to figure out a way to generate google column chart with each column in different/random color. Here are the details of the way I am generating charts:
Client/Javascript:
Using google.visualization.ChartWrapper to draw chart. Here is the code snippet:
var wrapper = new google.visualization.ChartWrapper({
chartType : chartType,
dataSourceUrl : url,
containerId : 'chartDiv',
options : chartOptions
});
Data is fetched from a rest service(url param above) written in java.
Here are few things i have tried so far but no luck:
Tried to add few random colors in javascript code under options array:
chartOptions = {
title : name,
is3D : true,
colors: ['red','yellow', 'blue'],
}
This only painted all the columns in red color.
Server Side/ Java
Tried to add a com.google.visualization.datasource.datatable.Datatable custom style property in the data sent back from java code:
data.setCustomProperty("style", "color: darkred"); // thought to add randomely genrated colors if it worked
but this caused no effect on the chart color and it displayed all columns in default blue.
Samples given on official documentation is with static data and not able to find the right way to do it.
You could customize these colors with the style role, for example:
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
Working example
google.load('visualization', '1'); // Don't need to specify chart libraries!
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
getChartData(function(data){
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: data,
options: {
'title': 'Density of Precious Metals, in g/cm^3',
},
containerId: 'vis_div'
});
wrapper.draw();
});
}
function getChartData(complete) {
$.getJSON('https://gist.githubusercontent.com/vgrem/f5b04c1c55b15ad1167f/raw/d04d79c1d4d0e9f3463f23d779d23fcdab89adff/density.json', function (json) {
var dataTable = new google.visualization.DataTable(json);
complete(dataTable);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="vis_div" style="width: 600px; height: 400px;"></div>
JSON data file: density.json
Thanks to Vadim for sharing the json response, which actually helped me to do it in java:
Apart from my usual columns, i added one more to DataTable, like this:
ColumnDescription color = new ColumnDescription("", ValueType.TEXT, "");
color.setCustomProperty("role", "style");
data.addColumn(color);
And when adding rows to the DataTable, i have added random color:
data.addRowFromValues( dataEntry, datatypeCountMap.get(dataEntry), getRandomColor());
Finally got a column chart with single series but each column in different color.
Note: I was using the same logic for LineChart but it does not look great with different colors.
I am having trouble charting a json file in highcharts javascript. Below is my code. Any help would be greatly appreciated.
My test.json file simply contains: [1, 2]
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var a = $.get('test.json');
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: [a]
}]
});
});
</script></head>
<body>
<div id="container"></div>
</body>
</html>
I'm pretty sure that if you're not seeing anything (or a weird graph) it's cause you should have:
data: a
as opposed to
data: [a]
The data field is supposed to be an array of integers. As it stands now it looks like an array of array of integers which will be misinterpreted by Highcharts.
you are passing the array as an element inside a array resulting a array of array of integers. this makes it plot only in some odd cases but not always
odd case means [[1,2,3,4]], this will not be plotted
for example
[[1,2], [2,4]] indicates 2 points to be plotted at (1,2) and (2,4) positions in the chart.
so in your case it plots only point at (1,2) instead of 2 points at you want,
[1,2] indicates 2 points with y value of first at 1 and second at 2
I think that is the issue you are getting, instead of 2 points only one point is plotted
so it should be
date: a
but not
data: [a]
I think the problem is with your AJAX call, according to docs, you should use callback:
<script type="text/javascript">
$(function () {
$.get('test.json', function(data) {
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: data
}]
});
});
});
</script>
So: create chart in callback, which is called after data from AJAX comes to the JS.
You should initialise your chart in the $.get() callback, because then you avoid missing data.
$(function () {
var a = $.get('test.json',function(data){
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: data
}]
});
});
});
I am trying to add programmaticallya string to the x axis, instead than declaring it in the chart creation.
So for example, I have my chart:
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: 'theYaxis'}
}
series: [1,2,3,4]
});
});
Now I want to change the yAxis title, so I create a small function; so it will look like this:
var titleY;
function loadme(){
$.get('names.csv', function(data){
var lines= data.split('\n');
titleY=lines[0].split(','[0];
});
}
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: titleY}
}
series: [1,2,3,4]
});
loadme();
});
This will result in the title being empty.
I am checking to be sure that the value is correctly retrieved, using console.log, and the value is collected and printed. What is wrong here? I get the same issue if I populate the $.get function with data that I want to add to the series in the chart: the data is never add to the chart, even if it is correctly retrieved.
I have created a demo fiddle to dynamically change y-axis title. Refer this JSFIDDLE
HTML:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">
JS (part of thec code to update the y-axis title on a button click):
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});
Refer Highcharts 'update' function documentation for further details.
You have two options:
use axis.setTitle() - good performance, I advice use that solution for setting title
use axis.update() - lower performance, because it recreates whole axis, while first method only changes title
Im try to add meter gauge to my site, I added the js and the css to my info file
than in the page I have this code
<script>$(document).ready(function(){
s1 = [1];
plot0 = $.jqplot('chart0',[s1],{
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
</script>
<div class="plot0" style="width:250px;height:170px;"></div>
It give me an error "Uncaught No plot target specified ", any ideas?
You need to attach an id to your container :
<div id="chart0" class="plot0" style="width:250px;height:170px;"></div>
And then to use this id to plot your chart
Please see a working example here on JSFiddle
I am using HighCharts JS for making a bubble chart. It's a pretty self-explanatory but what I am trying to do is a changed mechanism.
the graph loads the chart perfectly, but it loads all the columns (or series) at the same time. What I am hoping to do is that it loads each column one-by-one.
You can see the example graph at this link:-
http://www.highcharts.com/demo/bubble
As you can see in the sample graph shown above, they have three series, and they all load simultaneously; I was hoping that it loads one-by-one.
Any idea,
Thanks.
You can remove series from options, and add all of them in load event. Demo: http://jsfiddle.net/qc8bS/
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
events: {
load: function () {
var chart = this;
function addSeries() {
if (s.length > 0) {
chart.addSeries(s[0]);
setTimeout(addSeries, 1000);
s.splice(0, 1);
}
}
addSeries();
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: []
});