Интеграция keen.io json в highcharts js

Любой может помочь мне представить этот вид json-данных в диаграмму временных рядов диаграмм. Запутанная часть таймфрейма я получил от этого JSONИнтеграция keen.io json в highcharts js

[ 
    { 
    "value": { 
     "registered_user": 12, 
     "inactive_user": 5, 
     "active_user": 7 
    }, 
    "timeframe": { 
     "start": "2016-06-01T00:00:00.000Z", 
     "end": "2016-07-01T00:00:00.000Z" 
    } 
    }, 
    { 
    "value": { 
     "registered_user": 30, 
     "inactive_user": 10, 
     "active_user": 20 
    }, 
    "timeframe": { 
     "start": "2016-07-01T00:00:00.000Z", 
     "end": "2016-08-01T00:00:00.000Z" 
    } 
    }, 
    { 
    "value": { 
     "registered_user": 25, 
     "inactive_user": 8, 
     "active_user": 17 
    }, 
    "timeframe": { 
     "start": "2016-08-01T00:00:00.000Z", 
     "end": "2016-08-30T00:00:00.000Z" 
    } 
    } 
]

источник

2016-08-30 Dhika

Как вы хотите отобразить свою диаграмму? у вас есть рисунок, как он должен выглядеть? На данный момент я думаю, что вы можете использовать всплывающую подсказку для показа времени начала и окончания: http://jsfiddle.net/bfmfj4md/ –

Не в комментарии @ GrzegorzBlachliński ... отправьте скрипку в ответ .. это отличная демонстрация .. – Moumit

@ GrzegorzBlachliński Я хочу отобразить его с типом базовой диаграммы. Но я думаю, что твоя скрипка уже решила мою проблему. Я могу настроить его так, как мне нужно. большое спасибо – Dhika

Если я вас правильно понимаю, вы можете Preprocess немного ваши данные, так что будет соответствовать вашим требованиям, поэтому каждое мероприятие пользователей будет иметь определенную серию. Вы можете также использовать новый Date() GetTime() для изменения вашей строки даты в миллисекундах (формат принят Highcharts DateTime XAxis):.

var json = [{ 
    "value": { 
     "registered_user": 12, 
     "inactive_user": 5, 
     "active_user": 7 
    }, 
    "timeframe": { 
     "start": "2016-06-01T00:00:00.000Z", 
     "end": "2016-07-01T00:00:00.000Z" 
    } 
    }, { 
    "value": { 
     "registered_user": 30, 
     "inactive_user": 10, 
     "active_user": 20 
    }, 
    "timeframe": { 
     "start": "2016-07-01T00:00:00.000Z", 
     "end": "2016-08-01T00:00:00.000Z" 
    } 
    }, { 
    "value": { 
     "registered_user": 25, 
     "inactive_user": 8, 
     "active_user": 17 
    }, 
    "timeframe": { 
     "start": "2016-08-01T00:00:00.000Z", 
     "end": "2016-08-30T00:00:00.000Z" 
    } 
    }]; 
    var series = [{ 
    name: 'registered_user', 
    data: [] 
    }, { 
    name: 'inactive_user', 
    data: [] 
    }, { 
    name: "active_user", 
    data: [] 
    }]; 
    var startTime; 
    Highcharts.each(json, function(p, i) { 
    startTime = new Date(p.timeframe.start).getTime(); 
    series[0].data.push({ 
     x: startTime, 
     y: p.value.registered_user, 
     timeFrame: p.timeframe 
    }); 
    series[1].data.push({ 
     x: startTime, 
     y: p.value.inactive_user, 
     timeFrame: p.timeframe 
    }); 
    series[2].data.push({ 
     x: startTime, 
     y: p.value.active_user, 
     timeFrame: p.timeframe 
    }); 
    });

Здесь вы можете найти пример того, как это может работать: http://jsfiddle.net/bfmfj4md/

источник

2016-08-30 10:37:24

ничего себе ... большое спасибо за четкое объяснение – Dhika

Интеграция keen.io json в highcharts js

ответ

Смежные вопросы