logo
down
shadow

Highcharts: create multiple series using JSON data


Highcharts: create multiple series using JSON data

Content Index :

Highcharts: create multiple series using JSON data
Tag : javascript , By : Dominique Vocat
Date : November 28 2020, 12:01 PM

will help you You can achieve it by splitting the JSON data into two separate series to look like that:
[{
  "name": "starts",
  "data": [{
    "x": 1562457600000, // date in milliseconds
    "y": 42
  }, {
    "x": 1562544000000,
    "y": 2
  }, {
    "x": 1562630400000,
    "y": 28
  }]
}, {
  "name": "completes",
  "data": [{
    "x": 1562457600000,
    "y": 142
  }, {
    "x": 1562544000000,
    "y": 90
  }, {
    "x": 1562630400000,
    "y": 175
  }]
}]

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Highcharts with multiple series from JSON


Tag : javascript , By : Paolo
Date : March 29 2020, 07:55 AM
hope this fix your issue Can't you change that "almost" JSON to "another" JSON? Maybe something like this:
[{
    "name":'station 1',
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}, {
    "name":'station 2',
    "data": [ [360191600,398.625], [360191600,398.625], [360191600,398.625] ... [360191600,398.625] ]
}]
data = JSON.parse(data);
var names = [];
$.each(data, function (i, ligne) {
    var ind = names.indexOf(ligne.name),
        splited = ligne.data.split(','),
        x = parseFloat(splited[0]),
        y = parseFloat(splited[1]);
    if (ind == -1) {
        /*series name spotted first time need to add new series */
        ind = names.push(ligne.name) - 1;
        options.series.push({
            data: [],
            name: ligne.name
        });
    } 
    if(!isNaN(x) && !isNaN(y)){
        options.series[ind].data.push([x,y]);    
    }
});

Highcharts with JSON data and multiple series


Tag : javascript , By : user107021
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , You should look at this: http://api.highcharts.com/highcharts#series.data
If you specify each point as an object, you can add any property you want to each point and access it in your tooltip formatter through this.point.
var seriesArr = [];
$.each(jdata, function(key, data) {
  var series = {name : key, data : []};

  $.each(data.y, function(index, value) {
    series.data.push({y: value });
  });

  $.each(data.n, function(index, value) {
    series.data[index].n = value;
  });
  seriesArr.push(series);
});
seriesArr : [{
    name : 'Total',
    data : [
      {y:9.39, n:9.62},
      ...
    ]
  },
...
]
tooltip: {
  formatter: function () {
    return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
  }
},

Retrieving JSON data for Highcharts with multiple series?


Tag : javascript , By : Boyer C.
Date : March 29 2020, 07:55 AM
it fixes the issue I've been looking through tons of examples but I can't seem to get my code to pull out the data. The chart is blank. , As per Pal's comment - changed it to this:
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);

Highcharts: create multiple series grouped my month and year using JSON data


Tag : javascript , By : Ben
Date : December 02 2020, 10:46 PM
should help you out You can achieve it simply by creating a Date object using different parameters.
Instead of the string date parameter new Date('2019-07-07') use year and month as separate parameters like that: new Date(2019, 7).
var json = [{
  month: 6,
  year: 2019,
  starts: 21278998,
  completes: 9309458
}, {
  month: 7,
  year: 2019,
  starts: 38850115,
  completes: 17790105
}];

var series1 = {
    name: 'starts',
    data: []
  },
  series2 = {
    name: 'completes',
    data: []
  };

json.forEach(elem => {
  series1.data.push({
    x: +new Date(elem.year, elem.month),
    y: elem.starts
  });

  series2.data.push({
    x: +new Date(elem.year, elem.month),
    y: elem.completes
  });
});

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime'
  },
  series: [
    series1,
    series2
  ]
});

Highcharts - how to create multiple y axis and group the data series


Tag : javascript , By : waarg
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com