We Keep Coding

How to perform an histogram with the following dictionary?

I have a dictionary called dict that looks as follows:
var dict = {
'Ex': 6,
'C': 6,
'blue': 2,
'car': 2,
'yellow': 2,
'X': 4,
'X3': 2
};
I would like to plot an histogram of it, with the keys as the labels of the horizontal axis and the values of the dictionary that are the frecuency as the vertical axis, I tried:
<canvas id="myChart" width="100" height="100"></canvas>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# Frecuencies Words',
data: [],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
However the problem is that I am not sure of how to proceed to use the values of the dictionary to perform the graph, I would like to appreciate any suggestion to achieve this, I built the following jsfiddle to explain better the situation: https://jsfiddle.net/xbbc677o/

You're not doing bad, all you need now is to map that object into the data and label fields. Let's begin with labels
Object.keys(dict) returns an array of all the keys from dict
So we put
labels: Object.keys(dict)
Now we need the values for the data array, with Object.keys and map we can do it easily, we use Object.keys to get an array of all the keys in dict and then map to get each value from it's key, like this:
data: Object.keys(dict).map(function (key) { return dict[key]; })
Working fiddle
Both Object.keys and map are part of the ECMAScript 5 specification, so this wont work on ES3 (IE 8 or lower), but you can get pollyfils for both of those functions:
Array.prototype.map polyfill
Object.keys polyfill

Spanning categories in Highcharts across multiple points

I am trying to make my categories span across multiple data points in Highcharts. Here is an example fidde: http://jsfiddle.net/pn9qvz7v/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [1, 2, 3, 4, 5, 6]
}]
});
});
In my example, I'd like for the "Jan" category to span across the 1 and 2 data points, the "Feb" category to span across the 3 and 4 data points, and the "Mar" category to span across the 5 and 6 data points. Is there an easy way to do this?
Thanks.

You can manipulate the x values of your data to achieve this.
Instead of:
data: [1, 2, 3, 4, 5, 6]
Supply x/y pairs. The x value is the category index, and in this case, you need to provide one x value below the category index, and one above:
data: [
[-0.25,1],
[0.25,2],
[0.75,3],
[1.25,4],
[1.75,5],
[2.25,6]
]
Updated fiddle:
http://jsfiddle.net/pn9qvz7v/1/
Though, if you are using dates, why not just use a datetime x axis type, and provide the actual dates?
http://api.highcharts.com/highcharts#xAxis.type

Highstock - Pulling data from JSON file

I understand there are many similar questions related to this topic on SO however, I was unsuccessful at implementing what I am trying to do so I am writing a question here. Please understand that I am very new.
So, basically, using the Highstock - the basic graph which can be found here http://www.highcharts.com/stock/demo/basic-line, I want to import the data from an JSON file named Json1.json. How would I do this? http://jsfiddle.net/x0g8hL0e/1/
In the JavaScript, I have written
$(function () {
$.getJSON('Json1.json', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Pressure'
},
});
});
});
Also, is it possible to just see the 24 hour format instead of a year-long?
P.S, Json data is formatted in this way
[
{"Pressure": 1},
{"Pressure": 5},
{"Pressure": 3},
{"Pressure": 2},
{"Pressure": 4}
}]

You should process your data, so it will be in a format that is accepted by Highcharts. It can be (as described in API reference):
An array of numerical values.
An array of arrays with 2 values.
An array of objects with named values.
Other option is to use an array with keys defined.
If you want to use e.g. 1st data fromat, then you could go through your JSON and create an array of numerical values with values taken out of each object, from Pressure property.
$(function () {
//$.getJSON('Json1.json', function (data) {
// simulate JSON data
var data = [{
"Pressure": 1
}, {
"Pressure": 5
}, {
"Pressure": 3
}, {
"Pressure": 2
}, {
"Pressure": 4
}],
processedData = [];
// process the data to match one of formats required by Highcharts - an array of numberical values
// see: http://api.highcharts.com/highstock#series<line>.data
Highcharts.each(data, function(d) {
processedData.push(d.Pressure);
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'Pressure'
},
series: [{
data: processedData
}]
});
//});
});
JSFiddle
For basic information about Highcharts you could see General Documentation

Highcharts proper usage of datetime?

My current setup is somewhat static with xaxis categories and tickinterval(cant even see the graph without tickinterval).
If you change screen resolution it looks somewhat bad and I would like to have the x-axis to be dynamic.
What I've gathered you should use data like this http://www.highcharts.com/samples/data/usdeur.js and xAxis like below?
xAxis: { type: 'datetime' }
But that example only uses YYMMDD, I also use hh:mm:ss.
Currently looks like this: i.imgur.com/v649otj.png
xAxis: {
categories: getjson('Date'),
tickInterval: 20
},
series: [
{name:'Cars', data: getjson('Values')},
]
Data:
getjson('Date') equals:
Array [ "2014-11-09 02:36:00", "2014-11-07 07:35:00", "2014-11-08 20:29:00", "2014-11-08 20:30:00", "2014-11-10 11:06:00", "2014-11-08 08:12:00", "2014-11-08 20:31:00", "2014-11-08 20:23:00", "2014-11-08 20:24:00", "2014-11-08 20:25:00", 190 till… ]
getjson('Values') equals:
Array [ 13, 209, 209, 19, 0, 209, 15, 13, 13, 19, 190 till… ]
So how do I make use of this data and the datetime configuration.
Somehow push the 'Date'-data into same array as 'values' and convert it into right date format?
Edit: Current work: http://jsfiddle.net/tws8x0pd/4/

Datetime configuration uses UTC numbers not YYMMDD! You should pass your datetime data with Date.UTC(year,month,day,hour,minute,second) in Series data with the format:
series: [
{name:'...', data: [ [ Date.UTC(year,month,day,hour,minute,second), value ],
[ Date.UTC(year,month,day,hour,minute,second), value ],
...
]
}
]
so you should get the year,month,... out of your json date and put it with the corresponding value in json values. Each in one array, not apart in separate arrays.

The time require to be as timestamp (time in miliseconds) not strnig as you have. So you need to prepare correct data by Date.parse() / Date.UTC()

How to make Highcharts fetch data from external JSON file?

Basically, I have this http://jsfiddle.net/TWF6N/
Instead of having the data series in the JS file, I want to have the JS retrieve a JSON file.
I do not want this to be in the JS file:
data = {"aaData": [
[1, "70.1700", "2008-12-29 11:23:00"],
[2, "70.2600", "2008-12-29 16:22:00"],
[3, "70.6500", "2008-12-30 11:30:00"],
[4, "70.8700", "2008-12-30 16:10:00"],
[5, "70.5500", "2009-01-02 11:09:00"],
[6, "70.6400", "2009-01-02 16:15:00"]
]};
How do I make this?
Thank you.

Straight from the HighChart documentation:
Your JSON data would look like this:
[
[1, "70.1700", "2008-12-29 11:23:00"],
[2, "70.2600", "2008-12-29 16:22:00"],
[3, "70.6500", "2008-12-30 11:30:00"],
[4, "70.8700", "2008-12-30 16:10:00"],
[5, "70.5500", "2009-01-02 11:09:00"],
[6, "70.6400", "2009-01-02 16:15:00"]
]
And your JS would look something like this:
$(function () {
var chart;
$.getJSON('data.json', function(jsonData) {
chartOptions.series = jsonData;
chart = new Highcharts.Chart(chartOptions);
});
var chartOptions = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: []
};
});

Presumably you're using some server side technology like php or asp.net? If so, then you could just make a call back to the server to receive your json in a HttpResponse.