Blog

Creating a Simple JavaScript Chart using CanvasJS

Posted on

Recently we released a JavaScript Charts library, CanvasJS which is based on HTML5 Canvas Element. Hear am going to talk about creating a very basic chart using CanvasJS. CanvasJS API has been designed from ground up to be intuitive and simple and hence it requires just a few lines of code to create a basic chart. In this article I’ll be creating a Line Chart to explain the basics – but you can change it to any other type by changing the type parameter to column, area, bar, pie, etc.

Basic Line Chart using CanvasJS

Let us consider following tabular data that needs to be rendered as a line chart.

Product Sales
A 20
B 26
C 28
D 36
E 32
F 34

To start with, you need to create a HTML Container (div, etc) in which to render the Chart and give it an id. This will be passed to the Chart object during its instantiation. Am calling the div element chartContainer.

<div id="chartContainer" style="height: 300px; width: 100%;">

Now that the container is present, lets create a chart object – Chart object resides in CanvasJS namespace. While instantiating the Chart, we pass id of the container element and chart options that contain all the options and data relating to the chart. Below is how the code looks for a complete chart including HTML

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
      window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer", {
              title:{
                  text: "Basic Line Chart - CanvasJS"              
             },
              data: [              
              {
                  type: "line",//column, bar, pie
                  dataPoints: [
                  { label: "A", y: 20 },
                  { label: "B", y: 26 },
                  { label: "C", y: 28 },
                  { label: "D", y: 36 },
                  { label: "E", y: 32 },
                  { label: "F", y: 34 }
                  ]
              }
              ],
                  theme: "theme1"
          });

          chart.render();
      }

  </script>
  <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

Below is how the Chart Looks like. You can paste the above code into the live chart editor present in CanvasJS home page to see it in action.

JavaScript Line Chart

CanvasJS allows you to create over 14 different types of Charts and they are fully customizable. CanvasJS runs on all the devices including Smart Phones, Tablets, Desktops, etc.

You can see more examples from CanvasJS Gallery


Beautiful HTML5 Graphs & Charts – CanvasJS

Posted on

Today we released an HTML5 Graphing & Charting library called CanvasJS, that works on all modern devices including iPhone, Android, Windows Phone 8, Desktops & Tablets. CanvasJS charts are very simple to use, highly customizable and have a high performance compared to most of the traditional SVG & Flash Based Charts in the market.

Just to give you an idea about performance, most of the SVG and Flash based graphs hit a limit at 10,000 to 20,000 data-points. Whereas, CanvasJS can render 100,000 data-points in just over 100 milliseconds!! You don’t have to take our word for it. You can check out our live demo.

 

CanvasJS HTML5 Charts

 

In the current version we are supporting 14 different types of Charts & Graphs including Line Chart, Column Chart, Pie Chart, Bubble Chart, etc. We’ll be adding more soon. You can take a look at our gallery here.

Apart from making the API intuitive, we have also taken a lot of interest in creating an interactive documentation where you can learn and try out the API without having to leave the browser. Best of all you can get started with CanvasJS within minutes!! Here is our getting stared page.

Do let us know your feedback.

Thank you,
Team CanvasJS


Real Time Search on Google with HashPlug

Posted on

Did you miss real time search over Google? That nice little scroll box which used to update automatically with latest Twitter results? Even we did. So, we thought of creating a Chrome Extension to bring back Real Time Search Results back into Google. You just need to install this Chrome extension and whenever you do a search over Google, it shows relevant twitter results next to Google Results in an unobtrusive manner.  For example if you are searching for “elections”, this is how your search page would look like

 

 

With HashPlug, you longer have to search for the same term once on Google and once on Twitter. You just search on Google the way you’ve always done and HashPlug takes care of the rest. In the screenshot you can observe that you can see tweets that were just written seconds earlier. As of now it only supports twitter results. But we have plans to integrate Facebook results too in future. Checkout the video below

 

 

I had given early beta access to some of my friends and received positive feedback from all of them. Apart from latest trending topics, most of them were also using it for reviews on Movies, Books, Products, etc. Best part is that you can just sit and read tweets/reviews that scroll down one after the other. Do try out the extension and let us know your feedback. Am sure you would love it.

You can install HashPlug from the Chrome WebStore.


Zen News Reader for Windows Phone 7 Released

Posted on

Hi,

 

Am happy to announce the release of Zen News Reader 1.0 for Windows Phone 7. Zen is a beautiful news reader application that it super easy to discover, add and read your favorite blogs/feeds though an intuitive interface. It also keeps a local copy of all the feeds so that you can read them at your convenience even if there is no internet available.

 

 

I hope you’ll like the app. Below are some of the screenshots.

 

Home Screen:

Windows Phone 7 RSS Reader

Content Screen:

RSS/News Reader for WP7

Sharing:
RSS Reader for Windows Phone 7

 

Soon I’ll be coming up with some more features and improvements to the app. At the same time your feedback would be very precious for me. In case you find a bug or have any feedback, please leave a comment below.

 

 

Thank you,
Sunil Urs


Copyright © 2012 fenopix. All Rights Reserved