Databases
StackOverflow2013
Postsdbo
POusing JSON dates with Highstock chart (asp.net MVC)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POusing JSON dates with Highstock chart (asp.net MVC)
    text
    copied!<p>I am trying to output JSON data on to Highstock chart. Initially I struggled with the JSON formatted date which I resolved by following instruction on other answer on stackoverflow by re-formatting dates. But I'm still unable to get the graph plotted on view page - </p> <pre><code> &lt;script src="http://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { var mydata =[]; chartOjb = new Object(); $.ajax({ type: "GET", url: "/ReportIntance/DummyCall/2", data: '{ }', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $.each(data, function (index, item) { chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)); chartOjb.data = item.Series1; mydata.push({ x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)), y: item.Series1 }); }) }, failure: function (response) { alert(response); } }); chart1 = new Highcharts.Chart({ chart: { renderTo: 'Chart1' }, title: { text: 'Delivery Price example using Chart' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: 'Price' } }, series: [ { data: mydata }] }); }); &lt;/script&gt; &lt;div id="Chart1" style="height: 500px; min-width: 500px"&gt;&lt;/div&gt; </code></pre> <p>My JSON string is - </p> <pre><code>[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, {"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}] </code></pre> <p>Currently I'm trying to output simple line chart and using only DayDate (X-axis) and 'Series1' as Y-axis. </p> <p>Highstock chart shows just 'x axis' but no line graph or y axis is shown.</p> <p>Can someone point me what I'm doing wrong? Any help will be appreciated. </p> <p>Edit: </p> <p>After setting <code>turboThresold</code> field I can now see the X Axis on my highstock chart. However values from y axis are still missing. This is how graph looks without any y axis lines. The data seems to be correct </p> <p>Here's my updated code - </p> <pre><code>$(function () { var mydata = []; chartOjb = new Object(); // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php $.getJSON('/ReportIntance/DummyCall/2', function (data) { // Add a null value for the end date //data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]); $.each(data, function (index, item) { chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)); chartOjb.data = item.Series1; mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) }); //alert(chartOjb.name + "/" + chartOjb.data); }); // create the chart $('#container').highcharts('StockChart', { chart: { //type: 'candlestick', zoomType: 'x' }, navigator: { adaptToUpdatedData: false, series: { data: mydata } }, scrollbar: { liveRedraw: false }, title: { text: 'Historical prices from June 2012' }, subtitle: { text: 'Displaying 20K records using Highcharts Stock by using JSON' }, plotOptions: { line: { turboThreshold: 20450 } }, xAxis: { type: 'datetime', title: 'Time', minRange: 3600 * 1000/15 // one hour }, yAxis:{ title: { text: 'Prices', style: { color: '#89A54E' } }, lineWidth: 1, opposite: false, showEmpty: false //hides empty data series }, series: [{ data: data, pointStart: Date.UTC(2012, 6, 1), // first of June pointInterval: 3600 * 1000/15, dataGrouping: { enabled: false } }] }); }); }); </code></pre> <p><img src="https://i.stack.imgur.com/uWp28.jpg" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload