CODEWITHSUNDEEP
javascripthighcharts
sony
sony

Reputation: 1503

how to set fieldnames in high chart?

I am a newbie in highcharts. I have used Kendo UI charts before. In Kendo, we can tell the fieldname which we want to plot in the chart as below:

series: [{
    name: "steps",
    field: "steps",
    categoryField: "createddate"
}]

and we can tell the dataSource as below:

dataSource: dSource

where dSource is an AJAX URL.

I didnt find anywhere in the tutorial something like this. My JSON file is below:

[{"ActivitySummaryKey":174000,
    "id":"kkse2",
    "activityscore":-,
    "activitycalories":456,
    "caloriesBMR":1017,
    "caloriesOut":1412,
    "distances":1.57828236,
    "elevation":0,
    "fairlyActiveminutes":34,
    "floors":0,
    "lightlyActiveMinutes":28,
    "marginalCalories":334,
    "sedentaryMinutes":827,
    "steps":5077,
    "veryActiveMinutes":26,
    "trackersteps":0,
    "trackerdistances":0,
    "trackerfloors":0,
    "trackerelevation":0,
    "trackerActivityCalories":0,
    "trackerCaloriesOut":0,
    "trackerMinutesSedentary":0,
    "trackerminutesLightlyActive":0,
    "trackerminutesFairlyActive":0,
    "trackerminutesVeryActive":0,
    "createddate":"9/17/2014 12:00:00 AM",
    "distanceunit":"Miles"
}]

I want to plot steps on y axis and createddate on x axis.

How to go about with it?

Upvotes: 0

Views: 57

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7896

You should use high-charts data formats --> series.data.

For your points to be visible x and y must be set with value from JSON (steps and createddate). Also you need to parse date ( like with Date.UTC() ).

So the result, required for Highcharts would be:

[{
    "ActivitySummaryKey":174000,
    "id":"kkse2",
    "activityscore":-,
    "activitycalories":456,
    "caloriesBMR":1017,
    "caloriesOut":1412,
    "distances":1.57828236,
    "elevation":0,
    "fairlyActiveminutes":34,
    "floors":0,
    "lightlyActiveMinutes":28,
    "marginalCalories":334,
    "sedentaryMinutes":827,
    "steps":5077,
    "veryActiveMinutes":26,
    "trackersteps":0,
    "trackerdistances":0,
    "trackerfloors":0,
    "trackerelevation":0,
    "trackerActivityCalories":0,
    "trackerCaloriesOut":0,
    "trackerMinutesSedentary":0,
    "trackerminutesLightlyActive":0,
    "trackerminutesFairlyActive":0,
    "trackerminutesVeryActive":0,
    "createddate":"9/17/2014 12:00:00 AM",
    "distanceunit":"Miles",
    "x": 1410904800000,      // timestamp in ms for Highcharts, extracted from "createdate"
    "y": 5077                // y-value for Highcharts
}]

Upvotes: 1

Related Questions