I've created a simple map with basic configurations. Labels are showing in the incorrect position. Any idea?
var map_chart;
function init_map(){
map_chart = new Highcharts.chart({
chart: {
type: 'map',
renderTo: 'map_container'
},
series: [{
mapData: Highcharts.maps['custom/world'],
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
}
$( document ).ready(function() {
init_map();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="map_container">
</div>
For proper way of creating maps using Map collection
From highmaps docs
In the map collection reference, each map name is followed by a link to an example. View the source of this example to get started. In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.
Add the map as a JavaScript element:
<script src="http://code.highcharts.com/mapdata/custom/world.js">
You can alternatively link to a specific version or subversion of the map at http://code.highcharts.com/mapdata/1.1/custom/world.js.
Load it in series.mapData:
mapData: Highcharts.maps['custom/world'],
Alternatively, you can set the default map for all series with the chart.map option:
map: 'custom/world'
Join your data with the map. By default Highmaps is set up to map your data against the hc-keyproperty of the map collection, allowing you to define your data like this:
data: [['us-ny', 0], ['us-mi', 5], ['us-tx', 3], ['us-ak', 5]]
For other data joining options, see the series.joinBy and series.keys options.
Fiddle demo link
This seems to be caused by how the highmaps object is initiated.
replacing
map_chart = new Highcharts.chart({
with
map_chart = new Highcharts.Map({
solves the problem, JSFiddle
Related
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
}
});
I am using highmaps in my application with drilledown enabled, it works fine for the sample data given for usa.
But it does not work with the data for srilanka. what could be the issue?
Here is my code:
$('#container').highcharts('Map', {
chart : {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/lk/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
console.log(i);
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: 'Sri Lanka' });
}
}
}
JSFiddle Link
The drilldown data doesn't exist in the Highmaps Map Collection for Sri Lanka. If you scroll down the page you can see that at the moment the only countries with data below country level (e.g. admin2 level) are Canada, Germany, France, Netherlands, Norway, USA.
When you click a district the fiddle is trying to retrieve data from a corresponding URL:
mapKey = 'countries/lk/' + e.point.drilldown + '-all',
and for Sri Lanka it is failing because the JS file for each district does not exist.
There is more info in the Highmaps docs about creating maps:
Highmaps loads its maps from GeoJSON, an open standard for description
of geographic features. Most GIS software supports this format as
export from for instance Shapefile or KML export. Read more in the API
reference and see the live demo.
There are three basic sources for your map:
Use our Map collection. Read the tutorial article on the map
collection to get started.
Find an SVG map online and convert it using
our (experimental) online converter.
Create your own map from scratch
using an SVG editor, then convert them online. Read our tutorial on
Custom maps for Highmaps.
and about the Highmaps Maps Collection:
For your convenience, Highmaps offers a free collection of maps,
optimized for use with Highmaps. For common maps, it saves you the
trouble of finding or drawing suitable SVG or GeoJSON maps.
For Admin2, we have only compiled selected countries, and these maps
are created from national files with their own license which is
specified on the SVG map and in the other format files as meta data.
If you miss your country, please contact us and we'll try to find a
suitable shapefile and generate more maps.
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 basically from 'c language' background, and having no sound idea about scripting.
what i wanted to achieve is this:
There is a bar graph which is presented in the SwapView. Now each time when the user visits this SwapView, i would like to reload the Bargrap with new set of datas. Assume that i have a data globally ie: window.myvalues. Which event i need to capture, and how to do that?
Kindly advice. Here is the sample which i have used from dojo site.
<div id="barview" data-dojo-type="dojox.mobile.SwapView">
<script>
function mybarchartNode(){
require([
// Require the basic chart class
"dojox/charting/Chart",
// Require the theme of our choosing
"dojox/charting/themes/MiamiNice",
// We want to plot Columns
"dojox/charting/plot2d/Columns",
// Require the highlighter
"dojox/charting/action2d/Highlight",
// We want to use Markers
"dojox/charting/plot2d/Markers",
// We'll use default x/y axes
"dojox/charting/axis2d/Default",
// Wait until the DOM is ready
"dojo/domReady!"
], function(Chart, theme, ColumnsPlot, Highlight) {
console.log ("Data set in the bar graph ");
console.log (window.myDatas);
// Define the data
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
// Create the chart within it's "holding" node
var chart = new Chart("barchartNode");
// Set the theme
chart.setTheme(theme);
// Add the only/default plot
chart.addPlot("default", {
type: ColumnsPlot,
markers: true,
gap: 5
});
// Add axes
chart.addAxis("x");
chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
// Add the series of data
chart.addSeries("Monthly Sales",chartData);
// Highlight!
new Highlight(chart,"default");
// Render the chart!
chart.render();
});
} /* Function End */
</script>
<div id="barchartNode" style="width: 250px; height: 150px;"></div>
</div> <!- swap space end -->
<!-- configure and load dojo -->
<script src="dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojox/mobile/parser", "dijit/registry", "dojox/mobile", "dojox/mobile/SwapView", "dojox/mobile/TabBar", "dojox/mobile/TreeView", "dijit/tree/TreeStoreModel","dojox/mobile/Button", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"],
function(parser) {
parser.parse();
});
mybarchartNode();
</script>
You may hook up onAfterTransitionIn or onBeforeTransitionIn of dojox/mobile/SwapView
Quote from Dojo Reference
Stub function to connect to from your application.
Called before/after the arriving transition occurs.