We Keep Coding

Highmaps labels show in incorrect position

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

Google column chart random colors for dynamic data

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.

How to draw a column chart with one single field and multiple colors using google charts

Here is my code: jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.ColumnChart(container);
var options = {fontSize: 16};
chart.draw(data, options);
}
$(document).ready(function(){
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10 ],
['満足', 22 ],
['やや満足', 30 ],
['やや不満', 10 ],
['不満', 5 ]
]);
});
</script>
</head>
<body>
<div id="satisfactionBarGraph" style="width: 524px; height: 370px;" class="chartContainer"></div>
</body>
</html>
And this is what I really want:
I have two problems:
(1) I want the text below the x-axis to align top bottom
I have run through the document but cannot find the option
(2) I want the columns to be in different colors
Because I have only one filed, so all of them are in the same color. I'm wondering whether I used the right chart.
And suggestion will be appreciated
Thanks a lot for all your answers. I combined your solutions and finally figured it out:
final result
Hope this can help anyone who meets the same problem

The Google Visualization API's ColumnCharts color data by series, so if you want multiple colors for your bars, you have to split them into different series.
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var columns = [0];
for (var i = 0; i < data.getNumberOfRows(); i++) {
columns.push({
type: 'number',
label: data.getColumnLabel(1),
calc: (function (x) {
return function (dt, row) {
return (row == x) ? dt.getValue(row, 1) : null;
}
})(i)
});
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
var chart = new google.visualization.ColumnChart(container);
var options = {
fontSize: 16,
// set the "isStacked" option to true to make the column spacing work
isStacked: true
};
chart.draw(view, options);
}
// use the callback from the google loader to draw the chart rather than document ready
google.load("visualization", "1", {packages:["corechart"], callback: function () {
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10],
['満足', 22],
['やや満足', 30],
['やや不満', 10],
['不満', 5]
]);
}});
Here's a jsfiddle of this code: http://jsfiddle.net/asgallant/Rrhak/
I don't think the Visualization API supports vertical writing like that. You can rotate text to be aligned vertically, but that's not what you are trying to achieve here.

You can get vertical labels like you want with a little bit of finagling.
I put a sample here:
I hope this answer makes you 大変満足.
Add Spaces
Your data needs to have each character with a space between it so that they can be broken up in to separate lines:
['satisfaction', 'percent'],
['大 変 満 足', 10 ],
['満 足', 22 ],
['や や 満 足', 30 ],
['や や 不 満', 10 ],
['不 満', 5 ]
Change Axis Display Values
For the hAxis you need to set the following options:
maxTextLines: 5,
slantedText: false,
showTextEvery: 1,
minTextSpacing: 40,
maxAlternation: 1
maxTextLines will allow your labels to be broken up in to multiple vertical lines. 4 would likely work as well as 5 here, since you only have 4 characters.
slantedText ends up being used over splitting up over multiple lines for some reason. So I turned it off manually.
showTextEvery prevents it from showing horizontal labels on one line by only display a subset of your axis labels.
minTextSpacing ensures that even though your lines are one character wide, the chart is fooled in to thinking that it needs to add line breaks.
maxAlternation prevents you from having two 'levels' of labels so that they all line up flush with the axis.
Adjust the Height of the Chart
If you leave the chart height as default, there is only space for 2 lines of labels, so you end up with labels that say
や
や
…
To prevent that, you need to artificially increase the height of the chart. There are a dozen ways to do this, I just set the height property manually.

dynamically update the data to Bar chart in DOJO.

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.

My html file for pie chart using flotr is not fully working

I am just trying to draw a simple pie chart using flotr(an open source javascript for developing various charts). But the code i gave works a little part. The chart was drawn and the explode properties, horizontal and vertical lines all works fine. But the mouse tracker and the legends are not working. I think i have made some mistake in code. but i am not able to clear it. Anyone help me out please. Thanks in advance.
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="flotr.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:300px;" ></div>
<script type="text/javascript">
(function basic_pie(container) {
var
d1 = [[0, 4]],
d2 = [[0, 3]],
d3 = [[0, 1.03]],
d4 = [[0, 3.5]],
graph;
graph = Flotr.draw('container', [
{ data : d1, label : 'Comedy' },
{ data : d2, label : 'Action' },
{ data : d3, label : 'Romance',
pie : {
explode : 50
}
},
{ data : d4, label : 'Drama' }
], {
HtmlText : false,
grid : {
verticalLines : false,
horizontalLines : false
},
xaxis : { showLabels : false },
yaxis : { showLabels : false },
pie : {
show : true,
explode : 6
},
mouse : { track : true },
legend : {
position : 'se',
backgroundColor : '#D2E8FF'
}
});
})(document.getElementById("editor-render-0"));
</script>
</body>
</html>

You can check your browser's type, which browser you use? If IE, you should add
meta http-equiv="X-UA-Compatible" content="IE=edge"
on your first line in <head> segment, and add
[if IE]> script type="text/javascript" src="../lib/excanvas.js">script <![endif]
in <head> for compatibility. And you should add a line:
var container = document.getElementById(' container ');
in function basic_pie(container)'s first line to target the container element.
(caution: some of my answer string have been messed by the stackoverflow website. Sorry for that)

You might have an error in your legend configuration, I deleted it and the legend appeared correctly. Take a look: http://jsfiddle.net/Kpmcn/