Develop Reference

Is it possible with Highcharts Polar Chart to have curved lines connecting the points?

I am looking at using Highcharts as a replacement for Google Image Charts.
Polar (Radar) graphs on Google Image Charts had the option of chart type 'rs' which had curved lines connecting the points on the graph instead of straight lines.
Google Image Charts - Radar Chart
Is that possible in Highcharts 7.x? I am looking through the online docs for the options and I don't see that specified anywhere, and I keep getting Spline graph info when I try to search for it.

The polar option is independent of the chart type, so you can use both options:
chart: {
polar: true,
type: 'spline'
},
Or specify the series types:
chart: {
polar: true
},
series: [{
type: 'spline',
data: [...]
}, {
type: 'column',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/zp7vna4f/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/chart.type

Google Embed API Chart Types?

I am trying to use the Embed API to make a custom dashboard from my Google Analytics account.
Below, you will see the code that is used to render the chart on the screen. Inside of the chart object, there is a property called type which is set to LINE in the example below.
Where can I find a list of these values? It's really annoying having to arbitrarily guess what the string values are. The documentation doesn't show what the possible values are or how many there are.
I tried going to the Goolge Charts page and look for a list, but I couldn't find it either. Any help is appreciated.
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions,ga:uniquePageviews',
dimensions: 'ga:date',
'start-date': '10daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'LINE',
options: {
width: '100%'
}
}
});

You can check Built-in Components Reference of Embed API and checkout the Datachart Options.
Following are the chart types:
LINE
COLUMN
BAR
TABLE
GEO

There is an additional chart type of PIE. This is not mentioned in the official documentation. Here is a demo of the PIE type.

Highcharts wrapper similar to Google visualization chartwrapper

In Google visualization ChartWrapper class, the code to draw a chart (bar chart, pie chart, etc) is as follows:
wrapper = new google.visualization.ChartWrapper({
dataTable: dataTable.toJSON(),
chartType: chartType,
options: options
});
console.log("Wrapper: " + wrapper.toJSON());
console.log(" ");
wrapper.draw(result[0]);
I am curious if there's an equivalent way of doing this using Highcharts where instead of calling new google.visualization.chartWrapper(...), we can just call something like new highcharts.chartWrapper(...). The options can include the container div id where the chart will be drawn.
Even if there is no way to do, any suggestions how I should be go about doing something similar to this?
As far as I know, in dataTable I can specify my data series in JSON format. In chartType, I can specify bar, column, pie, etc. Based on the highcharts example I saw, I can even write a service that generates a HTML file on the server side as shown here -> http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ and send back a response.
But what I don't know is how do I tell Highcharts to insert the chart right at container id specified in my options on the same page.
In this example, for instance, wrapper is just a json representation of the chart (which I can generate). What I am not sure is how do I convert that json representation to a highcharts map that gets inserted where I want on the same page.
Sorry, if this question seems complicated. I can clarify if you need additional information.

Nested/multi-level/drill-down Pie Chart in Javascript?

I'm trying to create a pie chart with javascript that will allow users to click on a slice and "view what makes up that slice." If you've ever used mint.com you'll know what I mean - say you're viewing an expenses pie chart and you click the "Automobile" slice, then you see the slice expand into a new chart of Gas, Maintenance, etc.
To take this a step further, I'm dealing with a large amount of data, so being able to fetch (ajax) the new data when the slice is clicked would be a useful option as well (though I can probably get away without it).
Perhaps "nested", "multi-level" and "drill-down" are not the right terms because I've been searching all day and cannot seem to find a solution.
Does anyone know of a library for this? Thanks in advance!

I've implemented similar drilldown systems using the HighCharts point click event. Here's the rough syntax:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/by/id/' + this.id, function(data) {
// you may need to format your data here
chart.series[0].setData(data);
});
}
}
}
}]
});
In this example, you define a click event that uses the point's id value (this.id) to perform an Ajax post to a URL. You then use the data from your post to re-bind the chart series.
Please note that each time you use the setData function to update the chart, each data point needs to have an id value in order for the drilldown to continue.
Hope this helps!

Try psd3 pie chart library
Demo - https://pshivale.github.io/psd3
Source - https://github.com/pshivale/psd3
It supports multi-level pie charts, donut charts and sunburst charts. It also supports drilling down a pie slice by double clicking it.

Update graph from json data

I got a go program that outputs json data:
{ "cpu" : {
"Idle" : 9875425,
"Iowait" : 28338,
"Irq" : 5,
"Nice" : 9707,
"Softirq" : 4051,
"System" : 153933,
"Time" : 1329211407,
"User" : 392229
},
"cpu0" : {
"Idle" : 2417441,
"Iowait" : 3212,
"Irq" : 5,
"Nice" : 1419,
"Softirq" : 3935,
"System" : 62177,
"Time" : 1329211407,
"User" : 109227
},
}
I'm looking for a good efficient way to present and update a graph using javascript (say for every 1s).

There is no shortage of javascript libraries to graph data. I've worked with Highcharts, which is free for personal projects. To make a graph using your data in highcharts, you could do something like this:
var data = [] //your data from above; you'll need to convert it to an array of y-values or one of the other available formats
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
},
series: [{
name: 'Series Title',
data: data
}]
});
});
...However, as mentioned, there are lots of JS graphing libraries. To name a few:
JQPlot
D3
Processing.js
Sencha Charts
If you're looking for a more specific answer, I'm not sure folks can offer that much in response to a vague question.

I'm a big fan of dygraphs. Very powerful. Very flexible.

I like to work with the d3js library for this kind of work.
http://mbostock.github.com/d3/
It has very nice functions to update graphs with new data.
Maybe you can base your work on the "bullet charts" example.

Google has a BUNCH of apis. You should check some of them out. One of them is the chart api here. It let's you make QR codes too. Google even has some examples in the js playground: http://code.google.com/apis/ajax/playground/?type=visualization#annotated_time_line