SerializationException: error parsing file - json

So I'm trying to splice code together (not exactly a programming genius) to spruce up my version of the open-source game Destination Sol. Upon loading a new game, I receive the fatal error:
SerializationException: Error parsing file: res/configs/planets.json (file is essentially putting allies and enemies on planets and setting them up)
com.badlogic.gdx.utils.SerializationException: Error parsing file: res/configs/planets.json
at com.badlogic.gdx.utils.JsonReader.parse(JsonReader.java:77)
at org.destinationsol.game.planet.PlanetConfigs.<init>(PlanetConfigs.java:48)
at org.destinationsol.game.planet.PlanetManager.<init>(PlanetManager.java:53)
at org.destinationsol.game.SolGame.<init>(SolGame.java:121)
at org.destinationsol.SolApplication.startNewGame(SolApplication.java:171)
at org.destinationsol.menu.LoadingScreen.updateCustom(LoadingScreen.java:46)
at org.destinationsol.ui.SolInputManager.update(SolInputManager.java:220)
at org.destinationsol.SolApplication.update(SolApplication.java:132)
at org.destinationsol.SolApplication.safeUpdate(SolApplication.java:111)
at org.destinationsol.SolApplication.render(SolApplication.java:91)
at com.badlogic.gdx.backends.lwjgl.LwjglApplication.mainLoop(LwjglApplication.java:215)
at com.badlogic.gdx.backends.lwjgl.LwjglApplication$1.run(LwjglApplication.java:120)
Caused by: com.badlogic.gdx.utils.SerializationException: Error parsing JSON on line 206 near:
blaster|waveGun:0.1 a1|a2:.5 s1|s2:.5",
density: 0.1,
},
],
groundEnemies: [
{
hull: techieSmall,
items: "fixedPlasmaGun fixedPlasmaGun|fixedBlaster:.5 a2:.5 s3|s4",
money: 120,
density: 0.25,
}
at com.badlogic.gdx.utils.JsonReader.parse(JsonReader.java:548)
at com.badlogic.gdx.utils.JsonReader.parse(JsonReader.java:55)
at com.badlogic.gdx.utils.JsonReader.parse(JsonReader.java:75)
... 11 more
I was hoping someone who understands .json files better than me could tell me what I'm doing wrong. Also, here's the entire planets.json for reference:
{
rocky: {
easyOnly: true,
minGrav: 0.4,
maxGrav: 0.6,
groundTexs: "grounds/rocky",
decoTexs: "deco/rocky",
cloudTexs: "skies/cloud",
rowCount: 4,
smoothLandscape: true,
sky: {
dawnColor: "hsb 0 50 100",
dayColor: "hsb 216 40 100",
},
deco: {
grass: {
density: 0.3,
szMin: 0.1,
szMax: 0.2,
orig: "0 0.5",
allowFlip: true,
},
tree: {
density: 0.4,
szMin: 0.7,
szMax: 0.8,
orig: "0 0.5",
allowFlip: true,
},
},
highOrbitEnemies: [
{
hull: pirateOrbiter,
items: "plasmaGun|blaster s1:.24",
money: 40,
density: 0.03,
}
],
lowOrbitEnemies: [
{
hull: pirateOrbiter,
items: "bombGun s1:.24",
money: 50,
density: 0.1,
},
],
groundEnemies: [
{
hull: piratePlanetTurret,
items: "plasmaGun|blaster s1:.36",
money: 110,
density: 0.45,
},
{
hull: pirateSmall,
items: "blaster|gun s1|s2:.5",
money: 60,
density: 0.15,
},
],
station: {
hull: drome,
items: "gun|shotGun s2 rep:1:4",
},
trading: {
items: "rep plasmaClip shotGun shellClip mineClip bombGun bombClip missileClip s2 unShieldCharge",
ships: "pirateSmall pirateOrbiter pirateMedium",
mercenaries: [
{
hull: pirateSmall,
items: "blaster|gun s1 rep:1:3",
money: 100,
},
],
},
},
desert: {
minGrav: 0.6,
maxGrav: 0.8,
groundTexs: "grounds/desert",
decoTexs: "deco/desert",
cloudTexs: "skies/cloud",
rowCount: 3,
smoothLandscape: true,
sky: {
dawnColor: "hsb 130 50 100",
dayColor: "hsb 200 40 100",
},
deco: {
tree: {
density: 0.25,
szMin: 0.5,
szMax: 0.7,
orig: "0 0.5",
allowFlip: true,
},
remnant: {
density: 0.05,
szMin: 1,
szMax: 1.1,
orig: "0 0.3",
allowFlip: true,
},
cactus: {
density: 0.5,
szMin: 0.2,
szMax: 0.4,
orig: "0 0.5",
allowFlip: true,
},
},
highOrbitEnemies: [
{
hull: desertOrbiter,
items: "fixedGun a1:.25",
money: 150,
density: 0.03,
}
],
lowOrbitEnemies: [
{
hull: desertOrbiter,
items: "fixedBombGun a1:.25",
money: 100,
density: 0.1,
},
],
groundEnemies: [
{
hull: desertPlanetTurret,
items: "gun a1|a2:.5",
money: 80,
density: 0.45,
},
{
hull: desertSmall,
items: "fixedGun fixedGun:.3 a2:.75",
money: 80,
density: 0.15,
},
],
station: {
hull: drome,
items: "shotGun s3 a3 rep:1:4",
},
trading: {
items: "rep teleportCharge fixedGun bulletClip railClip cannon slugClip bombClip a3",
ships: "desertOrbiter desertSmall desertMedium",
mercenaries: [
{
hull: desertOrbiter,
items: "fixedBombGun a1:.25 rep:1:3",
money: 150,
},
],
},
},
frozen: {
hardOnly: true,
minGrav: 0.8,
maxGrav: 1.2,
rowCount: 4,
smoothLandscape: true,
groundTexs: "grounds/frozen",
decoTexs: "deco/frozen",
cloudTexs: "skies/cloud",
sky: {
dawnColor: "hsb 50 50 100",
dayColor: "hsb 125 40 100",
},
deco: {
tree: {
density: 0.4,
szMin: 0.7,
szMax: 0.8,
orig: "0 0.5",
allowFlip: true,
},
},
highOrbitEnemies: [
{
hull: techieOrbiter,
items: "fixedPlasmaGun|fixedBlaster fixedPlasmaGun|fixedBlaster|fixedEmGun:.5 a2:.75 s4",
money: 140,
density: 0.06,
}
highOrbitAllies: [
{
hull: imperialBig,
items: "fixedGun fixedShotGun a2|a3|a4 s2|s3|s4”,
density: 0.01,
},
{
hull: imperialSmall,
items: "blaster|waveGun:0.1 a1|a2:.5 s1|s2:.5", (<== The line that is causing an error)
density: 0.1,
},
],
groundEnemies: [
{
hull: techieSmall,
items: "fixedPlasmaGun fixedPlasmaGun|fixedBlaster:.5 a2:.5 s3|s4",
money: 120,
density: 0.25,
},
{
hull: techiePlanetTurret,
items: "waveGun emGun:.6 a3 s4",
money: 180,
density: 0.45,
},
],
groundAllies: [
{
hull: imperialSmall,
items: “shotGun a1:.5 s1:.5",
density: 0.5,
},
{
hull: imperialMedium,
items: "fixedGun a2|a4:.5 s2|s3:.75",
density: 0.15,
},
]
station: {
hull: drome,
items: "gun|shotGun|waveGun| a4 s4 rep:1:30”,
},
trading: {
items: "rep ",
ships: "imperialSmall imperialMedium imperialBig techieSmall techieOrbiter",
mercenaries: [
{
hull: imperialSmall,
items: "blaster|gun|waveGun a1:0.5 s1 rep:1:8",
money: 75,
},
{
hull: imperialMedium,
items: "fixedGun|fixedShotGun|fixedPlasmaGun a1|a2 s1|s2 rep:1:12",
money: 150
},
{
hull: imperialBig,
items: "fixedGun|fixedShotGun|fixedPlasmaGun fixedGun|fixedShotGun|fixedPlasmaGun:0.5 a2|a3|a4 s2|s3|s4 rep:1:48”,
money: 300,
},
{
hull: techieOrbiter,
items: "fixedGun|fixedPlasmaGun|fixedBlaster fixedGun|fixedPlasmaGun|fixedBlaster|fixedEmGun:.5 a2|a3|a4 s2|s3|s4 rep:1:48”,
money: 300,
},
],
},
},
}

Related

Apex charts in Angular 9

I have some problem using apex charts in angular 9, essentially I'm able to see the chart (line chart) when I mock the data as in the first screenshot, but I can't get data from REST API, I mean the chart disappears.
mocked datas
This is the method containing the chart:
drawGraph(){
this.projectService.getLineChartData(this.getID()).then((data) =>{
for(let i = 0; i<data.resourceListSize; i++){
this.chartOptions = {
series: [
{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ["#77B6EA", "#545454"],
dataLabels: {
enabled: true
},
stroke: {
curve: "smooth"
},
title: {
text: "Average High & Low Temperature",
align: "left"
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5
}
},
markers: {
size: 1
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
title: {
text: "Month"
}
},
yaxis: {
title: {
text: "Temperature"
},
min: 5,
max: 40
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5
}
};
}
})
}
Any help would be appreciated! Thank you
Step 1,
set the configuration with out data like below(minimum configuration)
this.chartOptions = {
series: [],
chart: {
height: 350,
type: "line"
},
xaxis: {}
}
Step 2:
Data from api response and set to "chartoptions" variable,
this.chartOptions.series=[{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
}, {
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
];
this.chartOptions.xaxis=
{
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
}

How can I assign multiple series from my json data? Highcharts

UPDATE(2):
I got it to work so here is the working fiddle. See below for my solution. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
UPDATE(1):
I've continued working on it and here is my updated fiddle. I think I'm overriding my variable/data values each time I loop through. Any help is greatly appreciated.
ORIGINAL POST:
I have a jsfiddle here that shows what I'm trying to do.
I have a series of data in json format that has multiple objects(i.e.,
[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]}
]
)
and am graphing with HighCharts line graphs. Instead, I'd like to define the series data to objects from multiple subtasks all on the same graph. (the variable is better shown in the jsfiddle link)
[
{"subtask":"id1", "":[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,3.5],[1,2.12],[2,0.1],etc.]}
]
},
{"subtask":"id2", "":[
{"name":"name1", "data":[[0,4.1],[1,2.23],[2,0.4],etc.]},
{"name":"name2", "data":[[0,3],[1,2.62],[2,0.15],etc.]}
]
}
]
and I'd like the graph to draw a line for each name/data for each subtask (i.e., the graph draw a line for id1.name1.data, id1.name2.data, id2.name1.data, and id2.name2.data)
My Solution:
I got it to work so here is the working fiddle. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
// what currently works
var jsonFormatThatWorks = [{
"name": "name1",
"data": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"name": "name2",
"data": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
// format I want/need to be able to access/graph
var jsonFormatIWant = [{
"p1": "12345",
"taskName": "z-echo",
"taskData": [{
"subTaskId": "z8-echo",
"someTaskStatus": "Rejected",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 90.80],
[20, 80.37],
[30, 75],
[40, 66],
[50, 33],
[60, 15],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 23],
[20, 15],
[30, 11],
[40, 8.5],
[50, 6.2],
[60, 3.44],
[70, 0.7],
[80, 0.5]
]
}
]
},
{
"subTaskId": "z9-echo",
"someTaskStatus": "Accepted",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
}
]
}]
// my chart
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
xAxis: {
title: {
text: 'Some X Label'
},
crosshair: true
},
plotOptions: {
series: {
marker: {
radius: 1
},
allowPointSelect: true
}
},
yAxis: {
labels: {
format: '{value} %'
},
floor: 0,
ceiling: 100,
title: {
text: 'Value (%)'
},
crosshair: true,
gridLineDashStyle: 'ShortDash',
gridLineColor: '#aaaaaa'
},
title: {
text: 'Sample Chart'
},
subtitle: {
text: 'Click and drag to zoom in. Hold down shift key to pan.'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesOptions
};
var chart = new Highcharts.Chart(options);
});
var seriesOptions = [],
seriesCounter = 0
var data = jsonFormatIWant[0]
var taskData = data.taskData
taskData.forEach(function(element, i) {
element.someTaskData.forEach(function(childElement, j) {
seriesOptions[seriesCounter] = {
//task: element.subTaskId,
name: element.subTaskId + "_" + element.someTaskData[j].objectId,
data: element.someTaskData[j].objectData
}
seriesCounter += 1
//console.log(seriesCounter)
childElement.objectData.forEach(function(grandChildElement, h) {})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<!-- I'd like to be able to graph each objects data for each subTask
(i.e., z8-echo and z9-echo from the data jsonFormatIWant variable beneath the chart definition)
something like: taskData[0].someTaskData and taskData[1].someTaskData -->

Can you animate circles on mapbox, and also, just have hollow circles

I know you can animate circles on google maps , see example
http://jsbin.com/nuwem/1/edit?html,output
.....But can you do the same thing on Mapbox
I am creating a live earthquake map www.livehazards.com. Each earthquake mag is respresent by a circle
I would just like the outline of the circle and to be able to animate it.
I have tried using circle-stroke for just the outline but it did not work
Thanks
To animate your circle you can simply change its paint property several times: map.setPaintProperty('yourmarker', 'circle-radius', 20)
If you only want the circle outline, set "circle-opacity":0 and "circle-stroke-width": 1.
Codepen
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [ 2.35, 48.85 ],
zoom: 3
});
map.on('load', () => {
let radius = 1;
map.addLayer({
"id": "points",
"type": "circle",
// Create the marker
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 2.35, 48.85 ]
}
}]
}
},
// Draw the circle
"paint": {
"circle-opacity": 0,
"circle-stroke-width": 1,
"circle-stroke-color": "#000",
"circle-radius": radius,
"circle-radius-transition": {
"duration": 0
}
}
});
// Animate the circle
setInterval(() => {
map.setPaintProperty('points', 'circle-radius', radius);
radius = ++radius % 30;
}, 50);
});
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [ 2.35, 48.85 ],
zoom: 3
});
map.on('load', function() {
let radius = 1;
map.addSource("earthquakes", {
type: "geojson",
data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson",
});
map.addLayer({
"id": "earthquake-layer",
"type": "circle",
"source": "earthquakes",
"paint": {
"circle-opacity": 0.4,
"circle-color": "#830300",
"circle-stroke-width": 2,
"circle-stroke-color": "#fff",
"circle-radius": {
"property": "mag",
"base": 2.5,
"stops": [
[{zoom: 0, value: 2}, 1],
[{zoom: 0, value: 8}, 40],
[{zoom: 11, value: 2}, 10],
[{zoom: 11, value: 8}, 2400],
[{zoom: 20, value: 2}, 20],
[{zoom: 20, value: 8}, 6000]
"circle-radius-transition": {
"duration": 0
}
]
}
}
});
setInterval(() => {
map.setPaintProperty('eaarthquake-layer', 'circle-radius', radius);
radius = ++radius % 30
}, 50);
});

Stacked bar chart from JSON file - seems to be ignoring a value

Pretty new to this stuff, so any help is greatly appreciated. To start off with, here is my JSON file's contents:
[
{
"drg": "NONSPECIFIC CEREBROVASCULAR DISORDERS W MCC",
"approved": 124,
"denied": 38
},
{
"drg": "SEIZURES WO MCC",
"approved": 138,
"denied": 26
},
{
"drg": "CHRONIC OBSTRUCTIVE PULMONARY DISEASE W CC",
"approved": 352,
"denied": 61
},
{
"drg": "CHEST PAIN",
"approved": 246,
"denied": 44
},
{
"drg": "TRANSIENT ISCHEMIA",
"approved": 205,
"denied": 37
},
{
"drg": "OTHER DISORDERS OF NERVOUS SYSTEM W CC",
"approved": 133,
"denied": 23
},
{
"drg": "DIABETES W MCC",
"approved": 151,
"denied": 27
},
{
"drg": "CARDIAC ARRHYTHMIA CONDUCTION DISORDERS W CC",
"approved": 336,
"denied": 55
},
{
"drg": "HYPERTENSION WO MCC",
"approved": 177,
"denied": 29
},
{
"drg": "POISONING TOXIC EFFECTS OF DRUGS WO MCC",
"approved": 144,
"denied": 24
}
]
My stacked bar chart, which worked fine with a CSV file, keeps ignoring the "denied" value. I suspect the issue has something to do with my formatting of the "processed_json.push()" portion of my code. It renders the approved value stacked on top of itself. Here is the script file:
<script>
$(document).ready(function() {
var processed_json = new Array();
$.getJSON('/dashboard-test-data/denied-percentage-2015-chart.json', function(data) {
for (i = 0; i < data.length; i++) {
processed_json.push([data[i].drg, data[i].approved, data[i].denied]);
}
$('#denied-percentage-2015-chart').highcharts({
chart: {
type: 'bar'
},
credits: {
text: 'Vortext Analytics',
href: 'http://www.vortextanalytics.com'
},
title: {
text: 'Top 10 DRG by Denial Percentage 2015'
},
xAxis: {
type: 'category',
},
navigation: {
menuStyle: {
border: '1px solid #ddd',
boxShadow: 'none',
},
menuItemStyle: {
padding: '5px 1.5rem',
},
menuItemHoverStyle: {
backgroundColor: '#f7f7f9',
color: '#666'
},
buttonOptions: {
height: 40,
width: 46,
symbolX: 23,
symbolY: 22,
x: 10,
y: -15,
symbolSize: 13,
}
},
yAxis: {
min: 0,
title: {
text: 'Total Records'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
}
},
legend: {
align: 'left',
x: 0,
verticalAlign: 'bottom',
y: 22,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
reversed: true,
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y:,0f} of {point.stackTotal:,0f} <b>({point.percentage:.1f}%)</b><br />',
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textOutline: 'none',
fontWeight: 'normal',
fontSize: '9px'
}
},
pointWidth: 20,
}
},
series: [{
name: 'approved',
color: '#55B4E4',
data: processed_json,
}, {
name: 'denied',
color: '#005079',
data: processed_json,
}],
});
});
});
</script>
Here is what the end product should produce (screen grab from my csv version):
Correct
And here is what I'm getting from the JSON file: incorrect
Any assistance or guidance is greatly appreciated. Thanks.
Have a look at highchart's stacked bar chart example. For each series, data contains the array of values for that series.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
In your case, instead of creating the processed_json array of objects, you should create separate arrays containing each series' values.
Change the loop this way:
var xAxis = []
, approvedCount = []
, deniedCount = []
for (i = 0; i < data.length; i++) {
xAxis.push(data[i].drg);
approvedCount.push(data[i].approved);
deniedCount.push(data[i].denied);
Then adapt the chart's instantiation accordingly:
// (...)
xAxis: {
categories: xAxis
},
// (...)
series: [{
name: 'approved',
color: '#55B4E4',
data: approvedCount,
}, {
name: 'denied',
color: '#005079',
data: deniedCount,
}],
// (...)

Highchart speedometer take input from csv

I am trying to read the data from csv and display it as a input to Speedometer but I am unable to get the chart. Please tell me where i am going wrong.
My code is:
$(document).ready(function() {
var options = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: []
};
$.get('data.csv', function(data) {
var series = {
data: [],
name: 'Speed',
tooltip: {
valueSuffix: ' km/h'
}
};
series.data.push(parseFloat(data));
options.series.push(series);
alert("data "+options.series);
var chart = new Highcharts.Chart(options);
});
});
and the csv file is simple
data.csv has only one value 30.
or incase it is
t1,30
t2,40
t3,60
how do i display 3 corresponding speedometers with respective speed.
Your help is greatly appreciated.
Thanks in advance.
In your case data your data (from ajax) is a single string, but you need to split elements and then choose which should be parsed to integer (parseFloat).