Create Highchart (Column chart) and read data from external json file - javascript

I have to create a column chart in my project using Highchart.I have JSON file that contain some data look like:
{
"meta": [
"rectime",
"strid",
"ambt",
"stri",
"b1",
"b2",
"b3",
"b4"
],
"data": [
[
1377597739,
1,
0,
77,
816,
13791,
13794,
13945
],
[
1377597739,
2,
0,
0,
816,
13744,
13725,
13898
]
]
}
May anyone can suggest me about what should I do.
ThanKs all helping

after you recieve the response (I mean the JSON) in success call back pass the response.data to a routine which will parse this JSON data as accepted by Highcharts.
series:[{
name: 'series 1'
data: [1,2,4,5,6,74]
},{
name: 'series 2'
data: [1,2,4,5,6,74]
},{
name: 'series 3'
data: [1,2,4,5,6,74]
}]
you can exclude name if you don't want to give a specific name to every series. although highcharts generates unique name for every series.
to get the column chart set the type to column.
chart:{
type: 'column'
}

Related

how to show multiple data labels on react highchart line chart?

i want to show below data (sample data from my api) on react highchart line chart. but i am confuse how to prepare this data. the chart should be look alike, at Aaxis all assignments name and at y axis if 4 assignment name then look at data each object have values array. so 4 assignment names means 4 charts with multiple data labels. look at below screen shot. first image is what my chart should look alike. the second screenshot is how my chart giving error data is not loading.i am also attaching codesandbox link. the data is too much i have total 30+ assignments names with array of datalabels but right now i am attaching only 4.
codesandbox link : https://codesandbox.io/s/customizable-react-dashboard-with-chart-fork-forked-15rfpq?file=/src/LineHighchart.js
my sample Data:
const data ={"data":[{"assignment_name":"assignment for oliver","0":26,"1":1,"2":70,"3":80,"4":100,"5":10,"6":0,"7":0},{"assignment_name":"assignment","0":25,"1":0,"2":19,"3":35,"4":310,"5":0,"6":0,"7":0},{"assignment_name":"assignment2","0":27,"1":20,"2":10,"3":30,"4":50,"5":90,"6":0,"7":0},
{"assignment_name":"assignment2","0":29,"1":0,"2":10,"3":0,"4":30,"5":0,"6":60,"7":10},
]}
I am not familiar with the react wrapper for Highcharts, but here is a plain vanilla Highcharts object to show a line graph with two series and five data points, which might help you dig further:
{
"chart": {
"height": 436
},
"xAxis": {
"categories": [
"2019-12-30",
"2020-01-06",
"2020-01-13",
"2020-01-20",
"2020-01-27",
],
"title": {
"text": "Week",
}
},
"series": [{
"name": "Count",
"type": "line",
"data": [ 6, 9, 7, 6, 5 ]
}, {
"name": "Slope",
"type": "spline",
"data": [ 5.9, 6.23, 6.57, 6.9, 7.23 ]
}
]
}
UPDATE:
Here is the answer for your comment question: "can u make array of object from my given data and then give that variable to series":
const data ={
"data": [
{"assignment_name":"assignment for oliver",
"0":26,"1":1,"2":70,"3":80,"4":100,"5":10,"6":0,"7":0},
{"assignment_name":"assignment",
"0":25,"1":0,"2":19,"3":35,"4":310,"5":0,"6":0,"7":0},
{"assignment_name":"assignment2",
"0":27,"1":20,"2":10,"3":30,"4":50,"5":90,"6":0,"7":0},
{"assignment_name":"assignment2",
"0":29,"1":0,"2":10,"3":0,"4":30,"5":0,"6":60,"7":10},
]
};
let categories = Object.keys(data.data[0]).filter(key => key.match(/^\d+$/));
let series = data.data.map(obj => {
return {
name: obj.assignment_name,
tyle: 'line',
data: categories.map(key => obj[key])
}
});
let chartObj = {
"chart": {
"height": 436
},
"xAxis": {
"categories": categories,
"title": {
"text": "Assignments",
}
},
"series": series
};
console.log(chartObj);

Share data between vega-lite graphs

I have a site with two vega-lite graphs that show different aspects of the same dataset, which is generated dynamically (similar to this example). Currently they both hold their own version of this dataset.
Since the dataset tends to get quite big I would like them to share the data between them so they use less memory.
Since the data will be updated later (from the function update_vega()) I can't just put it into a variable and embed it in both diagrams.
Is it possible in vega-lite to have multiple graphs sharing the same data-object and how can I do it?
Here is my code (I have only been learning javascript 3 days ago, so I am very happy about feedback on every level):
<!DOCTYPE html>
<html>
<body>
<!-- setup of the vega graph -->
<script src="https://cdn.jsdelivr.net/npm/vega#5.10.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.3.2"></script>
<div id="vega_graph_one"></div>
<div id="vega_graph_two"></div>
<script>
var vlSpec_one = {
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
width: 400,
mark: 'bar',
encoding: {
x: {field: 'time', type: 'quantitative', binned: true},
y: {aggregate: "count", type: 'quantitative'},
color: {field: 'age', type: 'quantitative'}
}
}
var vlSpec_two = {
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: { name: 'table', values: [{"time":11, "age": 4},{"time":12, "age": 4},{"time":11, "age": 5}]},
width: 400,
mark: 'point',
encoding: {
x: {field: 'time', type: 'quantitative'},
y: {field: 'age', type: 'quantitative'},
}
}
// two global variables so the view can be updated from an outside function
var view_one;
var view_two;
vegaEmbed('#vega_graph_one', vlSpec_one).then(
result => { view_one = result.view;},
reason => { console.error(reason);}
)
vegaEmbed('#vega_graph_two', vlSpec_two).then(
result => { view_two = result.view;},
reason => { console.error(reason);}
)
// update the vega graph from outside
// call with update_vega([{"time":11, "age": 4},{"time":12, "age": 4},{"time":9, "age": 6}])
function update_vega(event_data){
var changeSet = vega.changeset()
.insert(
event_data
);
// data dublication happense here
view_one.change("table", changeSet).run();
view_two.change("table", changeSet).run();
}
</script>
</body>
</html>
First, consider putting your data in javascript function and call it in data, should be easier to maintain for both data and chart:
function getData(){
var mydata = [{"time":11,"age": 4},{"time":12,"age": 4},{"time":11, "age":5}];
return mydata;
}
Then you can call it:
{
"data": getData(),
"mark": {"type" : "bar"}
}
There are several concepts that help achieving data sharing based on your needs.
You need just one vegaEmbed and one vlSpec that utilizes one of the following:
Layers
Put data on top of all layers and refer to it from each mark's layer
{
"data": {"values":getData()},
"layer": [
{
"mark": {"type" : "bar"}
},
{
"mark": {"type" : "point"}
}
]
}
Concat
vconcat, hconcat, and concat can be used to produce multiple charts of different mark each using same data, it doesn't perfectly suite your case because you don't have the same x and y fields in every mark. Read more on Concatenating views
{
"data": {"values":getData()},
"concat": [
{
"mark": {"type" : "line"},
"encoding": {
"x": {"field": "time"},
"y": {"field": "age"}
}
},
{
"mark": {"type" : "bar"},
"encoding": {
"x": {"field": "time"},
"y": {"field": "age"}
}
}
]
}

How do I reshape my existing JSON to fit Highcharts

I am new to JS and I am having trouble with feeding my data to Highcharts for visualization.
Say I have a following JSON data
{
"is_error":0,
"keys":[
"count",
"created_date",
"source",
"gender_id",
"type"
],
"error":"",
"values":[
{
"count":3,
"created_date":"2017-08-09",
"source":"",
"gender_id":"",
"type":"Organization"
},
{
"count":1,
"created_date":"2017-08-10",
"source":"",
"gender_id":"",
"type":"Organization"
},
{
"count":2,
"created_date":"2017-08-09",
"source":"",
"gender_id":1,
"type":"Individual"
},
{
"count":1,
"created_date":"2017-08-12",
"source":"",
"gender_id":1,
"type":"Individual"
}
]
}
How would I transform it to a Highcharts series array so that it looks something like this:
series: [{
name: 'Organization',
data: [
[Date.UTC(2017, 08, 09), 3],
[Date.UTC(2017, 08, 10), 1],
]
}, {
name: 'Individual',
data: [
[Date.UTC(2017, 08, 09), 2],
[Date.UTC(2017, 08, 12), 1],
]
}]
In the JSON I have some information which isn't required (source and gender_id).
Here is my example in JSFiddle with full big data set that I want to transform using JS and fit it into a Highchart.
Is there an easy way to do transform a JSON like this to something which can be plugged into a Highchart?
Check this one Fiddle and update according to your needs
series: chartData

Change Corresponding Bar Stack Color

Currently I have the following implementation which assumes all items are different; in other words, there are no common/grouped objects in the dataset. It works fine.
However, I would like to know what if there are two common/grouped objects in the dataset, is there a way to change the corresponding bar color?
For example, by looking at the last objects of following data[0] and data[1], these items name are same, and I would like to give same color to corresponding bar stack.
data[0]=[{"value":29, "series":"item1", "category":"Men", "name":"HY"},{"value":44, "series":"item2", "category":"Men","name":"NY"}]
data[1]=[{"value":16, "series":"item3", "category":"Women", "name":"RY"},{"value":23, "series":"item5", "category":"Women", "name":"NY"}]
JSfiddle
You need to add color: function(data){....} and then you can use two way,
By adding some condition either like this one the color function and refer to jsfiddle :
series: [{
type: "column",
field: "value",
stack: true,
name: "#= group.value #",
highlight: {
visible: false,
},
color: function (data) {
//check if the item fname is NY
if (data.dataItem && data.dataItem.fname == "NY") {
//give the color you wanted
return "#CC6699";
}
}
}],
Or if you want , add the color into the data like this :
data[0] = [{
"value": 29,
"series": "item1",
"category": "Men",
"fname": "NY",
"color" : "#CC6699"
}, {
"value": 44,
"series": "item2",
"category": "Men",
"fname": "GY",
"color" : "#99FF99"
}]
and the color function return data.dataItem.color

Javascript FLOT Combined Bar & Line Chart with x-axis as string

I have a bar graph where the x axis is a string, so I need to use a ticks array, I also need to be able to specify the colour of each bar and to also plot a line in the same graph.
The following is the code I have now which has been through many alterations to try and make it work, but I am now stuck.
I cannot get this to display the graph at all, here it is on jsfiddle: http://jsfiddle.net/9x7aJ/4102/
Any help would be appreciated as I have spent the best part of today on trying to solve this.
var fdat = [
{
"color": "#6ECFF6",
"data": [[0,114]]
},
{
"color": "#7BCDC8",
"data": [[1,96]]
},
{
"color": "#FDC68A",
"data": [[2,94]]
}
]
var data = [
{label: "d1", data:fdat, bars: {show: true}},
{label: "d2",data:fdat, lines: {show: true}, points:{show:true}}
];
var opts = {xaxis: {ticks:[[0,"Text 1"], [1,"Text 2"], [2,"Text 3"]]}};
$.plot($("#placeholder"),data,opts);
You cannot have an object with different colors for each data point, data points have to be simple arrays. If you simplify your data to
var fdat = [
[0, 114],
[1, 96],
[2, 94]
]
the graph works (updated fiddle).
If your need different colors for each bar, create one data series for each bar.

Categories

Resources