HelloWorld - Basic chart
This is the jsfiddle implementation of helloworld.html
by sonylnagale
HTML
<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>
<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
JavaScript
// Declare a CIQ.ChartEngine object.
// This is the main object for drawing charts.
// Here is where you set all required defaults.
var stxx = new CIQ.ChartEngine({
container: $$$(".chartContainer"),
layout: {
"chartType": "mountain",
"crosshair": true,
"periodicity": 1,
"interval": 'day',
},
preferences: {
"currentPriceLine": true,
"whitespace": 100
},
chart: {
yAxis: {
position: 'left'
}
}
});
//Now load a chart with it's data
stxx.loadChart(
"SPY", [{
"_id": "7ea0992c-28f5-41f5-a909-99dbdec65079",
"Date": "2000-12-28T08:00:00.000Z",
"MsgType": 6,
"SecurityID": "d958fe8c-6330-4637-997c-ac932a41ac16",
"Value": 119.22,
"Currency": "EUR",
"Broker": "Broker1"
},
{
"_id": "b17d0f7e-b6d0-4971-8c8b-c19dd2a31c91",
"Date": "2000-12-29T08:00:00.000Z",
"MsgType": 10,
"SecurityID": "c9fa731d-75af-49fd-83bf-a68f6763b954",
"Value": 94.49,
"Currency": "EUR",
"Broker": "Broker1"
},
{
"_id": "e57d8dfc-77ce-43ad-b311-0970cc582158",
"Date": "2000-12-30T08:00:00.000Z",
"MsgType": 3,
"SecurityID": "fa11c521-df92-42b7-9622-a138984c705f",
"Value": 9.54,
"Currency": "EUR",
"Broker": "Broker1"
},
{
"_id": "20863f1c-c890-44d4-9003-f1b984f343de",
"Date": "2000-12-31T08:00:00.000Z",
"MsgType": 8,
"SecurityID": "3954b0df-6d88-46c4-ab3b-99a70038e348",
"Value": 31.58,
"Currency": "EUR",
"Broker": "Broker1"
},
{
"_id": "921b7c0a-f416-46ff-8917-acc7aaaafd00",
"Date": "2001-01-01T08:00:00.000Z",
"MsgType": 7,
"SecurityID": "fef348bd-0137-4393-8b56-48d3c3f7c709",
"Value": 24,
"Currency": "EUR",
"Broker": "Broker1"
},
{
"_id": "e6bcabab-513e-4a5c-8f16-1c7a8284cdf0",
"Date": "2001-01-02T08:00:00.000Z",
"MsgType": 2,
"SecurityID": "27d4a994-854b-4b49-a78c-ca6373c493d2",
...